@rogieking/figui3 8.0.2 → 8.0.3

package/dist/fig.js

@@ -173,7 +173,7 @@ var wq=(q,Q)=>()=>(q&&(Q=q(q=0)),Q);var yq={};var D0=wq(()=>{/*! Vendored from @
               units="%"
               ${q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`:""}`;break}Z.insertAdjacentHTML("beforeend",W),this.#Z=this.querySelector(".fig-input-fill-opacity"),this.#$=this.querySelector(".fig-input-fill-hex");let N=this.querySelector(".fig-input-fill-label");if(this.#z(),N&&this.#q)N.addEventListener("click",()=>{let K=this.#q.querySelector("fig-swatch");if(K)K.click()});if(this.#$)this.#$.addEventListener("input",(K)=>{K.stopPropagation();let G="#"+K.target.value.replace("#","");this.#J.color=G,this.#k(),this.#A()}),this.#$.addEventListener("change",(K)=>{K.stopPropagation(),this.#O()});if(this.#Z)this.#Z.addEventListener("input",(K)=>{K.stopPropagation();let G=parseFloat(K.target.value),X=(isNaN(G)?100:G)/100;switch(this.#Q){case"solid":this.#J.alpha=X;break;case"gradient":this.#j.opacity=X;break;case"image":this.#N.opacity=X;break;case"video":this.#_.opacity=X;break;case"webcam":this.#W.opacity=X;break}this.#k(),this.#T(X),this.#A()}),this.#Z.addEventListener("change",(K)=>{K.stopPropagation(),this.#O()})}#k(){if(this.#q)this.#q.setAttribute("value",JSON.stringify(this.value))}#T(q){if(this.#q){let Q=this.#q.querySelector("fig-swatch");if(Q)Q.setAttribute("alpha",q)}}#A(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#O(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#J.color,alpha:this.#J.alpha,opacity:Math.round(this.#J.alpha*100)};case"gradient":return{type:"gradient",gradient:t0(this.#j)};case"image":return{type:"image",image:{...this.#N}};case"video":return{type:"video",video:{...this.#_}};case"webcam":return{type:"webcam",webcam:{...this.#W}};default:return{type:this.#Q}}}set value(q){if(typeof q==="string")this.setAttribute("value",q);else this.setAttribute("value",JSON.stringify(q))}attributeChangedCallback(q,Q,Z){if(Q===Z)return;switch(q){case"value":let $=this.#Q;if(this.#X(),this.#q)if(this.#Q!==$)this.#M();else this.#k(),this.#B();break;case"disabled":this.#R();break;case"mode":if(this.#q)if(Z)this.#q.setAttribute(q,Z);else this.#q.removeAttribute(q);break;case"alpha":if(this.isConnected)this.#M();break;case"aria-label":case"aria-describedby":case"aria-invalid":case"aria-required":this.#z();break}}}O("fig-input-fill",n0);class e0 extends HTMLElement{#Q=[];#q=[];#Z=[];#$=null;#J=this.#X.bind(this);#j=()=>this.focus();static get observedAttributes(){return["value","disabled","min","max","open","fixed"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(q){let Q=this.open;if(q)this.setAttribute("open","");else this.removeAttribute("open");if(Q!==!!q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!q},bubbles:!0}))}get#N(){return this.hasAttribute("fixed")&&this.getAttribute("fixed")!=="false"}get#_(){let q=parseInt(this.getAttribute("min"));return isNaN(q)?2:q}get#W(){let q=parseInt(this.getAttribute("max"));return isNaN(q)?8:q}connectedCallback(){if(this.setAttribute("tabindex","-1"),this.removeEventListener("focus",this.#j),this.addEventListener("focus",this.#j),this.removeEventListener("keydown",this.#J),this.addEventListener("keydown",this.#J),this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{if(this.#$=null,!this.isConnected)return;this.#G(),this.#K()})}disconnectedCallback(){if(this.#$)cancelAnimationFrame(this.#$),this.#$=null;this.removeEventListener("keydown",this.#J),this.removeEventListener("focus",this.#j),this.#q=[],this.#Z=[]}#X(q){if(q.key!=="Enter"&&q.key!==" ")return;if(q.target!==this.querySelector(".palette-colors-inline"))return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;q.preventDefault(),q.stopPropagation(),this.open=!0,this.querySelector(".palette-colors-inline")?.setAttribute("aria-expanded","true")}attributeChangedCallback(q,Q,Z){if(Q===Z)return;switch(q){case"value":this.#G(),this.#B();break;case"disabled":this.#H();break;case"min":case"max":case"fixed":this.#K();break;case"open":this.#k();break}}#G(){let q=this.getAttribute("value");if(!q){this.#Q=[];return}let Q=q.trim();try{let Z=JSON.parse(Q);if(Array.isArray(Z)){this.#Q=Z.map(($)=>{if(typeof $==="string")return{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1};if($&&typeof $==="object")return{color:$.color||"#D9D9D9",alpha:$.alpha!==void 0?$.alpha:$.opacity!==void 0?$.opacity/100:1};return{color:"#D9D9D9",alpha:1}});return}}catch(Z){}if(Q.includes(",")){this.#Q=Q.split(",").map((Z)=>{let $=Z.trim();return{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1}});return}if(Q.startsWith("#")){this.#Q=[{color:Q.slice(0,7),alpha:Q.length>7?parseInt(Q.slice(7,9),16)/255:1}];return}this.#Q=[]}get value(){return this.#Q.map((q)=>({...q}))}set value(q){if(typeof q==="string")this.setAttribute("value",q);else this.setAttribute("value",JSON.stringify(q))}#K(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.innerHTML="",this.#q=[],this.#Z=[];let Q=document.createElement("div");Q.className="palette-colors-inline",Q.setAttribute("role","button"),Q.setAttribute("tabindex",q?"-1":"+0"),Q.setAttribute("aria-expanded",String(this.open)),Q.setAttribute("aria-label","Edit palette colors"),Q.addEventListener("blur",()=>{Q.style.removeProperty("outline"),Q.style.removeProperty("outline-offset")});let Z=()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.open=!0,Q.setAttribute("aria-expanded","true")};Q.addEventListener("click",Z);let $=document.createElement("div");if($.className="palette-colors",this.#Q.forEach((j,_)=>{$.appendChild(this.#U(j,_,q,{inline:!0}))}),Q.appendChild($),this.appendChild(Q),this.#k(),!this.#N)this.#z(q,this);let J=document.createElement("div");J.className="palette-colors-expanded",this.#Q.forEach((j,_)=>{if(J.appendChild(this.#U(j,_,q)),!this.#N)J.appendChild(this.#Y(_,q))}),this.appendChild(J)}#U(q,Q,Z,{inline:$=!1}={}){let J=q.alpha<1?q.color+Math.round(q.alpha*255).toString(16).padStart(2,"0"):q.color,j=document.createElement("fig-input-color");if(j.setAttribute("value",J),$)j.setAttribute("text","false"),j.setAttribute("alpha","true"),j.setAttribute("swatch-disabled","");else j.setAttribute("text","true"),j.setAttribute("alpha","true"),j.setAttribute("full","");if(Z)j.setAttribute("disabled","");let _=$?this.#Z:this.#q,W=(N)=>{N.stopPropagation();let K=N.currentTarget;this.#Q[Q]={color:K.hexOpaque||this.#Q[Q].color,alpha:K.rgba?K.rgba.a:this.#Q[Q].alpha};let G=_[Q];if(G){let U=this.#Q[Q],X=U.alpha<1?U.color+Math.round(U.alpha*255).toString(16).padStart(2,"0"):U.color;G.setAttribute("value",X)}};if(j.addEventListener("input",(N)=>{W(N),this.#A()}),j.addEventListener("change",(N)=>{W(N),this.#O()}),$)this.#q.push(j);else this.#Z.push(j);return j}#Y(q,Q){let Z=document.createElement("fig-button");if(Z.setAttribute("variant","ghost"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Remove color"),Z.className="palette-remove-btn",Q||this.#Q.length<=this.#_)Z.setAttribute("disabled","");Z.appendChild(c("minus")),Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.#R(q)});let $=document.createElement("fig-tooltip");return $.setAttribute("text","Remove color"),$.appendChild(Z),$}#R(q){if(this.#N)return;if(q<0||q>=this.#Q.length)return;if(this.#Q.length<=this.#_)return;this.#Q.splice(q,1),this.#q=[],this.#Z=[],this.#K(),this.#O()}#z(q,Q=this){let Z=this.#Q.length>=this.#W,$=document.createElement("fig-button");if($.setAttribute("variant","ghost"),$.setAttribute("icon","true"),$.setAttribute("aria-label","Add color"),$.className="palette-add-btn",q||Z)$.setAttribute("disabled","");$.appendChild(c("add")),$.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#Q.length>=this.#W)return;this.open=!0,this.#M({color:"#D9D9D9",alpha:1})});let J=document.createElement("fig-tooltip");J.setAttribute("text","Add color"),J.appendChild($),Q.appendChild(J)}#M(q){if(this.#N)return;this.#Q.push(q);let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Z=this.#Q.length-1,$=this.#U(q,Z,Q,{inline:!0}),J=this.querySelector(".palette-colors");if(J)J.appendChild($);let j=this.#U(q,Z,Q),_=this.querySelector(".palette-colors-expanded");if(_)_.appendChild(j),_.appendChild(this.#Y(Z,Q));if(this.#Q.length>=this.#W){let W=this.querySelector(".palette-add-btn");if(W)W.setAttribute("disabled","")}this.#T(Q),this.#O()}#L(q){let Q=this.#Q[q];if(!Q)return;let Z=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,$=this.#q[q];if($)$.setAttribute("value",Z);let J=this.#Z[q];if(J)J.setAttribute("value",Z)}#B(){if(this.#q.length!==this.#Q.length){this.#K();return}this.#Q.forEach((q,Q)=>{this.#L(Q)})}#H(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#q,...this.#Z].forEach((Z)=>{if(q)Z.setAttribute("disabled","");else Z.removeAttribute("disabled")});let Q=this.querySelector(".palette-add-btn");if(Q)if(q||this.#Q.length>=this.#W)Q.setAttribute("disabled","");else Q.removeAttribute("disabled");this.#T(q),this.#k()}#k(){let q=this.querySelector(".palette-colors-inline");if(!q)return;let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";q.setAttribute("tabindex",Q?"-1":"+0"),q.setAttribute("aria-disabled",String(Q)),q.setAttribute("aria-expanded",String(this.open))}focus(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let q=this.querySelector(".palette-colors-inline");if(!q)return;q.style.outline="var(--figma-focus-outline)",q.style.outlineOffset="var(--figma-focus-outline-offset)",q.focus()}#T(q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){let Q=q||this.#Q.length<=this.#_;this.querySelectorAll(".palette-remove-btn").forEach((Z)=>{if(Q)Z.setAttribute("disabled","");else Z.removeAttribute("disabled")})}#A(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#O(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}O("fig-input-palette",e0);class e extends HTMLElement{static SHIFT_SNAP=5;#Q;#q;#Z=!1;#$=null;#J=null;#j=null;#N=null;#_={type:"linear",angle:90,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled","edit","mode","size"]}get#W(){let q=this.getAttribute("edit");if(q==="false")return"false";if(q==="picker")return"picker";return"true"}get#X(){return this.#W==="true"}get#G(){return this.getAttribute("mode")==="tip"?"tip":"handle"}#K(){if(!this.#q)return null;return this.#q.querySelector("fig-handle:not(.fig-input-gradient-ghost):not([disabled])")}#U(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){this.setAttribute("tabindex","-1");return}this.setAttribute("tabindex",this.#X?"-1":"0")}#Y(q){let Q=Z0(q);return{...Q,type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):90,centerX:Number.isFinite(Number(Q.centerX))?Number(Q.centerX):50,centerY:Number.isFinite(Number(Q.centerY))?Number(Q.centerY):50}}connectedCallback(){if(this.#L(),this.#D(),this.#R(),this.removeEventListener("keydown",this.#M),this.addEventListener("keydown",this.#M),this.#X)document.addEventListener("keydown",this.#z)}#R(){if(this.#W!=="picker"||o())return;this.#N??=customElements.whenDefined("fig-fill-picker").then(()=>{if(!this.isConnected||this.#W!=="picker")return;this.#D()})}disconnectedCallback(){if(document.removeEventListener("keydown",this.#z),this.removeEventListener("keydown",this.#M),this.#J)this.#J.disconnect(),this.#J=null;if(this.#j!==null)cancelAnimationFrame(this.#j),this.#j=null;clearTimeout(this.#$),this.removeEventListener("pointerenter",this.#S),this.removeEventListener("pointermove",this.#y),this.removeEventListener("pointerleave",this.#w),this.removeEventListener("click",this.#E),this.removeEventListener("dblclick",this.#b)}#z=(q)=>{let Q=document.activeElement;if(!(Q instanceof Node)||!this.contains(Q))return;let Z=Q&&(Q.tagName==="INPUT"||Q.tagName==="TEXTAREA"||Q.isContentEditable);if(!this.#q)return;if(q.key==="Tab"&&!Z){let j=this.#q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!j)return;q.preventDefault();let _=[...this.#q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],W=_.indexOf(j),N=q.shiftKey?(W-1+_.length)%_.length:(W+1)%_.length;j.deselect(),_[N].select();return}if((q.key==="ArrowLeft"||q.key==="ArrowRight")&&!Z){let j=this.#q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!j)return;let _=parseInt(j.dataset.stopIndex,10);if(isNaN(_)||!this.#_.stops[_])return;q.preventDefault();let W=(q.key==="ArrowRight"?1:-1)*(q.shiftKey?e.SHIFT_SNAP:1),N=this.#_.stops[_];N.position=Math.max(0,Math.min(100,N.position+W)),j.setAttribute("value",`${N.position}% 50%`);let K=j.closest("fig-tooltip");if(K)K.text=`${Math.round(N.position)}%`,K.setAttribute("show","true"),K.showPopup(),j.hideColorTip(),clearTimeout(this.#$),this.#$=setTimeout(()=>{K.removeAttribute("show"),j.showColorTip()},600);this.#u(),this.#c(),this.#i();return}if(q.key!=="Delete"&&q.key!=="Backspace")return;if(Z)return;if(this.#_.stops.length<=2)return;let $=this.#q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!$)return;let J=parseInt($.dataset.stopIndex,10);if(isNaN(J)||!this.#_.stops[J])return;q.preventDefault(),$.removeAttribute("selected"),this.#_.stops.splice(J,1),this.#v(),this.#u(),this.#c(),this.#i()};#M=(q)=>{if(this.#W!=="picker")return;if(q.key!=="Enter"&&q.key!==" ")return;if(q.altKey||q.ctrlKey||q.metaKey)return;if(T(this,"disabled"))return;let Q=this.querySelector("fig-fill-picker");if(!Q||typeof Q.open!=="function")return;q.preventDefault(),Q.open()};#L(){let q=this.getAttribute("value");if(!q)return;try{let Q=JSON.parse(q);if(Q?.type==="gradient"&&Q.gradient){this.#_=this.#Y({...this.#_,...Q.gradient});return}if(Q?.gradient)this.#_=this.#Y({...this.#_,...Q.gradient})}catch(Q){}}#B(){let q=this.#Y(this.#_),Z=[...q.stops].sort((j,_)=>j.position-_.position).map((j)=>{let _=(j.opacity??100)/100;if(_>=1)return`${j.color} ${j.position}%`;let{r:W,g:N,b:K}=i(j.color);return`rgba(${W}, ${N}, ${K}, ${_}) ${j.position}%`}).join(", "),$=a0(q),J=$?` ${$}`:"";if(this.#W==="true")return`linear-gradient(to right${J}, ${Z})`;if(q.type==="radial")return`radial-gradient(circle at ${q.centerX}% ${q.centerY}%${J}, ${Z})`;if(q.type==="angular")return`conic-gradient(from ${q.angle}deg${J}, ${Z})`;return`linear-gradient(${q.angle}deg${J}, ${Z})`}#H(q){let Q=(q.opacity??100)/100;if(Q>=1)return q.color;let{r:Z,g:$,b:J}=i(q.color);return`rgba(${Z}, ${$}, ${J}, ${Q})`}#k(){let q=this.getAttribute("size");return q?` size="${q}"`:""}#T(){if(!this.#Q)return;let q=this.getAttribute("size");if(q)this.#Q.setAttribute("size",q);else this.#Q.removeAttribute("size")}#A(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=this.#G==="tip"?' tip="color"':"";return this.#_.stops.map((Z,$)=>`<fig-tooltip action="manual" text="${Math.round(Z.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color"${Q} color="${this.#H(Z)}" value="${Z.position}% 50%" hit-area="4" data-stop-index="${$}"${q?" disabled":""}></fig-handle></fig-tooltip>`).join("")}#O=null;#f=!1;#D(){this.#J?.disconnect(),this.#J=null;let q=T(this,"disabled"),Q=this.#W;if(Q==="picker"&&o()){let Z=JSON.stringify(this.value);this.innerHTML=`
+          </fig-tooltip>`:""}`;break}Z.insertAdjacentHTML("beforeend",W),this.#Z=this.querySelector(".fig-input-fill-opacity"),this.#$=this.querySelector(".fig-input-fill-hex");let N=this.querySelector(".fig-input-fill-label");if(this.#z(),N&&this.#q)N.addEventListener("click",()=>{let K=this.#q.querySelector("fig-swatch");if(K)K.click()});if(this.#$)this.#$.addEventListener("input",(K)=>{K.stopPropagation();let G="#"+K.target.value.replace("#","");this.#J.color=G,this.#k(),this.#A()}),this.#$.addEventListener("change",(K)=>{K.stopPropagation(),this.#O()});if(this.#Z)this.#Z.addEventListener("input",(K)=>{K.stopPropagation();let G=parseFloat(K.target.value),X=(isNaN(G)?100:G)/100;switch(this.#Q){case"solid":this.#J.alpha=X;break;case"gradient":this.#j.opacity=X;break;case"image":this.#N.opacity=X;break;case"video":this.#_.opacity=X;break;case"webcam":this.#W.opacity=X;break}this.#k(),this.#T(X),this.#A()}),this.#Z.addEventListener("change",(K)=>{K.stopPropagation(),this.#O()})}#k(){if(this.#q)this.#q.setAttribute("value",JSON.stringify(this.value))}#T(q){if(this.#q){let Q=this.#q.querySelector("fig-swatch");if(Q)Q.setAttribute("alpha",q)}}#A(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#O(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#J.color,alpha:this.#J.alpha,opacity:Math.round(this.#J.alpha*100)};case"gradient":return{type:"gradient",gradient:t0(this.#j)};case"image":return{type:"image",image:{...this.#N}};case"video":return{type:"video",video:{...this.#_}};case"webcam":return{type:"webcam",webcam:{...this.#W}};default:return{type:this.#Q}}}set value(q){if(typeof q==="string")this.setAttribute("value",q);else this.setAttribute("value",JSON.stringify(q))}attributeChangedCallback(q,Q,Z){if(Q===Z)return;switch(q){case"value":let $=this.#Q;if(this.#X(),this.#q)if(this.#Q!==$)this.#M();else this.#k(),this.#B();break;case"disabled":this.#R();break;case"mode":if(this.#q)if(Z)this.#q.setAttribute(q,Z);else this.#q.removeAttribute(q);break;case"alpha":if(this.isConnected)this.#M();break;case"aria-label":case"aria-describedby":case"aria-invalid":case"aria-required":this.#z();break}}}O("fig-input-fill",n0);class e0 extends HTMLElement{#Q=[];#q=[];#Z=[];#$=null;#J=this.#X.bind(this);#j=()=>this.focus();static get observedAttributes(){return["value","disabled","min","max","open","fixed"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(q){let Q=this.open;if(q)this.setAttribute("open","");else this.removeAttribute("open");if(Q!==!!q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!q},bubbles:!0}))}get#N(){return this.hasAttribute("fixed")&&this.getAttribute("fixed")!=="false"}get#_(){let q=parseInt(this.getAttribute("min"));return isNaN(q)?2:q}get#W(){let q=parseInt(this.getAttribute("max"));return isNaN(q)?8:q}connectedCallback(){if(this.setAttribute("tabindex","-1"),this.removeEventListener("focus",this.#j),this.addEventListener("focus",this.#j),this.removeEventListener("keydown",this.#J),this.addEventListener("keydown",this.#J),this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{if(this.#$=null,!this.isConnected)return;this.#G(),this.#K()})}disconnectedCallback(){if(this.#$)cancelAnimationFrame(this.#$),this.#$=null;this.removeEventListener("keydown",this.#J),this.removeEventListener("focus",this.#j),this.#q=[],this.#Z=[]}#X(q){if(q.key!=="Enter"&&q.key!==" ")return;if(q.target!==this.querySelector(".palette-colors-inline"))return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;q.preventDefault(),q.stopPropagation(),this.open=!0,this.querySelector(".palette-colors-inline")?.setAttribute("aria-expanded","true")}attributeChangedCallback(q,Q,Z){if(Q===Z)return;switch(q){case"value":this.#G(),this.#B();break;case"disabled":this.#H();break;case"min":case"max":case"fixed":this.#K();break;case"open":this.#k();break}}#G(){let q=this.getAttribute("value");if(!q){this.#Q=[];return}let Q=q.trim();try{let Z=JSON.parse(Q);if(Array.isArray(Z)){this.#Q=Z.map(($)=>{if(typeof $==="string")return{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1};if($&&typeof $==="object")return{color:$.color||"#D9D9D9",alpha:$.alpha!==void 0?$.alpha:$.opacity!==void 0?$.opacity/100:1};return{color:"#D9D9D9",alpha:1}});return}}catch(Z){}if(Q.includes(",")){this.#Q=Q.split(",").map((Z)=>{let $=Z.trim();return{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1}});return}if(Q.startsWith("#")){this.#Q=[{color:Q.slice(0,7),alpha:Q.length>7?parseInt(Q.slice(7,9),16)/255:1}];return}this.#Q=[]}get value(){return this.#Q.map((q)=>({...q}))}set value(q){if(typeof q==="string")this.setAttribute("value",q);else this.setAttribute("value",JSON.stringify(q))}#K(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.innerHTML="",this.#q=[],this.#Z=[];let Q=document.createElement("div");Q.className="palette-colors-inline",Q.setAttribute("role","button"),Q.setAttribute("tabindex",q?"-1":"+0"),Q.setAttribute("aria-expanded",String(this.open)),Q.setAttribute("aria-label","Edit palette colors"),Q.addEventListener("blur",()=>{Q.style.removeProperty("outline"),Q.style.removeProperty("outline-offset")});let Z=()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.open=!0,Q.setAttribute("aria-expanded","true")};Q.addEventListener("click",Z);let $=document.createElement("div");if($.className="palette-colors",this.#Q.forEach((j,_)=>{$.appendChild(this.#U(j,_,q,{inline:!0}))}),Q.appendChild($),this.appendChild(Q),this.#k(),!this.#N)this.#z(q,this);let J=document.createElement("div");J.className="palette-colors-expanded",this.#Q.forEach((j,_)=>{if(J.appendChild(this.#U(j,_,q)),!this.#N)J.appendChild(this.#Y(_,q))}),this.appendChild(J)}#U(q,Q,Z,{inline:$=!1}={}){let J=q.alpha<1?q.color+Math.round(q.alpha*255).toString(16).padStart(2,"0"):q.color,j=document.createElement("fig-input-color");if(j.setAttribute("value",J),$)j.setAttribute("text","false"),j.setAttribute("alpha","true"),j.setAttribute("swatch-disabled","");else j.setAttribute("text","true"),j.setAttribute("alpha","true"),j.setAttribute("full","");if(Z)j.setAttribute("disabled","");let _=$?this.#Z:this.#q,W=(N)=>{N.stopPropagation();let K=N.currentTarget;this.#Q[Q]={color:K.hexOpaque||this.#Q[Q].color,alpha:K.rgba?K.rgba.a:this.#Q[Q].alpha};let G=_[Q];if(G){let U=this.#Q[Q],X=U.alpha<1?U.color+Math.round(U.alpha*255).toString(16).padStart(2,"0"):U.color;G.setAttribute("value",X)}};if(j.addEventListener("input",(N)=>{W(N),this.#A()}),j.addEventListener("change",(N)=>{W(N),this.#O()}),$)this.#q.push(j);else this.#Z.push(j);return j}#Y(q,Q){let Z=document.createElement("fig-button");if(Z.setAttribute("variant","ghost"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Remove color"),Z.className="palette-remove-btn",Q||this.#Q.length<=this.#_)Z.setAttribute("disabled","");Z.appendChild(c("minus")),Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.#R(q)});let $=document.createElement("fig-tooltip");return $.setAttribute("text","Remove color"),$.appendChild(Z),$}#R(q){if(this.#N)return;if(q<0||q>=this.#Q.length)return;if(this.#Q.length<=this.#_)return;this.#Q.splice(q,1),this.#q=[],this.#Z=[],this.#K(),this.#O()}#z(q,Q=this){let Z=this.#Q.length>=this.#W,$=document.createElement("fig-button");if($.setAttribute("variant","ghost"),$.setAttribute("icon","true"),$.setAttribute("aria-label","Add color"),$.className="palette-add-btn",q||Z)$.setAttribute("disabled","");$.appendChild(c("add")),$.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#Q.length>=this.#W)return;this.open=!0,this.#M({color:"#D9D9D9",alpha:1})});let J=document.createElement("fig-tooltip");J.setAttribute("text","Add color"),J.appendChild($),Q.appendChild(J)}#M(q){if(this.#N)return;this.#Q.push(q);let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Z=this.#Q.length-1,$=this.#U(q,Z,Q,{inline:!0}),J=this.querySelector(".palette-colors");if(J)J.appendChild($);let j=this.#U(q,Z,Q),_=this.querySelector(".palette-colors-expanded");if(_)_.appendChild(j),_.appendChild(this.#Y(Z,Q));if(this.#Q.length>=this.#W){let W=this.querySelector(".palette-add-btn");if(W)W.setAttribute("disabled","")}this.#T(Q),this.#O()}#L(q){let Q=this.#Q[q];if(!Q)return;let Z=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,$=this.#q[q];if($)$.setAttribute("value",Z);let J=this.#Z[q];if(J)J.setAttribute("value",Z)}#B(){if(this.#q.length!==this.#Q.length){this.#K();return}this.#Q.forEach((q,Q)=>{this.#L(Q)})}#H(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#q,...this.#Z].forEach((Z)=>{if(q)Z.setAttribute("disabled","");else Z.removeAttribute("disabled")});let Q=this.querySelector(".palette-add-btn");if(Q)if(q||this.#Q.length>=this.#W)Q.setAttribute("disabled","");else Q.removeAttribute("disabled");this.#T(q),this.#k()}#k(){let q=this.querySelector(".palette-colors-inline");if(!q)return;let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";q.setAttribute("tabindex",Q?"-1":"+0"),q.setAttribute("aria-disabled",String(Q)),q.setAttribute("aria-expanded",String(this.open))}focus(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let q=this.querySelector(".palette-colors-inline");if(!q)return;q.style.outline="var(--figma-focus-outline)",q.style.outlineOffset="var(--figma-focus-outline-offset)",q.focus()}#T(q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){let Q=q||this.#Q.length<=this.#_;this.querySelectorAll(".palette-remove-btn").forEach((Z)=>{if(Q)Z.setAttribute("disabled","");else Z.removeAttribute("disabled")})}#A(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#O(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}O("fig-input-palette",e0);class e extends HTMLElement{static SHIFT_SNAP=5;#Q;#q;#Z=!1;#$=null;#J=null;#j=null;#N=null;#_={type:"linear",angle:90,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled","edit","mode","size"]}get#W(){let q=this.getAttribute("edit");if(q==="false")return"false";if(q==="picker")return"picker";return"true"}get#X(){return this.#W==="true"}get#G(){return this.getAttribute("mode")==="tip"?"tip":"handle"}#K(){if(!this.#q)return null;return this.#q.querySelector("fig-handle:not(.fig-input-gradient-ghost):not([disabled])")}#U(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){this.setAttribute("tabindex","-1");return}this.setAttribute("tabindex",this.#X?"-1":"0")}#Y(q){let Q=Z0(q);return{...Q,type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):90,centerX:Number.isFinite(Number(Q.centerX))?Number(Q.centerX):50,centerY:Number.isFinite(Number(Q.centerY))?Number(Q.centerY):50}}connectedCallback(){if(this.#L(),this.#D(),this.#R(),this.removeEventListener("keydown",this.#M),this.addEventListener("keydown",this.#M),this.#X)document.addEventListener("keydown",this.#z)}#R(){if(this.#W!=="picker"||o())return;this.#N??=customElements.whenDefined("fig-fill-picker").then(()=>{if(!this.isConnected||this.#W!=="picker")return;this.#D()})}disconnectedCallback(){if(document.removeEventListener("keydown",this.#z),this.removeEventListener("keydown",this.#M),this.#J)this.#J.disconnect(),this.#J=null;if(this.#j!==null)cancelAnimationFrame(this.#j),this.#j=null;clearTimeout(this.#$),this.removeEventListener("pointerenter",this.#S),this.removeEventListener("pointermove",this.#y),this.removeEventListener("pointerleave",this.#w),this.removeEventListener("click",this.#E),this.removeEventListener("dblclick",this.#b)}#z=(q)=>{let Q=document.activeElement;if(!(Q instanceof Node)||!this.contains(Q))return;let Z=Q&&(Q.tagName==="INPUT"||Q.tagName==="TEXTAREA"||Q.isContentEditable);if(!this.#q)return;if(q.key==="Tab"&&!Z){let j=this.#q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!j)return;q.preventDefault();let _=[...this.#q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],W=_.indexOf(j),N=q.shiftKey?(W-1+_.length)%_.length:(W+1)%_.length;j.deselect(),_[N].select();return}if((q.key==="ArrowLeft"||q.key==="ArrowRight")&&!Z){let j=this.#q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!j)return;let _=parseInt(j.dataset.stopIndex,10);if(isNaN(_)||!this.#_.stops[_])return;q.preventDefault();let W=(q.key==="ArrowRight"?1:-1)*(q.shiftKey?e.SHIFT_SNAP:1),N=this.#_.stops[_];N.position=Math.max(0,Math.min(100,N.position+W)),j.setAttribute("value",`${N.position}% 50%`);let K=j.closest("fig-tooltip");if(K)K.text=`${Math.round(N.position)}%`,K.setAttribute("show","true"),K.showPopup(),j.hideColorTip(),clearTimeout(this.#$),this.#$=setTimeout(()=>{K.removeAttribute("show"),j.showColorTip()},600);this.#u(),this.#c(),this.#i();return}if(q.key!=="Delete"&&q.key!=="Backspace")return;if(Z)return;if(this.#_.stops.length<=2)return;let $=this.#q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!$)return;let J=parseInt($.dataset.stopIndex,10);if(isNaN(J)||!this.#_.stops[J])return;q.preventDefault(),$.removeAttribute("selected"),this.#_.stops.splice(J,1),this.#v(),this.#u(),this.#c(),this.#i()};#M=(q)=>{if(this.#W!=="picker")return;if(q.key!=="Enter"&&q.key!==" ")return;if(q.altKey||q.ctrlKey||q.metaKey)return;if(T(this,"disabled"))return;let Q=this.querySelector("fig-fill-picker");if(!Q||typeof Q.open!=="function")return;q.preventDefault(),Q.open()};#L(){let q=this.getAttribute("value");if(!q)return;try{let Q=JSON.parse(q);if(Q?.type==="gradient"&&Q.gradient){this.#_=this.#Y({...this.#_,...Q.gradient});return}if(Q?.gradient)this.#_=this.#Y({...this.#_,...Q.gradient})}catch(Q){}}#B(){let q=this.#Y(this.#_),Z=[...q.stops].sort((j,_)=>j.position-_.position).map((j)=>{let _=(j.opacity??100)/100;if(_>=1)return`${j.color} ${j.position}%`;let{r:W,g:N,b:K}=i(j.color);return`rgba(${W}, ${N}, ${K}, ${_}) ${j.position}%`}).join(", "),$=a0(q);return`linear-gradient(to right${$?` ${$}`:""}, ${Z})`}#H(q){let Q=(q.opacity??100)/100;if(Q>=1)return q.color;let{r:Z,g:$,b:J}=i(q.color);return`rgba(${Z}, ${$}, ${J}, ${Q})`}#k(){let q=this.getAttribute("size");return q?` size="${q}"`:""}#T(){if(!this.#Q)return;let q=this.getAttribute("size");if(q)this.#Q.setAttribute("size",q);else this.#Q.removeAttribute("size")}#A(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=this.#G==="tip"?' tip="color"':"";return this.#_.stops.map((Z,$)=>`<fig-tooltip action="manual" text="${Math.round(Z.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color"${Q} color="${this.#H(Z)}" value="${Z.position}% 50%" hit-area="4" data-stop-index="${$}"${q?" disabled":""}></fig-handle></fig-tooltip>`).join("")}#O=null;#f=!1;#D(){this.#J?.disconnect(),this.#J=null;let q=T(this,"disabled"),Q=this.#W;if(Q==="picker"&&o()){let Z=JSON.stringify(this.value);this.innerHTML=`
         <fig-fill-picker mode="gradient" value='${Z}'${q?" disabled":""}>
           <fig-swatch background="${this.#B()}"${this.#k()}${q?" disabled":""}></fig-swatch>
         </fig-fill-picker>`,this.#Q=this.querySelector("fig-swatch"),this.#q=null,this.#C(),this.#U();return}if(this.innerHTML=`

package/fig.js

@@ -10064,18 +10064,9 @@ class FigInputGradient extends HTMLElement {
       .join(", ");
     const interp = gradientInterpolationClause(gradient);
     const interpolation = interp ? ` ${interp}` : "";
-    // Inline stop editor always previews L→R so handles match the track axis,
-    // regardless of linear angle / radial / angular type.
-    if (this.#editMode === "true") {
-      return `linear-gradient(to right${interpolation}, ${stops})`;
-    }
-    if (gradient.type === "radial") {
-      return `radial-gradient(circle at ${gradient.centerX}% ${gradient.centerY}%${interpolation}, ${stops})`;
-    }
-    if (gradient.type === "angular") {
-      return `conic-gradient(from ${gradient.angle}deg${interpolation}, ${stops})`;
-    }
-    return `linear-gradient(${gradient.angle}deg${interpolation}, ${stops})`;
+    // Compact swatch always previews L→R, regardless of linear angle /
+    // radial / angular type (stop handles also use this axis when editing).
+    return `linear-gradient(to right${interpolation}, ${stops})`;
   }
 
   #stopColorCSS(stop) {

package/package.json

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