@rogieking/figui3 6.31.2 → 6.32.0

package/dist/fig.js

@@ -354,7 +354,7 @@ var w1=(Q,Z)=>()=>(Q&&(Z=Q(Q=0)),Z);var v1={};var P0=w1(()=>{/*! Vendored from @
                     <span slot="prepend">Y</span>
                   </fig-input-number>
                 </div>`:""}
-        `}#B(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane?.addEventListener("pointerdown",this.#Q),this.cursor?.addEventListener("pointerdown",this.#Z),this.cursor?.addEventListener("input",this.#$),this.cursor?.addEventListener("change",this.#J);let Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#y());if(this.#W&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#j),this.xInput.addEventListener("change",this.#j),this.xInput.addEventListener("focusout",this.#Y),this.yInput.addEventListener("input",this.#q),this.yInput.addEventListener("change",this.#q),this.yInput.addEventListener("focusout",this.#_)}#M(){if(this.plane?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("pointerdown",this.#Z),this.cursor?.removeEventListener("input",this.#$),this.cursor?.removeEventListener("change",this.#J),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#W&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#j),this.xInput.removeEventListener("change",this.#j),this.xInput.removeEventListener("focusout",this.#Y),this.yInput.removeEventListener("input",this.#q),this.yInput.removeEventListener("change",this.#q),this.yInput.removeEventListener("focusout",this.#_)}#A(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.x=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#E(),this.#I()}#P(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.y=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#E(),this.#I()}#D(){this.#E(),this.#f()}#H(Q,Z,{syncHandle:$=!0}={}){let J=Math.max(0,Math.min(1,Q)),j=Math.max(0,Math.min(1,Z)),q=this.coordinates==="math"?1-j:j;if(this.position={x:J,y:q},$)this.#R();this.#C(),this.#E()}#O(Q){if(!this.plane||!this.cursor)return;if(Q.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;let Z=this.plane.getBoundingClientRect(),$=Z.width>0?(Q.clientX-Z.left)/Z.width:0.5,J=Z.height>0?(Q.clientY-Z.top)/Z.height:0.5;this.cursor.value=`${Math.round($*100)}% ${Math.round(J*100)}%`,this.#H($,J,{syncHandle:!1}),this.#I(),this.#f()}#T(Q){let Z=Q.detail??{};if(typeof Z.px!=="number"||typeof Z.py!=="number")return;this.#H(Z.px,Z.py,{syncHandle:!1}),this.#I()}#S(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#E(),this.#f()}#I(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#f(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#R(){let Q=this.#N(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${Q*100}%`;this.#C()}#C(){if(this.#W&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#E(){let Q=this.value;if(this.getAttribute("value")!==Q)this.#X=!0,this.setAttribute("value",Q),this.#X=!1;this.#k()}#k(){let Q=this.#U,Z=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",Z),this.style.setProperty("--is-not-default",Z?"0":"1")}#y(){this.position={...this.#U},this.#R(),this.#E(),this.#I(),this.#f()}focus(){this.cursor?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){let Z=Q==null?"":String(Q).trim();if(!Z)this.position={x:0.5,y:0.5};else{let $=Z.split(/[\s,]+/).filter(Boolean),J=(_)=>{if(!_)return 0.5;let X=_.includes("%"),Y=Number.parseFloat(_.replace(/%/g,"").trim());if(!Number.isFinite(Y))return 0.5;let K=X||Math.abs(Y)>1?Y/100:Y;return Math.max(0,Math.min(1,K))},j=J($[0]),q=J($[1]??$[0]);this.position={x:j,y:q}}if(this.#G)this.#R(),this.#k()}attributeChangedCallback(Q,Z,$){if(Q==="aspect-ratio"){b(this,"--aspect-ratio",$);return}if(Q==="value"){if(this.#X||this.isDragging)return;this.value=$}if(Q==="precision")this.precision=parseInt($);if(Q==="transform")this.transform=Number($);if(Q==="fields"&&$!==Z)this.#M(),this.#L(),this.#B(),this.#R();if(Q==="axis-labels"&&$!==Z)this.#M(),this.#L(),this.#B(),this.#R();if(Q==="coordinates")this.coordinates=$||"screen",this.#R()}}z("fig-joystick",U1);class H0 extends HTMLElement{get durationPropertyName(){return this.localName==="fig-skeleton"?"--fig-skeleton-duration":"--fig-shimmer-duration"}connectedCallback(){let Q=this.getAttribute("duration");if(Q)this.style.setProperty(this.durationPropertyName,Q);this.#Q()}static get observedAttributes(){return["duration","playing","aria-label","aria-labelledby"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,Z,$){if(Q==="duration")this.style.setProperty(this.durationPropertyName,$||"1.5s");if(Q==="playing"||Q==="aria-label"||Q==="aria-labelledby")this.#Q()}#Q(){let Q=this.playing;if(this.setAttribute("aria-busy",Q?"true":"false"),this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")){if(!this.hasAttribute("role"))this.setAttribute("role","status");this.removeAttribute("aria-hidden")}else this.removeAttribute("role"),this.setAttribute("aria-hidden","true")}}z("fig-shimmer",H0);class L1 extends H0{connectedCallback(){super.connectedCallback(),this.inert=!0,this.setAttribute("inert","")}}z("fig-skeleton",L1);class B1 extends HTMLElement{static observedAttributes=["name","collapsible","open"];#Q=null;#Z=null;connectedCallback(){this.#j()}disconnectedCallback(){if(this.#Z)this.#Z.removeEventListener("click",this.#$);if(this.#Q)this.#Q.removeEventListener("click",this.#$),this.#Q.removeEventListener("keydown",this.#J),this.#Q.querySelector("h3")?.removeEventListener("click",this.#$)}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="open"){this.#Q?.setAttribute("aria-expanded",String(this.open));return}this.#j()}get open(){let Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){let Z=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Q?.setAttribute("aria-expanded",String(!!Q)),Z!==!!Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!Q},bubbles:!0}))}#$=(Q)=>{Q.stopPropagation(),this.open=!this.open};#J=(Q)=>{if(Q.key!=="Enter"&&Q.key!==" ")return;Q.preventDefault(),Q.stopPropagation(),this.open=!this.open};#j(){let Q=this.hasAttribute("collapsible"),$=this.getAttribute("name")||(Q?"Group":null),J=this.querySelector(":scope > fig-header");if(!$&&!Q&&!J){if(this.#Q&&this.#Q.dataset.generated)this.#Q.remove(),this.#Q=null,this.#Z=null;return}if(J)this.#Q=J;else if(!this.#Q||!this.#Q.dataset.generated)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let j=this.#Q.querySelector("h3");if(!j)j=document.createElement("h3"),this.#Q.prepend(j);if(!j.id)j.id=h();if(this.#Q.dataset.generated)j.textContent=$;if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",j.id);if(Q){if(!j.querySelector(".fig-group-chevron")){let q=u("chevron",{size:"small",className:"fig-group-chevron"});j.prepend(q)}if(this.#Z=j.querySelector(".fig-group-chevron"),j.removeEventListener("click",this.#$),this.#Q.removeEventListener("click",this.#$),this.#Q.addEventListener("click",this.#$),this.#Q.setAttribute("role","button"),this.#Q.setAttribute("tabindex","0"),this.#Q.setAttribute("aria-expanded",String(this.open)),this.#Q.removeEventListener("keydown",this.#J),this.#Q.addEventListener("keydown",this.#J),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Q.setAttribute("aria-expanded","false")}else{if(j.removeEventListener("click",this.#$),this.#Q.removeEventListener("click",this.#$),this.#Q.removeAttribute("role"),this.#Q.removeAttribute("tabindex"),this.#Q.removeAttribute("aria-expanded"),this.#Q.removeEventListener("keydown",this.#J),this.#Z)this.#Z.remove(),this.#Z=null;this.removeAttribute("open")}}}z("fig-group",B1);class M1 extends HTMLElement{}z("fig-header",M1);class O1 extends HTMLElement{}z("fig-footer",O1);class F1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","status");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Loading")}}z("fig-spinner",F1);class z1 extends HTMLElement{static get observedAttributes(){return["fit"]}connectedCallback(){this.#Q()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="fit")this.#Q()}#Q(){let Q=this.getAttribute("fit");if(Q)this.style.setProperty("--fig-preview-fit",Q);else this.style.removeProperty("--fig-preview-fit")}}z("fig-preview",z1);class E extends HTMLElement{static#Q=new Set(["oklch","hsl"]);static#Z=10;static#$=10;static#J=8;static#j=3;static#q=210;static#Y={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#_=!1;#X=null;#U=null;#G={...E.#Y};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#G}}}set value(Q){if(Q==null||Q===""){this.removeAttribute("value");return}if(typeof Q==="string"){this.setAttribute("value",Q);return}this.setAttribute("value",JSON.stringify(Q))}connectedCallback(){this.#K(),this.#N(),this.#T(),this.#S()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q!=="value")return;if(this.#N(),this.#_)this.#S()}#K(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#N(){let Q=this.getAttribute("value");if(!Q){this.#G={...E.#Y,stops:E.#Y.stops.map((Z)=>({...Z}))};return}try{let Z=JSON.parse(Q),$=Z?.type==="gradient"&&Z.gradient?Z.gradient:Z?.gradient?Z.gradient:Z;if(!$||typeof $!=="object")return;this.#G=this.#W({...E.#Y,...$})}catch{}}#W(Q){let Z={...Q??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),J=String(Z.hueInterpolation??"shorter").toLowerCase(),j=Array.isArray(Z.stops)?Z.stops.map((q)=>({color:String(q?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:q?.position??0,opacity:q?.opacity??100})):E.#Y.stops.map((q)=>({...q}));if(j.length<2)return{...E.#Y,stops:E.#Y.stops.map((q)=>({...q}))};return{type:["linear","radial","angular"].includes(Z.type)?Z.type:"linear",angle:Number.isFinite(Number(Z.angle))?Number(Z.angle):135,interpolationSpace:$,hueInterpolation:J,stops:j}}#L(){return E.#Q.has(this.#G.interpolationSpace||"srgb")}#F(Q){let{r:Z,g:$,b:J}=o(Q);if(this.#G.interpolationSpace==="hsl")return M0(Z,$,J).h;let j=Q0(Z,$,J);return(B0(j.l,j.a,j.b).h%360+360)%360}#z(){let Q=this.#D(),Z=this.#F(Q[0]?.color||"#FF0000"),$=this.#F(Q[Q.length-1]?.color||"#4F9EFF"),J=E.#q-Z,q=((E.#q-$-J)%360+360)%360,_=q===0?0:q-360,X=this.#G.hueInterpolation||"shorter",Y;if(X==="increasing")Y=_;else if(X==="decreasing")Y=q;else if(X==="longer")Y=q<180?_:q;else Y=q<=180?q:_;let K=Math.sign(Y),G=Math.asin(E.#j/2/E.#J)*180/Math.PI,N=Math.min(G,Math.max(0,(Math.abs(Y)-0.01)/2));return{startDeg:J+K*N,sweepDeg:Y-K*N*2}}#B(Q){let Z=Q*Math.PI/180;return{x:E.#Z+E.#J*Math.cos(Z),y:E.#$+E.#J*Math.sin(Z)}}#M(Q,Z){let $=Q+Z,J=this.#B(Q),j=this.#B($),q=Math.abs(Z)>180?1:0,_=Z>=0?1:0;return`M ${J.x} ${J.y} A ${E.#J} ${E.#J} 0 ${q} ${_} ${j.x} ${j.y}`}#A(){let Q=this.#B(180),Z=this.#B(0);return`M ${Q.x} ${Q.y} L ${Z.x} ${Z.y}`}#P(Q){let Z=E.#j,$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${Q}" fill="none" stroke="white" stroke-width="${Z}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent($)}")`}#D(){return[...this.#G.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0))}#H(){let Q=this.#G.interpolationSpace||"srgb";if(Q==="srgb")return"";if(E.#Q.has(Q))return` in ${Q} ${this.#G.hueInterpolation||"shorter"} hue`;return` in ${Q}`}#O(){let Q=this.#D(),Z=this.#H();if(this.#L()){let J=(E.#q+90)%360,j=this.#G.interpolationSpace,q=(X)=>j==="oklch"?`oklch(65% 0.25 ${X})`:`hsl(${X} 100% 50%)`,_=[0,300,240,180,120,60,0].map(q).join(", ");return`conic-gradient(from ${J}deg in ${j} decreasing hue, ${_})`}let $=Q.map((J)=>`${J.color} ${J.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#T(){if(this.#_)return;let Q=E.#j;this.innerHTML=`
+        `}#B(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane?.addEventListener("pointerdown",this.#Q),this.cursor?.addEventListener("pointerdown",this.#Z),this.cursor?.addEventListener("input",this.#$),this.cursor?.addEventListener("change",this.#J);let Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#y());if(this.#W&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#j),this.xInput.addEventListener("change",this.#j),this.xInput.addEventListener("focusout",this.#Y),this.yInput.addEventListener("input",this.#q),this.yInput.addEventListener("change",this.#q),this.yInput.addEventListener("focusout",this.#_)}#M(){if(this.plane?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("pointerdown",this.#Z),this.cursor?.removeEventListener("input",this.#$),this.cursor?.removeEventListener("change",this.#J),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#W&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#j),this.xInput.removeEventListener("change",this.#j),this.xInput.removeEventListener("focusout",this.#Y),this.yInput.removeEventListener("input",this.#q),this.yInput.removeEventListener("change",this.#q),this.yInput.removeEventListener("focusout",this.#_)}#A(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.x=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#E(),this.#I()}#P(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.y=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#E(),this.#I()}#D(){this.#E(),this.#f()}#H(Q,Z,{syncHandle:$=!0}={}){let J=Math.max(0,Math.min(1,Q)),j=Math.max(0,Math.min(1,Z)),q=this.coordinates==="math"?1-j:j;if(this.position={x:J,y:q},$)this.#R();this.#C(),this.#E()}#O(Q){if(!this.plane||!this.cursor)return;if(Q.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;let Z=this.plane.getBoundingClientRect(),$=Z.width>0?(Q.clientX-Z.left)/Z.width:0.5,J=Z.height>0?(Q.clientY-Z.top)/Z.height:0.5;this.cursor.value=`${Math.round($*100)}% ${Math.round(J*100)}%`,this.#H($,J,{syncHandle:!1}),this.#I(),this.#f()}#T(Q){let Z=Q.detail??{};if(typeof Z.px!=="number"||typeof Z.py!=="number")return;this.#H(Z.px,Z.py,{syncHandle:!1}),this.#I()}#S(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#E(),this.#f()}#I(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#f(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#R(){let Q=this.#N(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${Q*100}%`;this.#C()}#C(){if(this.#W&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#E(){let Q=this.value;if(this.getAttribute("value")!==Q)this.#X=!0,this.setAttribute("value",Q),this.#X=!1;this.#k()}#k(){let Q=this.#U,Z=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",Z),this.style.setProperty("--is-not-default",Z?"0":"1")}#y(){this.position={...this.#U},this.#R(),this.#E(),this.#I(),this.#f()}focus(){this.cursor?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){let Z=Q==null?"":String(Q).trim();if(!Z)this.position={x:0.5,y:0.5};else{let $=Z.split(/[\s,]+/).filter(Boolean),J=(_)=>{if(!_)return 0.5;let X=_.includes("%"),Y=Number.parseFloat(_.replace(/%/g,"").trim());if(!Number.isFinite(Y))return 0.5;let K=X||Math.abs(Y)>1?Y/100:Y;return Math.max(0,Math.min(1,K))},j=J($[0]),q=J($[1]??$[0]);this.position={x:j,y:q}}if(this.#G)this.#R(),this.#k()}attributeChangedCallback(Q,Z,$){if(Q==="aspect-ratio"){b(this,"--aspect-ratio",$);return}if(Q==="value"){if(this.#X||this.isDragging)return;this.value=$}if(Q==="precision")this.precision=parseInt($);if(Q==="transform")this.transform=Number($);if(Q==="fields"&&$!==Z)this.#M(),this.#L(),this.#B(),this.#R();if(Q==="axis-labels"&&$!==Z)this.#M(),this.#L(),this.#B(),this.#R();if(Q==="coordinates")this.coordinates=$||"screen",this.#R()}}z("fig-joystick",U1);class H0 extends HTMLElement{get durationPropertyName(){return this.localName==="fig-skeleton"?"--fig-skeleton-duration":"--fig-shimmer-duration"}connectedCallback(){let Q=this.getAttribute("duration");if(Q)this.style.setProperty(this.durationPropertyName,Q);this.#Q()}static get observedAttributes(){return["duration","playing","aria-label","aria-labelledby"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,Z,$){if(Q==="duration")this.style.setProperty(this.durationPropertyName,$||"1.5s");if(Q==="playing"||Q==="aria-label"||Q==="aria-labelledby")this.#Q()}#Q(){let Q=this.playing;if(this.setAttribute("aria-busy",Q?"true":"false"),this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")){if(!this.hasAttribute("role"))this.setAttribute("role","status");this.removeAttribute("aria-hidden")}else this.removeAttribute("role"),this.setAttribute("aria-hidden","true")}}z("fig-shimmer",H0);class L1 extends H0{connectedCallback(){super.connectedCallback(),this.inert=!0,this.setAttribute("inert","")}}z("fig-skeleton",L1);class B1 extends HTMLElement{static observedAttributes=["name","collapsible","open"];#Q=null;#Z=null;connectedCallback(){this.#j()}disconnectedCallback(){if(this.#Z)this.#Z.removeEventListener("click",this.#$);if(this.#Q)this.#Q.removeEventListener("click",this.#$),this.#Q.removeEventListener("keydown",this.#J),this.#Q.querySelector("h3")?.removeEventListener("click",this.#$)}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="open"){this.#Q?.setAttribute("aria-expanded",String(this.open));return}this.#j()}get open(){let Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){let Z=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Q?.setAttribute("aria-expanded",String(!!Q)),Z!==!!Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!Q},bubbles:!0}))}#$=(Q)=>{Q.stopPropagation(),this.open=!this.open};#J=(Q)=>{if(Q.key!=="Enter"&&Q.key!==" ")return;Q.preventDefault(),Q.stopPropagation(),this.open=!this.open};#j(){let Q=this.hasAttribute("collapsible"),$=this.getAttribute("name")||(Q?"Group":null),J=this.querySelector(":scope > fig-header");if(!$&&!Q&&!J){if(this.#Q&&this.#Q.dataset.generated)this.#Q.remove(),this.#Q=null,this.#Z=null;return}if(J)this.#Q=J;else if(!this.#Q||!this.#Q.dataset.generated)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let j=this.#Q.querySelector("h3");if(!j)j=document.createElement("h3"),this.#Q.prepend(j);if(!j.id)j.id=h();if(this.#Q.dataset.generated)j.textContent=$;if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",j.id);if(Q){if(!j.querySelector(".fig-group-chevron")){let q=u("chevron",{size:"small",className:"fig-group-chevron"});j.prepend(q)}if(this.#Z=j.querySelector(".fig-group-chevron"),j.removeEventListener("click",this.#$),this.#Q.removeEventListener("click",this.#$),this.#Q.addEventListener("click",this.#$),this.#Q.setAttribute("role","button"),this.#Q.setAttribute("tabindex","0"),this.#Q.setAttribute("aria-expanded",String(this.open)),this.#Q.removeEventListener("keydown",this.#J),this.#Q.addEventListener("keydown",this.#J),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Q.setAttribute("aria-expanded","false")}else{if(j.removeEventListener("click",this.#$),this.#Q.removeEventListener("click",this.#$),this.#Q.removeAttribute("role"),this.#Q.removeAttribute("tabindex"),this.#Q.removeAttribute("aria-expanded"),this.#Q.removeEventListener("keydown",this.#J),this.#Z)this.#Z.remove(),this.#Z=null;this.removeAttribute("open")}}}z("fig-group",B1);class M1 extends HTMLElement{}z("fig-header",M1);class O1 extends HTMLElement{}z("fig-footer",O1);class F1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","status");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Loading")}}z("fig-spinner",F1);class z1 extends HTMLElement{static get observedAttributes(){return["fit","aspect-ratio"]}connectedCallback(){this.#Q(),this.#Z()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="fit")this.#Q();if(Q==="aspect-ratio")this.#Z()}#Q(){let Q=this.getAttribute("fit");if(Q)this.style.setProperty("--fig-preview-fit",Q);else this.style.removeProperty("--fig-preview-fit")}#Z(){let Q=this.getAttribute("aspect-ratio");if(Q)this.style.setProperty("--fig-preview-aspect-ratio",Q);else this.style.removeProperty("--fig-preview-aspect-ratio")}}z("fig-preview",z1);class E extends HTMLElement{static#Q=new Set(["oklch","hsl"]);static#Z=10;static#$=10;static#J=8;static#j=3;static#q=210;static#Y={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#_=!1;#X=null;#U=null;#G={...E.#Y};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#G}}}set value(Q){if(Q==null||Q===""){this.removeAttribute("value");return}if(typeof Q==="string"){this.setAttribute("value",Q);return}this.setAttribute("value",JSON.stringify(Q))}connectedCallback(){this.#K(),this.#N(),this.#T(),this.#S()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q!=="value")return;if(this.#N(),this.#_)this.#S()}#K(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#N(){let Q=this.getAttribute("value");if(!Q){this.#G={...E.#Y,stops:E.#Y.stops.map((Z)=>({...Z}))};return}try{let Z=JSON.parse(Q),$=Z?.type==="gradient"&&Z.gradient?Z.gradient:Z?.gradient?Z.gradient:Z;if(!$||typeof $!=="object")return;this.#G=this.#W({...E.#Y,...$})}catch{}}#W(Q){let Z={...Q??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),J=String(Z.hueInterpolation??"shorter").toLowerCase(),j=Array.isArray(Z.stops)?Z.stops.map((q)=>({color:String(q?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:q?.position??0,opacity:q?.opacity??100})):E.#Y.stops.map((q)=>({...q}));if(j.length<2)return{...E.#Y,stops:E.#Y.stops.map((q)=>({...q}))};return{type:["linear","radial","angular"].includes(Z.type)?Z.type:"linear",angle:Number.isFinite(Number(Z.angle))?Number(Z.angle):135,interpolationSpace:$,hueInterpolation:J,stops:j}}#L(){return E.#Q.has(this.#G.interpolationSpace||"srgb")}#F(Q){let{r:Z,g:$,b:J}=o(Q);if(this.#G.interpolationSpace==="hsl")return M0(Z,$,J).h;let j=Q0(Z,$,J);return(B0(j.l,j.a,j.b).h%360+360)%360}#z(){let Q=this.#D(),Z=this.#F(Q[0]?.color||"#FF0000"),$=this.#F(Q[Q.length-1]?.color||"#4F9EFF"),J=E.#q-Z,q=((E.#q-$-J)%360+360)%360,_=q===0?0:q-360,X=this.#G.hueInterpolation||"shorter",Y;if(X==="increasing")Y=_;else if(X==="decreasing")Y=q;else if(X==="longer")Y=q<180?_:q;else Y=q<=180?q:_;let K=Math.sign(Y),G=Math.asin(E.#j/2/E.#J)*180/Math.PI,N=Math.min(G,Math.max(0,(Math.abs(Y)-0.01)/2));return{startDeg:J+K*N,sweepDeg:Y-K*N*2}}#B(Q){let Z=Q*Math.PI/180;return{x:E.#Z+E.#J*Math.cos(Z),y:E.#$+E.#J*Math.sin(Z)}}#M(Q,Z){let $=Q+Z,J=this.#B(Q),j=this.#B($),q=Math.abs(Z)>180?1:0,_=Z>=0?1:0;return`M ${J.x} ${J.y} A ${E.#J} ${E.#J} 0 ${q} ${_} ${j.x} ${j.y}`}#A(){let Q=this.#B(180),Z=this.#B(0);return`M ${Q.x} ${Q.y} L ${Z.x} ${Z.y}`}#P(Q){let Z=E.#j,$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${Q}" fill="none" stroke="white" stroke-width="${Z}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent($)}")`}#D(){return[...this.#G.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0))}#H(){let Q=this.#G.interpolationSpace||"srgb";if(Q==="srgb")return"";if(E.#Q.has(Q))return` in ${Q} ${this.#G.hueInterpolation||"shorter"} hue`;return` in ${Q}`}#O(){let Q=this.#D(),Z=this.#H();if(this.#L()){let J=(E.#q+90)%360,j=this.#G.interpolationSpace,q=(X)=>j==="oklch"?`oklch(65% 0.25 ${X})`:`hsl(${X} 100% 50%)`,_=[0,300,240,180,120,60,0].map(q).join(", ");return`conic-gradient(from ${J}deg in ${j} decreasing hue, ${_})`}let $=Q.map((J)=>`${J.color} ${J.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#T(){if(this.#_)return;let Q=E.#j;this.innerHTML=`
       <svg class="fig-interpolation-swatch-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
         <circle class="fig-interpolation-swatch-rim" cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="${Q}"/>
       </svg>

package/fig.js

@@ -17089,19 +17089,22 @@ figDefineElement("fig-spinner", FigSpinner);
  * A styled visual preview layer for arbitrary content such as images, canvas,
  * video, SVG, or custom rendered surfaces.
  * @attr {string} fit - CSS object-fit value for direct media children
+ * @attr {string} aspect-ratio - CSS aspect-ratio value
  */
 class FigPreview extends HTMLElement {
   static get observedAttributes() {
-    return ["fit"];
+    return ["fit", "aspect-ratio"];
   }
 
   connectedCallback() {
     this.#syncFit();
+    this.#syncAspectRatio();
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
     if (name === "fit") this.#syncFit();
+    if (name === "aspect-ratio") this.#syncAspectRatio();
   }
 
   #syncFit() {
@@ -17112,6 +17115,15 @@ class FigPreview extends HTMLElement {
       this.style.removeProperty("--fig-preview-fit");
     }
   }
+
+  #syncAspectRatio() {
+    const aspectRatio = this.getAttribute("aspect-ratio");
+    if (aspectRatio) {
+      this.style.setProperty("--fig-preview-aspect-ratio", aspectRatio);
+    } else {
+      this.style.removeProperty("--fig-preview-aspect-ratio");
+    }
+  }
 }
 figDefineElement("fig-preview", FigPreview);
 

package/package.json

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