@rogieking/figui3 4.8.3 → 4.9.0

package/dist/fig.js

@@ -179,11 +179,11 @@ var N1=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var U1={};var W0=N1(()=>{/*! Vendored from @
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",q),requestAnimationFrame(()=>{this.#J=this.querySelector(".fig-input-fill-opacity"),this.#K=this.querySelector(".fig-input-fill-hex");let _=this.querySelector(".fig-input-fill-label");if(_&&this.#$)_.addEventListener("click",()=>{let X=this.#$.querySelector("fig-chit");if(X)X.click()});if(this.#K)this.#K.addEventListener("input",(X)=>{X.stopPropagation();let Y="#"+X.target.value.replace("#","");this.#Z.color=Y,this.#O(),this.#A()}),this.#K.addEventListener("change",(X)=>{X.stopPropagation(),this.#R()});if(this.#J)this.#J.addEventListener("input",(X)=>{X.stopPropagation();let Y=parseFloat(X.target.value),N=(isNaN(Y)?100:Y)/100;switch(this.#Q){case"solid":this.#Z.alpha=N;break;case"gradient":break;case"image":this.#_.opacity=N;break;case"video":this.#X.opacity=N;break;case"webcam":this.#q.opacity=N;break}this.#O(),this.#B(N),this.#A()}),this.#J.addEventListener("change",(X)=>{X.stopPropagation(),this.#R()})})}#O(){if(this.#$)this.#$.setAttribute("value",JSON.stringify(this.value))}#B(Q){if(this.#$){let $=this.#$.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#A(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#R(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#Z.color,alpha:this.#Z.alpha,opacity:Math.round(this.#Z.alpha*100)};case"gradient":return{type:"gradient",gradient:d(this.#j)};case"image":return{type:"image",image:{...this.#_}};case"video":return{type:"video",video:{...this.#X}};case"webcam":return{type:"webcam",webcam:{...this.#q}};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,$,J){if($===J)return;switch(Q){case"value":let Z=this.#Q;if(this.#W(),this.#$)if(this.#Q!==Z)this.#Y();else this.#O(),this.#G();break;case"disabled":this.#U();break;case"mode":case"experimental":if(this.#$)if(J)this.#$.setAttribute(Q,J);else this.#$.removeAttribute(Q);break}}}customElements.define("fig-input-fill",y0);class x0 extends HTMLElement{#Q=[];#$=[];#J=[];#K=null;static get observedAttributes(){return["value","disabled","min","max","open","add"]}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#Z(){return!this.hasAttribute("add")||this.getAttribute("add")!=="false"}get#j(){let Q=parseInt(this.getAttribute("min"));return isNaN(Q)?2:Q}get#_(){let Q=parseInt(this.getAttribute("max"));return isNaN(Q)?8:Q}connectedCallback(){if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.#K)cancelAnimationFrame(this.#K);this.#K=requestAnimationFrame(()=>{this.#K=null,this.#X(),this.#q()})}disconnectedCallback(){if(this.#K)cancelAnimationFrame(this.#K),this.#K=null;this.#$=[],this.#J=[]}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#X(),this.#M();break;case"disabled":this.#O();break;case"min":case"max":case"add":this.#q();break;case"open":break}}#X(){let Q=this.getAttribute("value");if(!Q){this.#Q=[];return}let $=Q.trim();try{let J=JSON.parse($);if(Array.isArray(J)){this.#Q=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.#Q=$.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.#Q=[{color:$.slice(0,7),alpha:$.length>7?parseInt($.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))}#q(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.innerHTML="",this.#$=[],this.#J=[];let $=document.createElement("div");$.className="palette-colors-inline";let J=document.createElement("div");if(J.className="palette-colors",this.#Q.forEach((j,K)=>{J.appendChild(this.#W(j,K,Q,{inline:!0}))}),$.appendChild(J),this.#Z)this.#Y(Q,$);this.appendChild($);let Z=document.createElement("div");Z.className="palette-colors-expanded",this.#Q.forEach((j,K)=>{Z.appendChild(this.#W(j,K,Q)),Z.appendChild(this.#N(K,Q))}),this.appendChild(Z)}#W(Q,$,J,{inline:Z=!1}={}){let j=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,K=document.createElement("fig-input-color");if(K.setAttribute("value",j),K.setAttribute("picker","figma"),K.setAttribute("picker-anchor","self"),Z)K.setAttribute("text","false"),K.setAttribute("alpha","true");else K.setAttribute("text","true"),K.setAttribute("alpha","true"),K.setAttribute("full","");if(J)K.setAttribute("disabled","");let q=Z?this.#J:this.#$,_=(X)=>{X.stopPropagation();let Y=X.currentTarget;this.#Q[$]={color:Y.hexOpaque||this.#Q[$].color,alpha:Y.rgba?Y.rgba.a:this.#Q[$].alpha};let W=q[$];if(W){let N=this.#Q[$],G=N.alpha<1?N.color+Math.round(N.alpha*255).toString(16).padStart(2,"0"):N.color;W.setAttribute("value",G)}};if(K.addEventListener("input",(X)=>{_(X),this.#B()}),K.addEventListener("change",(X)=>{_(X),this.#A()}),Z)this.#$.push(K);else this.#J.push(K);return K}#N(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.#Q.length<=this.#j)J.setAttribute("disabled","");return J.innerHTML='<span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>',J.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.#U(Q)}),J}#U(Q){if(Q<0||Q>=this.#Q.length)return;if(this.#Q.length<=this.#j)return;this.#Q.splice(Q,1),this.#$=[],this.#J=[],this.#q(),this.#A()}#Y(Q,$=this){let J=this.#Q.length>=this.#_,Z=document.createElement("fig-button");if(Z.setAttribute("variant","input"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Add color"),Z.className="palette-add-btn",Q||J)Z.setAttribute("disabled","");Z.innerHTML='<span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>',Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#Q.length>=this.#_)return;this.#L({color:"#D9D9D9",alpha:1})});let j=document.createElement("fig-tooltip");j.setAttribute("text","Add color"),j.appendChild(Z),$.appendChild(j)}#L(Q){this.#Q.push(Q);let $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#Q.length-1,Z=this.#W(Q,J,$,{inline:!0}),j=this.querySelector(".palette-colors");if(j)j.appendChild(Z);let K=this.#W(Q,J,$),q=this.querySelector(".palette-colors-expanded");if(q)q.appendChild(K),q.appendChild(this.#N(J,$));if(this.#Q.length>=this.#_){let _=this.querySelector(".palette-add-btn");if(_)_.setAttribute("disabled","")}this.#A()}#G(Q){let $=this.#Q[Q];if(!$)return;let J=$.alpha<1?$.color+Math.round($.alpha*255).toString(16).padStart(2,"0"):$.color,Z=this.#$[Q];if(Z)Z.setAttribute("value",J);let j=this.#J[Q];if(j)j.setAttribute("value",J)}#M(){if(this.#$.length!==this.#Q.length){this.#q();return}this.#Q.forEach((Q,$)=>{this.#G($)})}#O(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#$,...this.#J].forEach((J)=>{if(Q)J.setAttribute("disabled","");else J.removeAttribute("disabled")});let $=this.querySelector(".palette-add-btn");if($)if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}#B(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#A(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}customElements.define("fig-input-palette",x0);class r extends HTMLElement{static SHIFT_SNAP=5;#Q;#$;#J=!1;#K=null;#Z=null;#j={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#_(){let Q=this.getAttribute("edit");if(Q==="false")return"false";if(Q==="picker")return"picker";return"true"}get#X(){return this.#_==="true"}connectedCallback(){if(this.#W(),this.#M(),this.#X)document.addEventListener("keydown",this.#q)}disconnectedCallback(){if(document.removeEventListener("keydown",this.#q),this.#Z)this.#Z.disconnect(),this.#Z=null;clearTimeout(this.#K),this.removeEventListener("pointerenter",this.#F),this.removeEventListener("pointermove",this.#D),this.removeEventListener("pointerleave",this.#H),this.removeEventListener("click",this.#V),this.removeEventListener("dblclick",this.#S)}#q=(Q)=>{let $=document.activeElement,J=$&&($.tagName==="INPUT"||$.tagName==="TEXTAREA"||$.isContentEditable);if(!this.#$)return;if(Q.key==="Tab"&&!J){let K=this.#$.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!K)return;Q.preventDefault();let q=[...this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],_=q.indexOf(K),X=Q.shiftKey?(_-1+q.length)%q.length:(_+1)%q.length;K.deselect(),q[X].select();return}if((Q.key==="ArrowLeft"||Q.key==="ArrowRight")&&!J){let K=this.#$.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!K)return;let q=parseInt(K.dataset.stopIndex,10);if(isNaN(q)||!this.#j.stops[q])return;Q.preventDefault();let _=(Q.key==="ArrowRight"?1:-1)*(Q.shiftKey?r.SHIFT_SNAP:1),X=this.#j.stops[q];X.position=Math.max(0,Math.min(100,X.position+_)),K.setAttribute("value",`${X.position}% 50%`);let Y=K.closest("fig-tooltip");if(Y)Y.text=`${Math.round(X.position)}%`,Y.setAttribute("show","true"),Y.showPopup(),K.hideColorTip(),clearTimeout(this.#K),this.#K=setTimeout(()=>{Y.removeAttribute("show"),K.showColorTip()},600);this.#E(),this.#C(),this.#x();return}if(Q.key!=="Delete"&&Q.key!=="Backspace")return;if(J)return;if(this.#j.stops.length<=2)return;let Z=this.#$.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!Z)return;let j=parseInt(Z.dataset.stopIndex,10);if(isNaN(j)||!this.#j.stops[j])return;Q.preventDefault(),Z.removeAttribute("selected"),this.#j.stops.splice(j,1),this.#T(),this.#E(),this.#C(),this.#x()};#W(){let Q=this.getAttribute("value");if(!Q)return;try{let $=JSON.parse(Q);if($?.type==="gradient"&&$.gradient){this.#j=V({...this.#j,...$.gradient}),this.#j.type="linear",this.#j.angle=90;return}if($?.gradient)this.#j=V({...this.#j,...$.gradient}),this.#j.type="linear",this.#j.angle=90}catch($){}}#N(){let $=[...this.#j.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:K,g:q,b:_}=i(Z.color);return`rgba(${K}, ${q}, ${_}, ${j}) ${Z.position}%`}).join(", "),J=I0(this.#j);return`linear-gradient(${this.#j.angle}deg ${J}, ${$})`}#U(Q){let $=(Q.opacity??100)/100;if($>=1)return Q.color;let{r:J,g:Z,b:j}=i(Q.color);return`rgba(${J}, ${Z}, ${j}, ${$})`}#Y(){let Q=this.hasAttribute("disabled");return this.#j.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="${this.#U($)}" 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.#_;if($==="picker"){let J=this.getAttribute("experimental"),Z=J?` experimental="${J}"`:"",j=JSON.stringify(this.value);this.innerHTML=`
+          </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",q),requestAnimationFrame(()=>{this.#J=this.querySelector(".fig-input-fill-opacity"),this.#K=this.querySelector(".fig-input-fill-hex");let _=this.querySelector(".fig-input-fill-label");if(_&&this.#$)_.addEventListener("click",()=>{let X=this.#$.querySelector("fig-chit");if(X)X.click()});if(this.#K)this.#K.addEventListener("input",(X)=>{X.stopPropagation();let Y="#"+X.target.value.replace("#","");this.#Z.color=Y,this.#O(),this.#A()}),this.#K.addEventListener("change",(X)=>{X.stopPropagation(),this.#R()});if(this.#J)this.#J.addEventListener("input",(X)=>{X.stopPropagation();let Y=parseFloat(X.target.value),N=(isNaN(Y)?100:Y)/100;switch(this.#Q){case"solid":this.#Z.alpha=N;break;case"gradient":break;case"image":this.#_.opacity=N;break;case"video":this.#X.opacity=N;break;case"webcam":this.#q.opacity=N;break}this.#O(),this.#B(N),this.#A()}),this.#J.addEventListener("change",(X)=>{X.stopPropagation(),this.#R()})})}#O(){if(this.#$)this.#$.setAttribute("value",JSON.stringify(this.value))}#B(Q){if(this.#$){let $=this.#$.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#A(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#R(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#Z.color,alpha:this.#Z.alpha,opacity:Math.round(this.#Z.alpha*100)};case"gradient":return{type:"gradient",gradient:d(this.#j)};case"image":return{type:"image",image:{...this.#_}};case"video":return{type:"video",video:{...this.#X}};case"webcam":return{type:"webcam",webcam:{...this.#q}};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,$,J){if($===J)return;switch(Q){case"value":let Z=this.#Q;if(this.#W(),this.#$)if(this.#Q!==Z)this.#Y();else this.#O(),this.#G();break;case"disabled":this.#U();break;case"mode":case"experimental":if(this.#$)if(J)this.#$.setAttribute(Q,J);else this.#$.removeAttribute(Q);break}}}customElements.define("fig-input-fill",y0);class x0 extends HTMLElement{#Q=[];#$=[];#J=[];#K=null;static get observedAttributes(){return["value","disabled","min","max","open","add"]}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#Z(){return!this.hasAttribute("add")||this.getAttribute("add")!=="false"}get#j(){let Q=parseInt(this.getAttribute("min"));return isNaN(Q)?2:Q}get#_(){let Q=parseInt(this.getAttribute("max"));return isNaN(Q)?8:Q}connectedCallback(){if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.#K)cancelAnimationFrame(this.#K);this.#K=requestAnimationFrame(()=>{this.#K=null,this.#X(),this.#q()})}disconnectedCallback(){if(this.#K)cancelAnimationFrame(this.#K),this.#K=null;this.#$=[],this.#J=[]}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#X(),this.#M();break;case"disabled":this.#O();break;case"min":case"max":case"add":this.#q();break;case"open":break}}#X(){let Q=this.getAttribute("value");if(!Q){this.#Q=[];return}let $=Q.trim();try{let J=JSON.parse($);if(Array.isArray(J)){this.#Q=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.#Q=$.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.#Q=[{color:$.slice(0,7),alpha:$.length>7?parseInt($.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))}#q(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.innerHTML="",this.#$=[],this.#J=[];let $=document.createElement("div");$.className="palette-colors-inline";let J=document.createElement("div");if(J.className="palette-colors",this.#Q.forEach((j,K)=>{J.appendChild(this.#W(j,K,Q,{inline:!0}))}),$.appendChild(J),this.appendChild($),this.#Z)this.#Y(Q,this);let Z=document.createElement("div");Z.className="palette-colors-expanded",this.#Q.forEach((j,K)=>{Z.appendChild(this.#W(j,K,Q)),Z.appendChild(this.#N(K,Q))}),this.appendChild(Z)}#W(Q,$,J,{inline:Z=!1}={}){let j=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,K=document.createElement("fig-input-color");if(K.setAttribute("value",j),K.setAttribute("picker","figma"),K.setAttribute("picker-anchor","self"),Z)K.setAttribute("text","false"),K.setAttribute("alpha","true");else K.setAttribute("text","true"),K.setAttribute("alpha","false"),K.setAttribute("full","");if(J)K.setAttribute("disabled","");let q=Z?this.#J:this.#$,_=(X)=>{X.stopPropagation();let Y=X.currentTarget;this.#Q[$]={color:Y.hexOpaque||this.#Q[$].color,alpha:Y.rgba?Y.rgba.a:this.#Q[$].alpha};let W=q[$];if(W){let N=this.#Q[$],G=N.alpha<1?N.color+Math.round(N.alpha*255).toString(16).padStart(2,"0"):N.color;W.setAttribute("value",G)}};if(K.addEventListener("input",(X)=>{_(X),this.#B()}),K.addEventListener("change",(X)=>{_(X),this.#A()}),Z)this.#$.push(K);else this.#J.push(K);return K}#N(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.#Q.length<=this.#j)J.setAttribute("disabled","");return J.innerHTML='<span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>',J.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.#U(Q)}),J}#U(Q){if(Q<0||Q>=this.#Q.length)return;if(this.#Q.length<=this.#j)return;this.#Q.splice(Q,1),this.#$=[],this.#J=[],this.#q(),this.#A()}#Y(Q,$=this){let J=this.#Q.length>=this.#_,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.innerHTML='<span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>',Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#Q.length>=this.#_)return;this.#L({color:"#D9D9D9",alpha:1})});let j=document.createElement("fig-tooltip");j.setAttribute("text","Add color"),j.appendChild(Z),$.appendChild(j)}#L(Q){this.#Q.push(Q);let $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#Q.length-1,Z=this.#W(Q,J,$,{inline:!0}),j=this.querySelector(".palette-colors");if(j)j.appendChild(Z);let K=this.#W(Q,J,$),q=this.querySelector(".palette-colors-expanded");if(q)q.appendChild(K),q.appendChild(this.#N(J,$));if(this.#Q.length>=this.#_){let _=this.querySelector(".palette-add-btn");if(_)_.setAttribute("disabled","")}this.#A()}#G(Q){let $=this.#Q[Q];if(!$)return;let J=$.alpha<1?$.color+Math.round($.alpha*255).toString(16).padStart(2,"0"):$.color,Z=this.#$[Q];if(Z)Z.setAttribute("value",J);let j=this.#J[Q];if(j)j.setAttribute("value",J)}#M(){if(this.#$.length!==this.#Q.length){this.#q();return}this.#Q.forEach((Q,$)=>{this.#G($)})}#O(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#$,...this.#J].forEach((J)=>{if(Q)J.setAttribute("disabled","");else J.removeAttribute("disabled")});let $=this.querySelector(".palette-add-btn");if($)if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}#B(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#A(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}customElements.define("fig-input-palette",x0);class r extends HTMLElement{static SHIFT_SNAP=5;#Q;#$;#J=!1;#K=null;#Z=null;#j={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#_(){let Q=this.getAttribute("edit");if(Q==="false")return"false";if(Q==="picker")return"picker";return"true"}get#X(){return this.#_==="true"}connectedCallback(){if(this.#W(),this.#M(),this.#X)document.addEventListener("keydown",this.#q)}disconnectedCallback(){if(document.removeEventListener("keydown",this.#q),this.#Z)this.#Z.disconnect(),this.#Z=null;clearTimeout(this.#K),this.removeEventListener("pointerenter",this.#F),this.removeEventListener("pointermove",this.#D),this.removeEventListener("pointerleave",this.#H),this.removeEventListener("click",this.#V),this.removeEventListener("dblclick",this.#S)}#q=(Q)=>{let $=document.activeElement,J=$&&($.tagName==="INPUT"||$.tagName==="TEXTAREA"||$.isContentEditable);if(!this.#$)return;if(Q.key==="Tab"&&!J){let K=this.#$.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!K)return;Q.preventDefault();let q=[...this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],_=q.indexOf(K),X=Q.shiftKey?(_-1+q.length)%q.length:(_+1)%q.length;K.deselect(),q[X].select();return}if((Q.key==="ArrowLeft"||Q.key==="ArrowRight")&&!J){let K=this.#$.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!K)return;let q=parseInt(K.dataset.stopIndex,10);if(isNaN(q)||!this.#j.stops[q])return;Q.preventDefault();let _=(Q.key==="ArrowRight"?1:-1)*(Q.shiftKey?r.SHIFT_SNAP:1),X=this.#j.stops[q];X.position=Math.max(0,Math.min(100,X.position+_)),K.setAttribute("value",`${X.position}% 50%`);let Y=K.closest("fig-tooltip");if(Y)Y.text=`${Math.round(X.position)}%`,Y.setAttribute("show","true"),Y.showPopup(),K.hideColorTip(),clearTimeout(this.#K),this.#K=setTimeout(()=>{Y.removeAttribute("show"),K.showColorTip()},600);this.#E(),this.#C(),this.#x();return}if(Q.key!=="Delete"&&Q.key!=="Backspace")return;if(J)return;if(this.#j.stops.length<=2)return;let Z=this.#$.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!Z)return;let j=parseInt(Z.dataset.stopIndex,10);if(isNaN(j)||!this.#j.stops[j])return;Q.preventDefault(),Z.removeAttribute("selected"),this.#j.stops.splice(j,1),this.#T(),this.#E(),this.#C(),this.#x()};#W(){let Q=this.getAttribute("value");if(!Q)return;try{let $=JSON.parse(Q);if($?.type==="gradient"&&$.gradient){this.#j=V({...this.#j,...$.gradient}),this.#j.type="linear",this.#j.angle=90;return}if($?.gradient)this.#j=V({...this.#j,...$.gradient}),this.#j.type="linear",this.#j.angle=90}catch($){}}#N(){let $=[...this.#j.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:K,g:q,b:_}=i(Z.color);return`rgba(${K}, ${q}, ${_}, ${j}) ${Z.position}%`}).join(", "),J=I0(this.#j);return`linear-gradient(${this.#j.angle}deg ${J}, ${$})`}#U(Q){let $=(Q.opacity??100)/100;if($>=1)return Q.color;let{r:J,g:Z,b:j}=i(Q.color);return`rgba(${J}, ${Z}, ${j}, ${$})`}#Y(){let Q=this.hasAttribute("disabled");return this.#j.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="${this.#U($)}" 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.#_;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 size="medium" background="${this.#N()}"${Q?" disabled":""}></fig-chit>
+          <fig-chit background="${this.#N()}"${Q?" disabled":""}></fig-chit>
         </fig-fill-picker>`,this.#Q=this.querySelector("fig-chit"),this.#$=null,this.#O();return}if(this.innerHTML=`
-      <fig-chit size="medium" background="${this.#N()}"${Q?" disabled":""}></fig-chit>
+      <fig-chit background="${this.#N()}"${Q?" disabled":""}></fig-chit>
       ${$==="true"?`<div class="fig-input-gradient-track">${this.#Y()}</div>`:""}`,this.#Q=this.querySelector("fig-chit"),this.#$=this.querySelector(".fig-input-gradient-track"),$==="true")this.#A(),this.#y(),requestAnimationFrame(()=>this.#k())}#O(){let Q=this.querySelector("fig-fill-picker");if(!Q)return;Q.anchorElement=this;let $=(J)=>{J.stopPropagation();let Z=J.detail;if(!Z?.gradient)return;this.#j=V({...this.#j,...Z.gradient}),this.#E()};Q.addEventListener("input",(J)=>{$(J),this.#C()}),Q.addEventListener("change",(J)=>{$(J),this.#x()})}#B(Q){return F1(this.#j.stops,Q,this.#j.interpolationSpace,this.#j.hueInterpolation)}#A(){if(!this.#$||this.hasAttribute("disabled"))return;let Q=document.createElement("fig-handle");Q.classList.add("fig-input-gradient-ghost"),Q.setAttribute("type","color"),Q.setAttribute("control","add"),Q.style.position="absolute",Q.style.top="50%",Q.style.transform="translate(-50%, -50%)",Q.style.pointerEvents="none",Q.style.opacity="0",Q.style.transition="opacity 0.15s",this.#$.appendChild(Q),this.#L=Q,this.addEventListener("pointerenter",this.#F),this.addEventListener("pointermove",this.#D),this.addEventListener("pointerleave",this.#H),this.addEventListener("click",this.#V),this.addEventListener("dblclick",this.#S)}#R(){if(!this.#L)return;this.#L.style.opacity="1"}#z(){if(!this.#L)return;this.#L.style.opacity="0"}#F=()=>{if(this.#J)return;this.#R()};#H=()=>{this.#z()};#D=(Q)=>{if(this.#J){this.#z();return}if(!this.#L||!this.#$)return;if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){this.#z();return}let $=this.#$.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width));this.#L.style.left=`${J*100}%`;let Z=this.#B(J);this.#L.setAttribute("color",Z),this.#R()};#P(){let Q=this.#j.stops.length;if(Q<2)return;for(let $=0;$<Q;$++)this.#j.stops[$].position=Math.round($/(Q-1)*100);this.#T(),this.#E(),this.#C(),this.#x()}#S=(Q)=>{if(!this.#$)return;if(!Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;this.#P(),this.#$.querySelectorAll("fig-handle[selected]").forEach(($)=>{$.removeAttribute("selected")})};#V=(Q)=>{if(!this.#$)return;if(this.#J)return;if(this.#G){this.#G=!1;return}if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){if(Q.shiftKey){let q=Q.target.closest("fig-handle"),_=parseInt(q?.dataset.stopIndex,10);if(this.#P(),!isNaN(_))this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((X)=>{if(parseInt(X.dataset.stopIndex,10)===_)X.select();else X.deselect()});Q.stopPropagation()}return}let $=this.#$.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),Z=Math.round(J*100),j=this.#B(J);this.#j.stops.push({position:Z,color:j,opacity:100}),this.#j.stops.sort((q,_)=>q.position-_.position);let K=this.#j.stops.findIndex((q)=>q.position===Z&&q.color===j);this.#T(),this.#E(),this.#C(),this.#x(),requestAnimationFrame(()=>{let _=this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[K];if(_)_.click()})};#k(){if(!this.#$)return;let Q=this.#j.stops;this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach(($,J)=>{if(J>=Q.length)return;$.removeAttribute("value"),$.setAttribute("value",`${Q[J].position}% 50%`)})}#T(){if(!this.#$)return;let Q=this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),$=this.#j.stops;if(Q.length!==$.length){let J=this.#L;if(this.#$.innerHTML=this.#Y(),J)this.#$.appendChild(J);this.#I(),requestAnimationFrame(()=>this.#k());return}for(let J=0;J<$.length;J++){let Z=Q[J],j=$[J];Z.dataset.stopIndex=J,Z.setAttribute("value",`${j.position}% 50%`),Z.setAttribute("color",this.#U(j));let K=Z.closest("fig-tooltip");if(K)K.setAttribute("text",`${Math.round(j.position)}%`)}}#I(){if(!this.#Z||!this.#$)return;this.#Z.disconnect(),this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q)=>{this.#Z.observe(Q,{attributes:!0,attributeFilter:["color"]})})}#w(){if(!this.#$)return;let Q=this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),$=this.#j.stops,J=new Set;Q.forEach((Z)=>{let j=Math.round(parseFloat(Z.getAttribute("value"))||0),K=(Z.getAttribute("color")||"").toUpperCase(),q=-1;for(let _=0;_<$.length;_++){if(J.has(_))continue;if($[_].position===j&&$[_].color.toUpperCase()===K){q=_;break}}if(q===-1){let _=1/0;for(let X=0;X<$.length;X++){if(J.has(X))continue;let Y=Math.abs($[X].position-j);if(Y<_)_=Y,q=X}}if(q!==-1)J.add(q),Z.dataset.stopIndex=q})}#E(){if(!this.#Q)return;this.#Q.setAttribute("background",this.#N())}#y(){if(!this.#$)return;this.#$.addEventListener("pointerdown",(Q)=>{if(this.hasAttribute("disabled"))return;if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;if(Q.button!==0)return;Q.preventDefault(),Q.stopPropagation();let $=this.#$.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),Z=Math.round(J*100),j=this.#B(J);this.#j.stops.push({position:Z,color:j,opacity:100}),this.#j.stops.sort((X,Y)=>X.position-Y.position);let K=this.#j.stops.findIndex((X)=>X.position===Z&&X.color===j);this.#G=!0,this.#T(),this.#E(),this.#C(),this.#z();let _=this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[K];if(_)this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((X)=>{if(X!==_)X.deselect()}),_.select(),_.dispatchEvent(new PointerEvent("pointerdown",{bubbles:!0,clientX:Q.clientX,clientY:Q.clientY,pointerId:Q.pointerId,pointerType:Q.pointerType,button:Q.button,buttons:Q.buttons}))}),this.#$.addEventListener("input",(Q)=>{let $=Q.target.closest("fig-handle");if(!$)return;if(Q.stopPropagation(),Q.detail?.color){let X=parseInt($.dataset.stopIndex,10);if(!isNaN(X)&&this.#j.stops[X]){if(this.#j.stops[X].color=Q.detail.color,Q.detail.opacity!==void 0)this.#j.stops[X].opacity=Q.detail.opacity;$.setAttribute("color",this.#U(this.#j.stops[X])),this.#E(),this.#C()}return}if(!this.#J)$.style.zIndex="5";this.#J=!0;let J=parseInt($.dataset.stopIndex,10);if(isNaN(J)||!this.#j.stops[J])return;let Z=Q.detail?.px??0,j=Math.round(Z*100),K=j,q=this.#$.getBoundingClientRect().width;if(Q.detail?.shiftKey)K=Math.round(K/r.SHIFT_SNAP)*r.SHIFT_SNAP;else{let X=q>0?5/q*100:0;for(let Y=0;Y<this.#j.stops.length;Y++){if(Y===J)continue;if(Math.abs(this.#j.stops[Y].position-K)<=X){K=this.#j.stops[Y].position;break}}}if(this.#j.stops[J].position=K,K!==j)$.style.left=`${K/100*q-$.offsetWidth/2}px`;let _=$.closest("fig-tooltip");if(_){if(_.text=`${Math.round(K)}%`,!_.hasAttribute("show"))_.setAttribute("show","true"),$.hideColorTip()}this.#E(),this.#C()}),this.#$.addEventListener("change",(Q)=>{let $=Q.target.closest("fig-handle");if(!$)return;if(Q.stopPropagation(),Q.detail?.color){let X=parseInt($.dataset.stopIndex,10);if(!isNaN(X)&&this.#j.stops[X]){if(this.#j.stops[X].color=Q.detail.color,Q.detail.opacity!==void 0)this.#j.stops[X].opacity=Q.detail.opacity;$.setAttribute("color",this.#U(this.#j.stops[X])),this.#E(),this.#x()}return}$.style.zIndex="";let J=$.closest("fig-tooltip");if(J)J.removeAttribute("show");$.showColorTip();let Z=parseInt($.dataset.stopIndex,10);if(isNaN(Z)||!this.#j.stops[Z])return;let j=Q.detail?.px??0,K=Math.round(j*100),q=this.#$.getBoundingClientRect().width,_=q>0?5/q*100:0;for(let X=0;X<this.#j.stops.length;X++){if(X===Z)continue;if(Math.abs(this.#j.stops[X].position-K)<=_){K=this.#j.stops[X].position;break}}this.#j.stops[Z].position=K,$.style.left=`${K/100*q-$.offsetWidth/2}px`,this.#j.stops.sort((X,Y)=>X.position-Y.position),this.#w(),this.#E(),this.#x(),requestAnimationFrame(()=>{this.#J=!1})}),this.#Z=new MutationObserver((Q)=>{for(let $ of Q){if($.attributeName!=="color")continue;let J=$.target;if(J.classList.contains("fig-input-gradient-ghost"))continue;let Z=parseInt(J.dataset.stopIndex,10);if(isNaN(Z)||!this.#j.stops[Z])continue;let j=J.getAttribute("color");if(!j||!j.startsWith("#"))continue;if(j!==this.#j.stops[Z].color)this.#j.stops[Z].color=j,this.#E(),this.#C()}}),this.#$.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q)=>{this.#Z.observe(Q,{attributes:!0,attributeFilter:["color"]})})}#C(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#x(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){return{type:"gradient",gradient:d(this.#j)}}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":this.#W(),this.#E(),this.#T();break;case"disabled":this.#v();break;case"edit":if(this.#M(),this.#X)document.addEventListener("keydown",this.#q);else document.removeEventListener("keydown",this.#q);break}}#v(){let Q=this.hasAttribute("disabled");if(this.#Q)if(Q)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(this.#$)for(let $ of this.#$.querySelectorAll("fig-handle"))if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}}customElements.define("fig-input-gradient",r);class Q0 extends HTMLElement{#Q=null;#$;constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",u()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.input.setAttribute("role","checkbox"),this.#$=this.handleInput.bind(this)}connectedCallback(){let Q=this.querySelector(":scope > input");if(Q)this.input=Q;else if(!this.input.parentNode)this.append(this.input);if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.removeEventListener("change",this.#$),this.input.addEventListener("change",this.#$),this.hasAttribute("disabled"))this.input.disabled=!0;if(this.hasAttribute("indeterminate"))this.input.indeterminate=!0,this.input.setAttribute("indeterminate","true");let $=this.querySelector(":scope > label");if($)this.#Q=$,this.#Q.setAttribute("for",this.input.id);if(this.hasAttribute("label"))this.#J(),this.#Q.innerText=this.getAttribute("label");this.render()}static get observedAttributes(){return["disabled","label","checked","name","value","indeterminate"]}#J(){if(!this.#Q)this.#Q=document.createElement("label"),this.#Q.setAttribute("for",this.input.id);if(this.#Q&&!this.#Q.parentNode&&this.input.parentNode)this.input.after(this.#Q)}render(){}focus(){this.input.focus()}get value(){return this.input.value}set value(Q){this.input.value=Q,this.setAttribute("value",Q)}get checked(){return this.input.checked}set checked(Q){if(this.input.checked=Q,Q)this.setAttribute("checked","");else this.removeAttribute("checked")}disconnectedCallback(){this.input.removeEventListener("change",this.#$),this.input.remove()}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(J)this.#J(),this.#Q.innerText=J;else if(this.#Q)this.#Q.remove(),this.#Q=null;break;case"checked":if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.checked&&this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"indeterminate":if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"value":this.input.value=J;break;default:this.input[Q]=J,this.input.setAttribute(Q,J);break}}handleInput(Q){if(Q.stopPropagation(),this.input.indeterminate=!1,this.input.removeAttribute("indeterminate"),this.input.setAttribute("aria-checked",this.input.checked),this.input.checked)this.setAttribute("checked","");else this.removeAttribute("checked");this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}}))}}customElements.define("fig-checkbox",Q0);class V0 extends Q0{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}customElements.define("fig-radio",V0);class w0 extends Q0{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",w0);class v0 extends HTMLDialogElement{constructor(){super();this._figInit()}_figInit(){if(this._figInitialized)return;this._figInitialized=!0,this._defaultOffset=16,this._autoCloseTimer=null,this._boundHandleClose=this.handleClose.bind(this)}getOffset(){return parseInt(this.getAttribute("offset")??this._defaultOffset)}connectedCallback(){if(this._figInit(),!this.hasAttribute("theme"))this.setAttribute("theme","dark");let Q=this.getAttribute("open")==="true"||this.getAttribute("open")==="";if(this.hasAttribute("open")&&!Q)this.removeAttribute("open");if(!Q)this.close();requestAnimationFrame(()=>{if(this.addCloseListeners(),this.applyPosition(),Q)this.showToast()})}disconnectedCallback(){this._figInit(),this.clearAutoClose()}addCloseListeners(){this.querySelectorAll("[close-toast]").forEach((Q)=>{Q.removeEventListener("click",this._boundHandleClose),Q.addEventListener("click",this._boundHandleClose)})}handleClose(){this.hideToast()}applyPosition(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.getOffset()}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}startAutoClose(){this.clearAutoClose();let Q=parseInt(this.getAttribute("duration")??"5000");if(Q>0)this._autoCloseTimer=setTimeout(()=>{this.hideToast()},Q)}clearAutoClose(){if(this._autoCloseTimer)clearTimeout(this._autoCloseTimer),this._autoCloseTimer=null}_resolveAutoTheme(){if(this.getAttribute("theme")!=="auto")return;let $=(getComputedStyle(document.documentElement).colorScheme||"").includes("dark");this.style.colorScheme=$?"light":"dark"}showToast(){this._resolveAutoTheme(),this.show(),this.applyPosition(),this.startAutoClose(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.clearAutoClose(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme"]}attributeChangedCallback(Q,$,J){if(this._figInit(),Q==="offset")this.applyPosition();if(Q==="open")if(J!==null&&J!=="false")this.showToast();else this.hideToast();if(Q==="theme")if(J==="auto")this._resolveAutoTheme();else this.style.removeProperty("color-scheme")}}j0("fig-toast",v0,{extends:"dialog"});class b0 extends HTMLElement{static observedAttributes=["options","placeholder","value","disabled","experimental"];#Q=!1;#$=null;#J=null;#K=null;#Z=null;#j=!1;#_=this.#Y.bind(this);#X=this.#L.bind(this);#q=this.#G.bind(this);get value(){return this.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q??"")}connectedCallback(){if(this.#Z=Array.from(this.children).find((Q)=>Q.tagName==="FIG-DROPDOWN")||null,this.#Q=this.#Z!==null,this.#Z)this.#Z.remove();if(this.#W(),this.#N(),this.hasAttribute("disabled"))this.#A(!0)}disconnectedCallback(){this.#U()}#W(){let Q=this.#B(),$=this.getAttribute("placeholder")||"",J=this.value,Z=this.getAttribute("experimental"),j=Z?` experimental="${Z}"`:"",K=this.#Q?"":`<fig-dropdown type="dropdown"${j}>${Q.map((q)=>`<option>${q.trim()}</option>`).join("")}</fig-dropdown>`;if(this.innerHTML=`<div class="input-combo">
   <fig-input-text placeholder="${$}" value="${J}"></fig-input-text>
   <fig-button type="select" variant="input" icon>

package/fig.js

@@ -6614,10 +6614,10 @@ class FigInputPalette extends HTMLElement {
       );
     });
     inlineWrap.appendChild(wrap);
-
-    if (this.#showAdd) this.#createAddButton(disabled, inlineWrap);
     this.appendChild(inlineWrap);
 
+    if (this.#showAdd) this.#createAddButton(disabled, this);
+
     const expandedWrap = document.createElement("div");
     expandedWrap.className = "palette-colors-expanded";
     this.#colors.forEach((entry, i) => {
@@ -6644,7 +6644,7 @@ class FigInputPalette extends HTMLElement {
       ic.setAttribute("alpha", "true");
     } else {
       ic.setAttribute("text", "true");
-      ic.setAttribute("alpha", "true");
+      ic.setAttribute("alpha", "false");
       ic.setAttribute("full", "");
     }
     if (disabled) ic.setAttribute("disabled", "");
@@ -6715,7 +6715,7 @@ class FigInputPalette extends HTMLElement {
   #createAddButton(disabled, parent = this) {
     const atMax = this.#colors.length >= this.#max;
     const addBtn = document.createElement("fig-button");
-    addBtn.setAttribute("variant", "input");
+    addBtn.setAttribute("variant", "ghost");
     addBtn.setAttribute("icon", "true");
     addBtn.setAttribute("aria-label", "Add color");
     addBtn.className = "palette-add-btn";
@@ -7041,7 +7041,7 @@ class FigInputGradient extends HTMLElement {
       const gradientValue = JSON.stringify(this.value);
       this.innerHTML = `
         <fig-fill-picker mode="gradient"${expAttr} value='${gradientValue}'${disabled ? " disabled" : ""}>
-          <fig-chit size="medium" background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-chit>
+          <fig-chit background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-chit>
         </fig-fill-picker>`;
       this.#chit = this.querySelector("fig-chit");
       this.#track = null;
@@ -7050,7 +7050,7 @@ class FigInputGradient extends HTMLElement {
     }
 
     this.innerHTML = `
-      <fig-chit size="medium" background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-chit>
+      <fig-chit background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-chit>
       ${mode === "true" ? `<div class="fig-input-gradient-track">${this.#buildStopHandles()}</div>` : ""}`;
     this.#chit = this.querySelector("fig-chit");
     this.#track = this.querySelector(".fig-input-gradient-track");

package/package.json

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