@rogieking/figui3 4.15.3 → 4.15.4

package/dist/fig.js

@@ -179,7 +179,7 @@ var L1=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var G1={};var U0=L1(()=>{/*! Vendored from @
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",K),requestAnimationFrame(()=>{this.#J=this.querySelector(".fig-input-fill-opacity"),this.#q=this.querySelector(".fig-input-fill-hex");let X=this.querySelector(".fig-input-fill-label");if(X&&this.#Q)X.addEventListener("click",()=>{let _=this.#Q.querySelector("fig-chit");if(_)_.click()});if(this.#q)this.#q.addEventListener("input",(_)=>{_.stopPropagation();let Y="#"+_.target.value.replace("#","");this.#j.color=Y,this.#B(),this.#R()}),this.#q.addEventListener("change",(_)=>{_.stopPropagation(),this.#O()});if(this.#J)this.#J.addEventListener("input",(_)=>{_.stopPropagation();let Y=parseFloat(_.target.value),W=(isNaN(Y)?100:Y)/100;switch(this.#$){case"solid":this.#j.alpha=W;break;case"gradient":break;case"image":this.#X.opacity=W;break;case"video":this.#_.opacity=W;break;case"webcam":this.#K.opacity=W;break}this.#B(),this.#A(W),this.#R()}),this.#J.addEventListener("change",(_)=>{_.stopPropagation(),this.#O()})})}#B(){if(this.#Q)this.#Q.setAttribute("value",JSON.stringify(this.value))}#A(Q){if(this.#Q){let $=this.#Q.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#R(){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.#$){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:r(this.#Z)};case"image":return{type:"image",image:{...this.#X}};case"video":return{type:"video",video:{...this.#_}};case"webcam":return{type:"webcam",webcam:{...this.#K}};default:return{type:this.#$}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":let Z=this.#$;if(this.#Y(),this.#Q)if(this.#$!==Z)this.#N();else this.#B(),this.#G();break;case"disabled":this.#W();break;case"mode":case"experimental":if(this.#Q)if(J)this.#Q.setAttribute(Q,J);else this.#Q.removeAttribute(Q);break}}}customElements.define("fig-input-fill",x0);class V0 extends HTMLElement{#$=[];#Q=[];#J=[];#q=null;static get observedAttributes(){return["value","disabled","min","max","open","fixed"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){let $=this.open;if(Q)this.setAttribute("open","");else this.removeAttribute("open");if($!==!!Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!Q},bubbles:!0}))}get#j(){return this.hasAttribute("fixed")&&this.getAttribute("fixed")!=="false"}get#Z(){let Q=parseInt(this.getAttribute("min"));return isNaN(Q)?2:Q}get#X(){let Q=parseInt(this.getAttribute("max"));return isNaN(Q)?8:Q}connectedCallback(){if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.#q)cancelAnimationFrame(this.#q);this.#q=requestAnimationFrame(()=>{this.#q=null,this.#_(),this.#K()})}disconnectedCallback(){if(this.#q)cancelAnimationFrame(this.#q),this.#q=null;this.#Q=[],this.#J=[]}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#_(),this.#M();break;case"disabled":this.#B();break;case"min":case"max":case"fixed":this.#K();break;case"open":break}}#_(){let Q=this.getAttribute("value");if(!Q){this.#$=[];return}let $=Q.trim();try{let J=JSON.parse($);if(Array.isArray(J)){this.#$=J.map((Z)=>{if(typeof Z==="string")return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1};if(Z&&typeof Z==="object")return{color:Z.color||"#D9D9D9",alpha:Z.alpha!==void 0?Z.alpha:Z.opacity!==void 0?Z.opacity/100:1};return{color:"#D9D9D9",alpha:1}});return}}catch(J){}if($.includes(",")){this.#$=$.split(",").map((J)=>{let Z=J.trim();return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1}});return}if($.startsWith("#")){this.#$=[{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1}];return}this.#$=[]}get value(){return this.#$.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.#J=[];let $=document.createElement("div");$.className="palette-colors-inline",$.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.open=!0});let J=document.createElement("div");if(J.className="palette-colors",this.#$.forEach((j,q)=>{J.appendChild(this.#Y(j,q,Q,{inline:!0}))}),$.appendChild(J),this.appendChild($),!this.#j)this.#N(Q,this);let Z=document.createElement("div");Z.className="palette-colors-expanded",this.#$.forEach((j,q)=>{if(Z.appendChild(this.#Y(j,q,Q)),!this.#j)Z.appendChild(this.#U(q,Q))}),this.appendChild(Z)}#Y(Q,$,J,{inline:Z=!1}={}){let j=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,q=document.createElement("fig-input-color");if(q.setAttribute("value",j),Z)q.setAttribute("text","false"),q.setAttribute("alpha","true"),q.setAttribute("swatch-disabled","");else q.setAttribute("text","true"),q.setAttribute("alpha",this.#j?"true":"false"),q.setAttribute("full","");if(J)q.setAttribute("disabled","");let K=Z?this.#J:this.#Q,X=(_)=>{_.stopPropagation();let Y=_.currentTarget;this.#$[$]={color:Y.hexOpaque||this.#$[$].color,alpha:Y.rgba?Y.rgba.a:this.#$[$].alpha};let N=K[$];if(N){let W=this.#$[$],G=W.alpha<1?W.color+Math.round(W.alpha*255).toString(16).padStart(2,"0"):W.color;N.setAttribute("value",G)}};if(q.addEventListener("input",(_)=>{X(_),this.#R()}),q.addEventListener("change",(_)=>{X(_),this.#O()}),Z)this.#Q.push(q);else this.#J.push(q);return q}#U(Q,$){let J=document.createElement("fig-button");if(J.setAttribute("variant","ghost"),J.setAttribute("icon","true"),J.setAttribute("aria-label","Remove color"),J.className="palette-remove-btn",$||this.#$.length<=this.#Z)J.setAttribute("disabled","");J.appendChild(u("minus")),J.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.#W(Q)});let Z=document.createElement("fig-tooltip");return Z.setAttribute("text","Remove color"),Z.appendChild(J),Z}#W(Q){if(this.#j)return;if(Q<0||Q>=this.#$.length)return;if(this.#$.length<=this.#Z)return;this.#$.splice(Q,1),this.#Q=[],this.#J=[],this.#K(),this.#O()}#N(Q,$=this){let J=this.#$.length>=this.#X,Z=document.createElement("fig-button");if(Z.setAttribute("variant","ghost"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Add color"),Z.className="palette-add-btn",Q||J)Z.setAttribute("disabled","");Z.appendChild(u("add")),Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#$.length>=this.#X)return;this.open=!0,this.#L({color:"#D9D9D9",alpha:1})});let j=document.createElement("fig-tooltip");j.setAttribute("text","Add color"),j.appendChild(Z),$.appendChild(j)}#L(Q){if(this.#j)return;this.#$.push(Q);let $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#$.length-1,Z=this.#Y(Q,J,$,{inline:!0}),j=this.querySelector(".palette-colors");if(j)j.appendChild(Z);let q=this.#Y(Q,J,$),K=this.querySelector(".palette-colors-expanded");if(K)K.appendChild(q),K.appendChild(this.#U(J,$));if(this.#$.length>=this.#X){let X=this.querySelector(".palette-add-btn");if(X)X.setAttribute("disabled","")}this.#A($),this.#O()}#G(Q){let $=this.#$[Q];if(!$)return;let J=$.alpha<1?$.color+Math.round($.alpha*255).toString(16).padStart(2,"0"):$.color,Z=this.#Q[Q];if(Z)Z.setAttribute("value",J);let j=this.#J[Q];if(j)j.setAttribute("value",J)}#M(){if(this.#Q.length!==this.#$.length){this.#K();return}this.#$.forEach((Q,$)=>{this.#G($)})}#B(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#Q,...this.#J].forEach((J)=>{if(Q)J.setAttribute("disabled","");else J.removeAttribute("disabled")});let $=this.querySelector(".palette-add-btn");if($)if(Q||this.#$.length>=this.#X)$.setAttribute("disabled","");else $.removeAttribute("disabled");this.#A(Q)}#A(Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){let $=Q||this.#$.length<=this.#Z;this.querySelectorAll(".palette-remove-btn").forEach((J)=>{if($)J.setAttribute("disabled","");else J.removeAttribute("disabled")})}#R(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#O(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}customElements.define("fig-input-palette",V0);class i extends HTMLElement{static SHIFT_SNAP=5;#$;#Q;#J=!1;#q=null;#j=null;#Z={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled","edit"]}get#X(){let Q=this.getAttribute("edit");if(Q==="false")return"false";if(Q==="picker")return"picker";return"true"}get#_(){return this.#X==="true"}connectedCallback(){if(this.#Y(),this.#M(),this.#_)document.addEventListener("keydown",this.#K)}disconnectedCallback(){if(document.removeEventListener("keydown",this.#K),this.#j)this.#j.disconnect(),this.#j=null;clearTimeout(this.#q),this.removeEventListener("pointerenter",this.#P),this.removeEventListener("pointermove",this.#D),this.removeEventListener("pointerleave",this.#F),this.removeEventListener("click",this.#f),this.removeEventListener("dblclick",this.#S)}#K=(Q)=>{let $=document.activeElement,J=$&&($.tagName==="INPUT"||$.tagName==="TEXTAREA"||$.isContentEditable);if(!this.#Q)return;if(Q.key==="Tab"&&!J){let q=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!q)return;Q.preventDefault();let K=[...this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],X=K.indexOf(q),_=Q.shiftKey?(X-1+K.length)%K.length:(X+1)%K.length;q.deselect(),K[_].select();return}if((Q.key==="ArrowLeft"||Q.key==="ArrowRight")&&!J){let q=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!q)return;let K=parseInt(q.dataset.stopIndex,10);if(isNaN(K)||!this.#Z.stops[K])return;Q.preventDefault();let X=(Q.key==="ArrowRight"?1:-1)*(Q.shiftKey?i.SHIFT_SNAP:1),_=this.#Z.stops[K];_.position=Math.max(0,Math.min(100,_.position+X)),q.setAttribute("value",`${_.position}% 50%`);let Y=q.closest("fig-tooltip");if(Y)Y.text=`${Math.round(_.position)}%`,Y.setAttribute("show","true"),Y.showPopup(),q.hideColorTip(),clearTimeout(this.#q),this.#q=setTimeout(()=>{Y.removeAttribute("show"),q.showColorTip()},600);this.#k(),this.#y(),this.#V();return}if(Q.key!=="Delete"&&Q.key!=="Backspace")return;if(J)return;if(this.#Z.stops.length<=2)return;let Z=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!Z)return;let j=parseInt(Z.dataset.stopIndex,10);if(isNaN(j)||!this.#Z.stops[j])return;Q.preventDefault(),Z.removeAttribute("selected"),this.#Z.stops.splice(j,1),this.#T(),this.#k(),this.#y(),this.#V()};#Y(){let Q=this.getAttribute("value");if(!Q)return;try{let $=JSON.parse(Q);if($?.type==="gradient"&&$.gradient){this.#Z=V({...this.#Z,...$.gradient}),this.#Z.type="linear",this.#Z.angle=90;return}if($?.gradient)this.#Z=V({...this.#Z,...$.gradient}),this.#Z.type="linear",this.#Z.angle=90}catch($){}}#U(){let $=[...this.#Z.stops].sort((Z,j)=>Z.position-j.position).map((Z)=>{let j=(Z.opacity??100)/100;if(j>=1)return`${Z.color} ${Z.position}%`;let{r:q,g:K,b:X}=o(Z.color);return`rgba(${q}, ${K}, ${X}, ${j}) ${Z.position}%`}).join(", "),J=y0(this.#Z);return`linear-gradient(${this.#Z.angle}deg ${J}, ${$})`}#W(Q){let $=(Q.opacity??100)/100;if($>=1)return Q.color;let{r:J,g:Z,b:j}=o(Q.color);return`rgba(${J}, ${Z}, ${j}, ${$})`}#N(){let Q=this.hasAttribute("disabled");return this.#Z.stops.map(($,J)=>`<fig-tooltip action="manual" text="${Math.round($.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color" color-tip color="${this.#W($)}" value="${$.position}% 50%" hit-area="4" data-stop-index="${J}"${Q?" disabled":""}></fig-handle></fig-tooltip>`).join("")}#L=null;#G=!1;#M(){let Q=this.hasAttribute("disabled"),$=this.#X;if($==="picker"){let J=this.getAttribute("experimental"),Z=J?` experimental="${J}"`:"",j=JSON.stringify(this.value);this.innerHTML=`
+          </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",K),requestAnimationFrame(()=>{this.#J=this.querySelector(".fig-input-fill-opacity"),this.#q=this.querySelector(".fig-input-fill-hex");let X=this.querySelector(".fig-input-fill-label");if(X&&this.#Q)X.addEventListener("click",()=>{let _=this.#Q.querySelector("fig-chit");if(_)_.click()});if(this.#q)this.#q.addEventListener("input",(_)=>{_.stopPropagation();let Y="#"+_.target.value.replace("#","");this.#j.color=Y,this.#B(),this.#R()}),this.#q.addEventListener("change",(_)=>{_.stopPropagation(),this.#O()});if(this.#J)this.#J.addEventListener("input",(_)=>{_.stopPropagation();let Y=parseFloat(_.target.value),W=(isNaN(Y)?100:Y)/100;switch(this.#$){case"solid":this.#j.alpha=W;break;case"gradient":break;case"image":this.#X.opacity=W;break;case"video":this.#_.opacity=W;break;case"webcam":this.#K.opacity=W;break}this.#B(),this.#A(W),this.#R()}),this.#J.addEventListener("change",(_)=>{_.stopPropagation(),this.#O()})})}#B(){if(this.#Q)this.#Q.setAttribute("value",JSON.stringify(this.value))}#A(Q){if(this.#Q){let $=this.#Q.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#R(){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.#$){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:r(this.#Z)};case"image":return{type:"image",image:{...this.#X}};case"video":return{type:"video",video:{...this.#_}};case"webcam":return{type:"webcam",webcam:{...this.#K}};default:return{type:this.#$}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":let Z=this.#$;if(this.#Y(),this.#Q)if(this.#$!==Z)this.#N();else this.#B(),this.#G();break;case"disabled":this.#W();break;case"mode":case"experimental":if(this.#Q)if(J)this.#Q.setAttribute(Q,J);else this.#Q.removeAttribute(Q);break}}}customElements.define("fig-input-fill",x0);class V0 extends HTMLElement{#$=[];#Q=[];#J=[];#q=null;static get observedAttributes(){return["value","disabled","min","max","open","fixed"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){let $=this.open;if(Q)this.setAttribute("open","");else this.removeAttribute("open");if($!==!!Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!Q},bubbles:!0}))}get#j(){return this.hasAttribute("fixed")&&this.getAttribute("fixed")!=="false"}get#Z(){let Q=parseInt(this.getAttribute("min"));return isNaN(Q)?2:Q}get#X(){let Q=parseInt(this.getAttribute("max"));return isNaN(Q)?8:Q}connectedCallback(){if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.#q)cancelAnimationFrame(this.#q);this.#q=requestAnimationFrame(()=>{this.#q=null,this.#_(),this.#K()})}disconnectedCallback(){if(this.#q)cancelAnimationFrame(this.#q),this.#q=null;this.#Q=[],this.#J=[]}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#_(),this.#M();break;case"disabled":this.#B();break;case"min":case"max":case"fixed":this.#K();break;case"open":break}}#_(){let Q=this.getAttribute("value");if(!Q){this.#$=[];return}let $=Q.trim();try{let J=JSON.parse($);if(Array.isArray(J)){this.#$=J.map((Z)=>{if(typeof Z==="string")return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1};if(Z&&typeof Z==="object")return{color:Z.color||"#D9D9D9",alpha:Z.alpha!==void 0?Z.alpha:Z.opacity!==void 0?Z.opacity/100:1};return{color:"#D9D9D9",alpha:1}});return}}catch(J){}if($.includes(",")){this.#$=$.split(",").map((J)=>{let Z=J.trim();return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1}});return}if($.startsWith("#")){this.#$=[{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1}];return}this.#$=[]}get value(){return this.#$.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.#J=[];let $=document.createElement("div");$.className="palette-colors-inline",$.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.open=!0});let J=document.createElement("div");if(J.className="palette-colors",this.#$.forEach((j,q)=>{J.appendChild(this.#Y(j,q,Q,{inline:!0}))}),$.appendChild(J),this.appendChild($),!this.#j)this.#N(Q,this);let Z=document.createElement("div");Z.className="palette-colors-expanded",this.#$.forEach((j,q)=>{if(Z.appendChild(this.#Y(j,q,Q)),!this.#j)Z.appendChild(this.#U(q,Q))}),this.appendChild(Z)}#Y(Q,$,J,{inline:Z=!1}={}){let j=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,q=document.createElement("fig-input-color");if(q.setAttribute("value",j),Z)q.setAttribute("text","false"),q.setAttribute("alpha","true"),q.setAttribute("swatch-disabled","");else q.setAttribute("text","true"),q.setAttribute("alpha","true"),q.setAttribute("full","");if(J)q.setAttribute("disabled","");let K=Z?this.#J:this.#Q,X=(_)=>{_.stopPropagation();let Y=_.currentTarget;this.#$[$]={color:Y.hexOpaque||this.#$[$].color,alpha:Y.rgba?Y.rgba.a:this.#$[$].alpha};let N=K[$];if(N){let W=this.#$[$],G=W.alpha<1?W.color+Math.round(W.alpha*255).toString(16).padStart(2,"0"):W.color;N.setAttribute("value",G)}};if(q.addEventListener("input",(_)=>{X(_),this.#R()}),q.addEventListener("change",(_)=>{X(_),this.#O()}),Z)this.#Q.push(q);else this.#J.push(q);return q}#U(Q,$){let J=document.createElement("fig-button");if(J.setAttribute("variant","ghost"),J.setAttribute("icon","true"),J.setAttribute("aria-label","Remove color"),J.className="palette-remove-btn",$||this.#$.length<=this.#Z)J.setAttribute("disabled","");J.appendChild(u("minus")),J.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.#W(Q)});let Z=document.createElement("fig-tooltip");return Z.setAttribute("text","Remove color"),Z.appendChild(J),Z}#W(Q){if(this.#j)return;if(Q<0||Q>=this.#$.length)return;if(this.#$.length<=this.#Z)return;this.#$.splice(Q,1),this.#Q=[],this.#J=[],this.#K(),this.#O()}#N(Q,$=this){let J=this.#$.length>=this.#X,Z=document.createElement("fig-button");if(Z.setAttribute("variant","ghost"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Add color"),Z.className="palette-add-btn",Q||J)Z.setAttribute("disabled","");Z.appendChild(u("add")),Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#$.length>=this.#X)return;this.open=!0,this.#L({color:"#D9D9D9",alpha:1})});let j=document.createElement("fig-tooltip");j.setAttribute("text","Add color"),j.appendChild(Z),$.appendChild(j)}#L(Q){if(this.#j)return;this.#$.push(Q);let $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#$.length-1,Z=this.#Y(Q,J,$,{inline:!0}),j=this.querySelector(".palette-colors");if(j)j.appendChild(Z);let q=this.#Y(Q,J,$),K=this.querySelector(".palette-colors-expanded");if(K)K.appendChild(q),K.appendChild(this.#U(J,$));if(this.#$.length>=this.#X){let X=this.querySelector(".palette-add-btn");if(X)X.setAttribute("disabled","")}this.#A($),this.#O()}#G(Q){let $=this.#$[Q];if(!$)return;let J=$.alpha<1?$.color+Math.round($.alpha*255).toString(16).padStart(2,"0"):$.color,Z=this.#Q[Q];if(Z)Z.setAttribute("value",J);let j=this.#J[Q];if(j)j.setAttribute("value",J)}#M(){if(this.#Q.length!==this.#$.length){this.#K();return}this.#$.forEach((Q,$)=>{this.#G($)})}#B(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#Q,...this.#J].forEach((J)=>{if(Q)J.setAttribute("disabled","");else J.removeAttribute("disabled")});let $=this.querySelector(".palette-add-btn");if($)if(Q||this.#$.length>=this.#X)$.setAttribute("disabled","");else $.removeAttribute("disabled");this.#A(Q)}#A(Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){let $=Q||this.#$.length<=this.#Z;this.querySelectorAll(".palette-remove-btn").forEach((J)=>{if($)J.setAttribute("disabled","");else J.removeAttribute("disabled")})}#R(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#O(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}customElements.define("fig-input-palette",V0);class i extends HTMLElement{static SHIFT_SNAP=5;#$;#Q;#J=!1;#q=null;#j=null;#Z={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled","edit"]}get#X(){let Q=this.getAttribute("edit");if(Q==="false")return"false";if(Q==="picker")return"picker";return"true"}get#_(){return this.#X==="true"}connectedCallback(){if(this.#Y(),this.#M(),this.#_)document.addEventListener("keydown",this.#K)}disconnectedCallback(){if(document.removeEventListener("keydown",this.#K),this.#j)this.#j.disconnect(),this.#j=null;clearTimeout(this.#q),this.removeEventListener("pointerenter",this.#P),this.removeEventListener("pointermove",this.#D),this.removeEventListener("pointerleave",this.#F),this.removeEventListener("click",this.#f),this.removeEventListener("dblclick",this.#S)}#K=(Q)=>{let $=document.activeElement,J=$&&($.tagName==="INPUT"||$.tagName==="TEXTAREA"||$.isContentEditable);if(!this.#Q)return;if(Q.key==="Tab"&&!J){let q=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!q)return;Q.preventDefault();let K=[...this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],X=K.indexOf(q),_=Q.shiftKey?(X-1+K.length)%K.length:(X+1)%K.length;q.deselect(),K[_].select();return}if((Q.key==="ArrowLeft"||Q.key==="ArrowRight")&&!J){let q=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!q)return;let K=parseInt(q.dataset.stopIndex,10);if(isNaN(K)||!this.#Z.stops[K])return;Q.preventDefault();let X=(Q.key==="ArrowRight"?1:-1)*(Q.shiftKey?i.SHIFT_SNAP:1),_=this.#Z.stops[K];_.position=Math.max(0,Math.min(100,_.position+X)),q.setAttribute("value",`${_.position}% 50%`);let Y=q.closest("fig-tooltip");if(Y)Y.text=`${Math.round(_.position)}%`,Y.setAttribute("show","true"),Y.showPopup(),q.hideColorTip(),clearTimeout(this.#q),this.#q=setTimeout(()=>{Y.removeAttribute("show"),q.showColorTip()},600);this.#k(),this.#y(),this.#V();return}if(Q.key!=="Delete"&&Q.key!=="Backspace")return;if(J)return;if(this.#Z.stops.length<=2)return;let Z=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!Z)return;let j=parseInt(Z.dataset.stopIndex,10);if(isNaN(j)||!this.#Z.stops[j])return;Q.preventDefault(),Z.removeAttribute("selected"),this.#Z.stops.splice(j,1),this.#T(),this.#k(),this.#y(),this.#V()};#Y(){let Q=this.getAttribute("value");if(!Q)return;try{let $=JSON.parse(Q);if($?.type==="gradient"&&$.gradient){this.#Z=V({...this.#Z,...$.gradient}),this.#Z.type="linear",this.#Z.angle=90;return}if($?.gradient)this.#Z=V({...this.#Z,...$.gradient}),this.#Z.type="linear",this.#Z.angle=90}catch($){}}#U(){let $=[...this.#Z.stops].sort((Z,j)=>Z.position-j.position).map((Z)=>{let j=(Z.opacity??100)/100;if(j>=1)return`${Z.color} ${Z.position}%`;let{r:q,g:K,b:X}=o(Z.color);return`rgba(${q}, ${K}, ${X}, ${j}) ${Z.position}%`}).join(", "),J=y0(this.#Z);return`linear-gradient(${this.#Z.angle}deg ${J}, ${$})`}#W(Q){let $=(Q.opacity??100)/100;if($>=1)return Q.color;let{r:J,g:Z,b:j}=o(Q.color);return`rgba(${J}, ${Z}, ${j}, ${$})`}#N(){let Q=this.hasAttribute("disabled");return this.#Z.stops.map(($,J)=>`<fig-tooltip action="manual" text="${Math.round($.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color" color-tip color="${this.#W($)}" value="${$.position}% 50%" hit-area="4" data-stop-index="${J}"${Q?" disabled":""}></fig-handle></fig-tooltip>`).join("")}#L=null;#G=!1;#M(){let Q=this.hasAttribute("disabled"),$=this.#X;if($==="picker"){let J=this.getAttribute("experimental"),Z=J?` experimental="${J}"`:"",j=JSON.stringify(this.value);this.innerHTML=`
         <fig-fill-picker mode="gradient"${Z} value='${j}'${Q?" disabled":""}>
           <fig-chit background="${this.#U()}"${Q?" disabled":""}></fig-chit>
         </fig-fill-picker>`,this.#$=this.querySelector("fig-chit"),this.#Q=null,this.#B();return}if(this.innerHTML=`

package/fig.js

@@ -6690,7 +6690,7 @@ class FigInputPalette extends HTMLElement {
       ic.setAttribute("swatch-disabled", "");
     } else {
       ic.setAttribute("text", "true");
-      ic.setAttribute("alpha", this.#isFixed ? "true" : "false");
+      ic.setAttribute("alpha", "true");
       ic.setAttribute("full", "");
     }
     if (disabled) ic.setAttribute("disabled", "");

package/package.json

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