@rogieking/figui3 6.12.0 → 6.13.0

package/dist/fig.js

@@ -253,6 +253,6 @@ var D1=(Q,Z)=>()=>(Q&&(Z=Q(Q=0)),Z);var T1={};var F0=D1(()=>{/*! Vendored from @
                     <span slot="prepend">Y</span>
                   </fig-input-number>
                 </div>`:""}
-        `}#M(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane?.addEventListener("pointerdown",this.#Z),this.cursor?.addEventListener("pointerdown",this.#Q),this.cursor?.addEventListener("input",this.#j),this.cursor?.addEventListener("change",this.#$);let Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#y());if(this.#U&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#J),this.xInput.addEventListener("change",this.#J),this.xInput.addEventListener("focusout",this.#_),this.yInput.addEventListener("input",this.#q),this.yInput.addEventListener("change",this.#q),this.yInput.addEventListener("focusout",this.#G)}#F(){if(this.plane?.removeEventListener("pointerdown",this.#Z),this.cursor?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("input",this.#j),this.cursor?.removeEventListener("change",this.#$),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#U&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#J),this.xInput.removeEventListener("change",this.#J),this.xInput.removeEventListener("focusout",this.#_),this.yInput.removeEventListener("input",this.#q),this.yInput.removeEventListener("change",this.#q),this.yInput.removeEventListener("focusout",this.#G)}#A(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.x=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#D(),this.#E()}#H(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.y=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#D(),this.#E()}#B(){this.#D(),this.#k()}#P(Q,Z,{syncHandle:$=!0}={}){let J=Math.max(0,Math.min(1,Q)),j=Math.max(0,Math.min(1,Z)),_=this.coordinates==="math"?1-j:j;if(this.position={x:J,y:_},$)this.#R();this.#f(),this.#D()}#T(Q){if(!this.plane||!this.cursor)return;if(Q.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;let Z=this.plane.getBoundingClientRect(),$=Z.width>0?(Q.clientX-Z.left)/Z.width:0.5,J=Z.height>0?(Q.clientY-Z.top)/Z.height:0.5;this.cursor.value=`${Math.round($*100)}% ${Math.round(J*100)}%`,this.#P($,J,{syncHandle:!1}),this.#E(),this.#k()}#C(Q){let Z=Q.detail??{};if(typeof Z.px!=="number"||typeof Z.py!=="number")return;this.#P(Z.px,Z.py,{syncHandle:!1}),this.#E()}#S(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#D(),this.#k()}#E(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#R(){let Q=this.#N(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${Q*100}%`;this.#f()}#f(){if(this.#U&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#D(){let Q=this.value;if(this.getAttribute("value")!==Q)this.#X=!0,this.setAttribute("value",Q),this.#X=!1;this.#V()}#V(){let Q=this.#W,Z=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",Z),this.style.setProperty("--is-not-default",Z?"0":"1")}#y(){this.position={...this.#W},this.#R(),this.#D(),this.#E(),this.#k()}focus(){this.cursor?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){let Z=Q==null?"":String(Q).trim();if(!Z)this.position={x:0.5,y:0.5};else{let $=Z.split(/[\s,]+/).filter(Boolean),J=(q)=>{if(!q)return 0.5;let G=q.includes("%"),X=Number.parseFloat(q.replace(/%/g,"").trim());if(!Number.isFinite(X))return 0.5;let K=G||Math.abs(X)>1?X/100:X;return Math.max(0,Math.min(1,K))},j=J($[0]),_=J($[1]??$[0]);this.position={x:j,y:_}}if(this.#Y)this.#R(),this.#V()}attributeChangedCallback(Q,Z,$){if(Q==="aspect-ratio"){w(this,"--aspect-ratio",$);return}if(Q==="value"){if(this.#X||this.isDragging)return;this.value=$}if(Q==="precision")this.precision=parseInt($);if(Q==="transform")this.transform=Number($);if(Q==="fields"&&$!==Z)this.#F(),this.#L(),this.#M(),this.#R();if(Q==="axis-labels"&&$!==Z)this.#F(),this.#L(),this.#M(),this.#R();if(Q==="coordinates")this.coordinates=$||"screen",this.#R()}}customElements.define("fig-joystick",Z1);class N0 extends HTMLElement{get durationPropertyName(){return this.localName==="fig-skeleton"?"--fig-skeleton-duration":"--fig-shimmer-duration"}connectedCallback(){let Q=this.getAttribute("duration");if(Q)this.style.setProperty(this.durationPropertyName,Q);this.#Z()}static get observedAttributes(){return["duration","playing","aria-label","aria-labelledby"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,Z,$){if(Q==="duration")this.style.setProperty(this.durationPropertyName,$||"1.5s");if(Q==="playing"||Q==="aria-label"||Q==="aria-labelledby")this.#Z()}#Z(){let Q=this.playing;if(this.setAttribute("aria-busy",Q?"true":"false"),this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")){if(!this.hasAttribute("role"))this.setAttribute("role","status");this.removeAttribute("aria-hidden")}else this.removeAttribute("role"),this.setAttribute("aria-hidden","true")}}customElements.define("fig-shimmer",N0);class $1 extends N0{connectedCallback(){super.connectedCallback(),this.inert=!0,this.setAttribute("inert","")}}customElements.define("fig-skeleton",$1);class J1 extends HTMLElement{static observedAttributes=["name","collapsible","open"];#Z=null;#Q=null;connectedCallback(){this.#J()}disconnectedCallback(){if(this.#Q)this.#Q.removeEventListener("click",this.#j);if(this.#Z)this.#Z.removeEventListener("click",this.#j),this.#Z.removeEventListener("keydown",this.#$),this.#Z.querySelector("h3")?.removeEventListener("click",this.#j)}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="open"){this.#Z?.setAttribute("aria-expanded",String(this.open));return}this.#J()}get open(){let Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){let Z=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Z?.setAttribute("aria-expanded",String(!!Q)),Z!==!!Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!Q},bubbles:!0}))}#j=(Q)=>{Q.stopPropagation(),this.open=!this.open};#$=(Q)=>{if(Q.key!=="Enter"&&Q.key!==" ")return;Q.preventDefault(),Q.stopPropagation(),this.open=!this.open};#J(){let Q=this.hasAttribute("collapsible"),$=this.getAttribute("name")||(Q?"Group":null),J=this.querySelector(":scope > fig-header");if(!$&&!Q&&!J){if(this.#Z&&this.#Z.dataset.generated)this.#Z.remove(),this.#Z=null,this.#Q=null;return}if(J)this.#Z=J;else if(!this.#Z||!this.#Z.dataset.generated)this.#Z=document.createElement("fig-header"),this.#Z.setAttribute("borderless",""),this.#Z.dataset.generated="true",this.prepend(this.#Z);let j=this.#Z.querySelector("h3");if(!j)j=document.createElement("h3"),this.#Z.prepend(j);if(!j.id)j.id=b();if(this.#Z.dataset.generated)j.textContent=$;if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",j.id);if(Q){if(!j.querySelector(".fig-group-chevron")){let _=m("chevron",{size:"small",className:"fig-group-chevron"});j.prepend(_)}if(this.#Q=j.querySelector(".fig-group-chevron"),j.removeEventListener("click",this.#j),this.#Z.removeEventListener("click",this.#j),this.#Z.addEventListener("click",this.#j),this.#Z.setAttribute("role","button"),this.#Z.setAttribute("tabindex","0"),this.#Z.setAttribute("aria-expanded",String(this.open)),this.#Z.removeEventListener("keydown",this.#$),this.#Z.addEventListener("keydown",this.#$),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Z.setAttribute("aria-expanded","false")}else{if(j.removeEventListener("click",this.#j),this.#Z.removeEventListener("click",this.#j),this.#Z.removeAttribute("role"),this.#Z.removeAttribute("tabindex"),this.#Z.removeAttribute("aria-expanded"),this.#Z.removeEventListener("keydown",this.#$),this.#Q)this.#Q.remove(),this.#Q=null;this.removeAttribute("open")}}}customElements.define("fig-group",J1);class j1 extends HTMLElement{}customElements.define("fig-header",j1);class _1 extends HTMLElement{}customElements.define("fig-footer",_1);class q1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","status");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Loading")}}customElements.define("fig-spinner",q1);class G1 extends HTMLElement{static get observedAttributes(){return["fit"]}connectedCallback(){this.#Z()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="fit")this.#Z()}#Z(){let Q=this.getAttribute("fit");if(Q)this.style.setProperty("--fig-preview-fit",Q);else this.style.removeProperty("--fig-preview-fit")}}customElements.define("fig-preview",G1);var b1={chevron:"--icon-16-chevron",checkmark:"--icon-16-checkmark",reset:"--icon-16-reset","arrow-left":"--icon-16-arrow-left",steppers:"--icon-24-steppers",eyedropper:"--icon-24-eyedropper",add:"--icon-24-add",minus:"--icon-24-minus",back:"--icon-24-back",forward:"--icon-24-forward",close:{medium:"--icon-24-close",small:"--icon-16-close"},rotate:"--icon-24-rotate",swap:"--icon-24-swap",play:"--icon-24-play",pause:"--icon-24-pause",search:"--icon-24-search",visible:{medium:"--icon-24-visible",small:"--icon-16-visible"},hidden:{medium:"--icon-24-hidden",small:"--icon-16-hidden"}};function g1(Q,Z="medium"){let $=Q&&b1[Q];if(!$)return"";let J=typeof $==="string"?$:$[Z==="small"?"small":"medium"];return J?`var(${J})`:""}class X1 extends HTMLElement{static get observedAttributes(){return["name","size","color"]}connectedCallback(){this.#Z()}attributeChangedCallback(Q,Z,$){if(Z!==$)this.#Z()}#Z(){let Q=this.getAttribute("name"),Z=this.getAttribute("size")||"medium",$=g1(Q,Z);if($)this.style.setProperty("--icon",$);else this.style.removeProperty("--icon");if(Z==="small")this.style.setProperty("--size","var(--spacer-3)");else this.style.removeProperty("--size");let J=this.getAttribute("color");if(J)this.style.backgroundColor=J;else this.style.removeProperty("background-color");if(!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}}customElements.define("fig-icon",X1);class K1 extends HTMLElement{}customElements.define("fig-content",K1);class Y1 extends HTMLElement{}customElements.define("fig-tab-content",Y1);class W1 extends HTMLElement{}customElements.define("fig-button-combo",W1);class N1 extends HTMLElement{}customElements.define("fig-input-combo",N1);class U1 extends HTMLElement{#Z=null;#Q=null;#j=null;#$=this.#M.bind(this);#J=this.#F.bind(this);static get observedAttributes(){return["value","selected","disabled","alpha","control","aria-label","aria-labelledby","aria-describedby"]}get#q(){return this.getAttribute("control")||"color"}connectedCallback(){this.#W(),this.#L()}disconnectedCallback(){this.#_(),this.removeEventListener("click",this.#Y)}#_(){if(this.#Z)this.#Z.removeEventListener("input",this.#$),this.#Z.removeEventListener("change",this.#J);if(this.#Q)this.#Q.removeEventListener("input",this.#$),this.#Q.removeEventListener("change",this.#J);if(this.#j)this.#j.disconnect(),this.#j=null}#G(){if(this.#j)this.#j.disconnect(),this.#j=null;if(!this.#Q)return;this.#j=new MutationObserver(()=>{if(this.#Q?.hasAttribute("selected")&&this.#Q.getAttribute("selected")!=="false"){if(!this.hasAttribute("selected"))this.setAttribute("selected","")}else if(this.hasAttribute("selected"))this.removeAttribute("selected")}),this.#j.observe(this.#Q,{attributes:!0,attributeFilter:["selected"]})}get#X(){let Q=this.getAttribute("alpha");return Q===null||Q!=="false"}#W(){let Q=this.#q;if(Q==="add"||Q==="remove"){let G=Q==="add"?"add":"minus",X=this.getAttribute("aria-label")||(Q==="add"?"Add color stop":"Remove color stop");this.innerHTML=`<fig-button icon variant="ghost" aria-label="${V(X)}"><fig-icon name="${G}"></fig-icon></fig-button>`,this.#Z=null,this.#Q=null,this.addEventListener("click",this.#Y),this.#z();return}this.removeEventListener("click",this.#Y);let Z=(this.getAttribute("value")||"").trim(),$=this.#U(Z),J=this.#N(Z),j=this.#X?"":'alpha="false"',_=J<1?JSON.stringify({type:"solid",color:$,opacity:Math.round(J*100)}):JSON.stringify({type:"solid",color:$}),q=J<1?` alpha="${J}"`:"";if(this.innerHTML=c()?`<fig-fill-picker mode="solid" ${j} value='${_}'>
+        `}#M(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane?.addEventListener("pointerdown",this.#Z),this.cursor?.addEventListener("pointerdown",this.#Q),this.cursor?.addEventListener("input",this.#j),this.cursor?.addEventListener("change",this.#$);let Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#y());if(this.#U&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#J),this.xInput.addEventListener("change",this.#J),this.xInput.addEventListener("focusout",this.#_),this.yInput.addEventListener("input",this.#q),this.yInput.addEventListener("change",this.#q),this.yInput.addEventListener("focusout",this.#G)}#F(){if(this.plane?.removeEventListener("pointerdown",this.#Z),this.cursor?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("input",this.#j),this.cursor?.removeEventListener("change",this.#$),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#U&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#J),this.xInput.removeEventListener("change",this.#J),this.xInput.removeEventListener("focusout",this.#_),this.yInput.removeEventListener("input",this.#q),this.yInput.removeEventListener("change",this.#q),this.yInput.removeEventListener("focusout",this.#G)}#A(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.x=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#D(),this.#E()}#H(Q){let Z=Number.parseFloat(Q.target.value);if(!Number.isFinite(Z))return;this.position.y=Math.max(0,Math.min(1,Z/100)),this.#R(),this.#D(),this.#E()}#B(){this.#D(),this.#k()}#P(Q,Z,{syncHandle:$=!0}={}){let J=Math.max(0,Math.min(1,Q)),j=Math.max(0,Math.min(1,Z)),_=this.coordinates==="math"?1-j:j;if(this.position={x:J,y:_},$)this.#R();this.#f(),this.#D()}#T(Q){if(!this.plane||!this.cursor)return;if(Q.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;let Z=this.plane.getBoundingClientRect(),$=Z.width>0?(Q.clientX-Z.left)/Z.width:0.5,J=Z.height>0?(Q.clientY-Z.top)/Z.height:0.5;this.cursor.value=`${Math.round($*100)}% ${Math.round(J*100)}%`,this.#P($,J,{syncHandle:!1}),this.#E(),this.#k()}#C(Q){let Z=Q.detail??{};if(typeof Z.px!=="number"||typeof Z.py!=="number")return;this.#P(Z.px,Z.py,{syncHandle:!1}),this.#E()}#S(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#D(),this.#k()}#E(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#R(){let Q=this.#N(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${Q*100}%`;this.#f()}#f(){if(this.#U&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#D(){let Q=this.value;if(this.getAttribute("value")!==Q)this.#X=!0,this.setAttribute("value",Q),this.#X=!1;this.#V()}#V(){let Q=this.#W,Z=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",Z),this.style.setProperty("--is-not-default",Z?"0":"1")}#y(){this.position={...this.#W},this.#R(),this.#D(),this.#E(),this.#k()}focus(){this.cursor?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){let Z=Q==null?"":String(Q).trim();if(!Z)this.position={x:0.5,y:0.5};else{let $=Z.split(/[\s,]+/).filter(Boolean),J=(q)=>{if(!q)return 0.5;let G=q.includes("%"),X=Number.parseFloat(q.replace(/%/g,"").trim());if(!Number.isFinite(X))return 0.5;let K=G||Math.abs(X)>1?X/100:X;return Math.max(0,Math.min(1,K))},j=J($[0]),_=J($[1]??$[0]);this.position={x:j,y:_}}if(this.#Y)this.#R(),this.#V()}attributeChangedCallback(Q,Z,$){if(Q==="aspect-ratio"){w(this,"--aspect-ratio",$);return}if(Q==="value"){if(this.#X||this.isDragging)return;this.value=$}if(Q==="precision")this.precision=parseInt($);if(Q==="transform")this.transform=Number($);if(Q==="fields"&&$!==Z)this.#F(),this.#L(),this.#M(),this.#R();if(Q==="axis-labels"&&$!==Z)this.#F(),this.#L(),this.#M(),this.#R();if(Q==="coordinates")this.coordinates=$||"screen",this.#R()}}customElements.define("fig-joystick",Z1);class N0 extends HTMLElement{get durationPropertyName(){return this.localName==="fig-skeleton"?"--fig-skeleton-duration":"--fig-shimmer-duration"}connectedCallback(){let Q=this.getAttribute("duration");if(Q)this.style.setProperty(this.durationPropertyName,Q);this.#Z()}static get observedAttributes(){return["duration","playing","aria-label","aria-labelledby"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,Z,$){if(Q==="duration")this.style.setProperty(this.durationPropertyName,$||"1.5s");if(Q==="playing"||Q==="aria-label"||Q==="aria-labelledby")this.#Z()}#Z(){let Q=this.playing;if(this.setAttribute("aria-busy",Q?"true":"false"),this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")){if(!this.hasAttribute("role"))this.setAttribute("role","status");this.removeAttribute("aria-hidden")}else this.removeAttribute("role"),this.setAttribute("aria-hidden","true")}}customElements.define("fig-shimmer",N0);class $1 extends N0{connectedCallback(){super.connectedCallback(),this.inert=!0,this.setAttribute("inert","")}}customElements.define("fig-skeleton",$1);class J1 extends HTMLElement{static observedAttributes=["name","collapsible","open"];#Z=null;#Q=null;connectedCallback(){this.#J()}disconnectedCallback(){if(this.#Q)this.#Q.removeEventListener("click",this.#j);if(this.#Z)this.#Z.removeEventListener("click",this.#j),this.#Z.removeEventListener("keydown",this.#$),this.#Z.querySelector("h3")?.removeEventListener("click",this.#j)}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="open"){this.#Z?.setAttribute("aria-expanded",String(this.open));return}this.#J()}get open(){let Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){let Z=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Z?.setAttribute("aria-expanded",String(!!Q)),Z!==!!Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!Q},bubbles:!0}))}#j=(Q)=>{Q.stopPropagation(),this.open=!this.open};#$=(Q)=>{if(Q.key!=="Enter"&&Q.key!==" ")return;Q.preventDefault(),Q.stopPropagation(),this.open=!this.open};#J(){let Q=this.hasAttribute("collapsible"),$=this.getAttribute("name")||(Q?"Group":null),J=this.querySelector(":scope > fig-header");if(!$&&!Q&&!J){if(this.#Z&&this.#Z.dataset.generated)this.#Z.remove(),this.#Z=null,this.#Q=null;return}if(J)this.#Z=J;else if(!this.#Z||!this.#Z.dataset.generated)this.#Z=document.createElement("fig-header"),this.#Z.setAttribute("borderless",""),this.#Z.dataset.generated="true",this.prepend(this.#Z);let j=this.#Z.querySelector("h3");if(!j)j=document.createElement("h3"),this.#Z.prepend(j);if(!j.id)j.id=b();if(this.#Z.dataset.generated)j.textContent=$;if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",j.id);if(Q){if(!j.querySelector(".fig-group-chevron")){let _=m("chevron",{size:"small",className:"fig-group-chevron"});j.prepend(_)}if(this.#Q=j.querySelector(".fig-group-chevron"),j.removeEventListener("click",this.#j),this.#Z.removeEventListener("click",this.#j),this.#Z.addEventListener("click",this.#j),this.#Z.setAttribute("role","button"),this.#Z.setAttribute("tabindex","0"),this.#Z.setAttribute("aria-expanded",String(this.open)),this.#Z.removeEventListener("keydown",this.#$),this.#Z.addEventListener("keydown",this.#$),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Z.setAttribute("aria-expanded","false")}else{if(j.removeEventListener("click",this.#j),this.#Z.removeEventListener("click",this.#j),this.#Z.removeAttribute("role"),this.#Z.removeAttribute("tabindex"),this.#Z.removeAttribute("aria-expanded"),this.#Z.removeEventListener("keydown",this.#$),this.#Q)this.#Q.remove(),this.#Q=null;this.removeAttribute("open")}}}customElements.define("fig-group",J1);class j1 extends HTMLElement{}customElements.define("fig-header",j1);class _1 extends HTMLElement{}customElements.define("fig-footer",_1);class q1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","status");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Loading")}}customElements.define("fig-spinner",q1);class G1 extends HTMLElement{static get observedAttributes(){return["fit"]}connectedCallback(){this.#Z()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="fit")this.#Z()}#Z(){let Q=this.getAttribute("fit");if(Q)this.style.setProperty("--fig-preview-fit",Q);else this.style.removeProperty("--fig-preview-fit")}}customElements.define("fig-preview",G1);var b1={chevron:"--icon-16-chevron",checkmark:"--icon-16-checkmark",reset:"--icon-16-reset","arrow-left":{medium:"--icon-24-arrow-left",small:"--icon-16-arrow-left"},steppers:"--icon-24-steppers",eyedropper:"--icon-24-eyedropper",add:"--icon-24-add",minus:"--icon-24-minus",back:"--icon-24-back",forward:"--icon-24-forward",close:{medium:"--icon-24-close",small:"--icon-16-close"},rotate:"--icon-24-rotate",swap:"--icon-24-swap",play:"--icon-24-play",pause:"--icon-24-pause",search:"--icon-24-search",edit:{medium:"--icon-24-edit",small:"--icon-16-edit"},settings:{medium:"--icon-24-settings",small:"--icon-16-settings"},more:{medium:"--icon-24-more",small:"--icon-16-more"},visible:{medium:"--icon-24-visible",small:"--icon-16-visible"},hidden:{medium:"--icon-24-hidden",small:"--icon-16-hidden"}};function g1(Q,Z="medium"){let $=Q&&b1[Q];if(!$)return"";let J=typeof $==="string"?$:$[Z==="small"?"small":"medium"];return J?`var(${J})`:""}class X1 extends HTMLElement{static get observedAttributes(){return["name","size","color"]}connectedCallback(){this.#Z()}attributeChangedCallback(Q,Z,$){if(Z!==$)this.#Z()}#Z(){let Q=this.getAttribute("name"),Z=this.getAttribute("size")||"medium",$=g1(Q,Z);if($)this.style.setProperty("--icon",$);else this.style.removeProperty("--icon");if(Z==="small")this.style.setProperty("--size","var(--spacer-3)");else this.style.removeProperty("--size");let J=this.getAttribute("color");if(J)this.style.backgroundColor=J;else this.style.removeProperty("background-color");if(!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}}customElements.define("fig-icon",X1);class K1 extends HTMLElement{}customElements.define("fig-content",K1);class Y1 extends HTMLElement{}customElements.define("fig-tab-content",Y1);class W1 extends HTMLElement{}customElements.define("fig-button-combo",W1);class N1 extends HTMLElement{}customElements.define("fig-input-combo",N1);class U1 extends HTMLElement{#Z=null;#Q=null;#j=null;#$=this.#M.bind(this);#J=this.#F.bind(this);static get observedAttributes(){return["value","selected","disabled","alpha","control","aria-label","aria-labelledby","aria-describedby"]}get#q(){return this.getAttribute("control")||"color"}connectedCallback(){this.#W(),this.#L()}disconnectedCallback(){this.#_(),this.removeEventListener("click",this.#Y)}#_(){if(this.#Z)this.#Z.removeEventListener("input",this.#$),this.#Z.removeEventListener("change",this.#J);if(this.#Q)this.#Q.removeEventListener("input",this.#$),this.#Q.removeEventListener("change",this.#J);if(this.#j)this.#j.disconnect(),this.#j=null}#G(){if(this.#j)this.#j.disconnect(),this.#j=null;if(!this.#Q)return;this.#j=new MutationObserver(()=>{if(this.#Q?.hasAttribute("selected")&&this.#Q.getAttribute("selected")!=="false"){if(!this.hasAttribute("selected"))this.setAttribute("selected","")}else if(this.hasAttribute("selected"))this.removeAttribute("selected")}),this.#j.observe(this.#Q,{attributes:!0,attributeFilter:["selected"]})}get#X(){let Q=this.getAttribute("alpha");return Q===null||Q!=="false"}#W(){let Q=this.#q;if(Q==="add"||Q==="remove"){let G=Q==="add"?"add":"minus",X=this.getAttribute("aria-label")||(Q==="add"?"Add color stop":"Remove color stop");this.innerHTML=`<fig-button icon variant="ghost" aria-label="${V(X)}"><fig-icon name="${G}"></fig-icon></fig-button>`,this.#Z=null,this.#Q=null,this.addEventListener("click",this.#Y),this.#z();return}this.removeEventListener("click",this.#Y);let Z=(this.getAttribute("value")||"").trim(),$=this.#U(Z),J=this.#N(Z),j=this.#X?"":'alpha="false"',_=J<1?JSON.stringify({type:"solid",color:$,opacity:Math.round(J*100)}):JSON.stringify({type:"solid",color:$}),q=J<1?` alpha="${J}"`:"";if(this.innerHTML=c()?`<fig-fill-picker mode="solid" ${j} value='${_}'>
           <fig-swatch background="${$}"${q}></fig-swatch>
         </fig-fill-picker>`:`<fig-swatch background="${$}"${q}></fig-swatch>`,this.#Z=this.querySelector("fig-fill-picker"),this.#Q=this.querySelector("fig-swatch"),this.#_(),this.#Z?.addEventListener("input",this.#$),this.#Z?.addEventListener("change",this.#J),!this.#Z)this.#Q?.addEventListener("input",this.#$),this.#Q?.addEventListener("change",this.#J);this.#G(),this.#z()}#Y=()=>{let Q=this.#q;this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,composed:!0}))};#K(Q){if(!Q)return"#D9D9D9";let Z=Q.replace("#","").trim();if(Z.length===3||Z.length===4){let[$,J,j]=Z;return`#${$}${$}${J}${J}${j}${j}`.toUpperCase()}if(Z.length===6||Z.length===8)return`#${Z.slice(0,6)}`.toUpperCase();return"#D9D9D9"}#N(Q){if(!Q)return 1;let Z=String(Q).trim(),$=Z.replace(/^#/,"");if(/^[0-9a-f]{4}$/i.test($)){let j=$[3];return parseInt(`${j}${j}`,16)/255}if(/^[0-9a-f]{8}$/i.test($))return parseInt($.slice(6,8),16)/255;let J=Z.match(/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/i);if(J)return parseFloat(J[1]);return 1}#U(Q){if(!Q)return"#D9D9D9";let Z=String(Q).trim();if(Z.startsWith("{"))try{let $=JSON.parse(Z);if($?.color)return this.#U($.color)}catch{}if(Z.startsWith("#"))return this.#K(Z);if(/^[0-9a-f]{3,4}$|^[0-9a-f]{6}$|^[0-9a-f]{8}$/i.test(Z))return this.#K(Z);try{let{ctx:$}=Y0(1,1);$.fillStyle="#000000",$.fillStyle=Z;let J=$.fillStyle;if(J.startsWith("#"))return this.#K(J);let j=J.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(j){let _=(q)=>Math.max(0,Math.min(255,Number(q))).toString(16).padStart(2,"0");return`#${_(j[1])}${_(j[2])}${_(j[3])}`.toUpperCase()}}catch{}return"#D9D9D9"}#L(){let Q=this.getAttribute("value"),Z=this.#U(Q),$=this.#N(Q);if(Q!==Z&&$>=1){this.setAttribute("value",Z);return}if(this.#Z){this.#z();let J=$<1?{type:"solid",color:Z,opacity:Math.round($*100)}:{type:"solid",color:Z};if(this.#Z.setAttribute("value",JSON.stringify(J)),this.#X)this.#Z.removeAttribute("alpha");else this.#Z.setAttribute("alpha","false");if(R(this,"disabled"))this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}if(this.#Q){if(this.#z(),this.#Q.setAttribute("background",Z),$<1)this.#Q.setAttribute("alpha",String($));else this.#Q.removeAttribute("alpha");if(R(this,"disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}}#z(){let Q=this.#q,Z=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",$=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";if(this.setAttribute("aria-disabled",Z?"true":"false"),this.setAttribute("aria-pressed",$?"true":"false"),Q==="add"||Q==="remove"){let G=this.querySelector("fig-button"),X=this.getAttribute("aria-label")||(Q==="add"?"Add color stop":"Remove color stop");if(G?.setAttribute("aria-label",X),Z)G?.setAttribute("disabled","");else G?.removeAttribute("disabled");return}let J=this.#Z||this.#Q;if(!J)return;let j=this.getAttribute("aria-label")||"Color stop",_=this.getAttribute("aria-labelledby"),q=this.getAttribute("aria-describedby");if(_)J.setAttribute("aria-labelledby",_),J.removeAttribute("aria-label");else J.setAttribute("aria-label",j),J.removeAttribute("aria-labelledby");if(q)J.setAttribute("aria-describedby",q);else J.removeAttribute("aria-describedby")}#O(Q,Z){let $=this.#U(Q?.color),J=this.#U(this.getAttribute("value"));if($!==J)this.setAttribute("value",$);else this.#L();let j={color:this.value};if(this.#X){if(Q?.opacity!==void 0)j.opacity=Q.opacity;else if(Q?.alpha!==void 0)j.opacity=Math.round(Q.alpha*100)}this.dispatchEvent(new CustomEvent(Z,{bubbles:!0,cancelable:!0,composed:!0,detail:j}))}#M(Q){Q.stopPropagation(),this.#O(Q.detail||{color:Q.target?.value},"input")}#F(Q){Q.stopPropagation(),this.#O(Q.detail||{color:Q.target?.value},"change")}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(!this.isConnected)return;switch(Q){case"control":this.#W();break;case"value":case"selected":case"disabled":case"aria-label":case"aria-labelledby":case"aria-describedby":this.#L(),this.#z();break}}get value(){return this.#U(this.getAttribute("value"))}set value(Q){if(Q===null||Q===void 0||Q===""){this.removeAttribute("value");return}this.setAttribute("value",this.#U(Q))}get selected(){return R(this,"selected")}set selected(Q){this.toggleAttribute("selected",Boolean(Q))}get disabled(){return R(this,"disabled")}set disabled(Q){this.toggleAttribute("disabled",Boolean(Q))}}customElements.define("fig-color-tip",U1);class L1 extends HTMLElement{static get observedAttributes(){return["selected","disabled"]}connectedCallback(){if(this.setAttribute("role","option"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.setAttribute("aria-selected",R(this,"selected")?"true":"false"),R(this,"disabled"))this.setAttribute("aria-disabled","true")}attributeChangedCallback(Q){if(Q==="selected")this.setAttribute("aria-selected",R(this,"selected")?"true":"false");if(Q==="disabled")if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")}}customElements.define("fig-choice",L1);class B1 extends HTMLElement{#Z=null;#Q=this.#F.bind(this);#j=this.#A.bind(this);#$=this.#B.bind(this);#J=null;#q=null;#_=null;#G=null;#X=null;#W=!1;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","columns","drag","layout","overflow","loop"]}get#Y(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#K(){let Q=this.getAttribute("drag");return Q===null||Q!=="false"}get#N(){return this.getAttribute("choice-element")||"fig-choice"}#U(){let Q=this.getAttribute("columns"),Z=Q===null?NaN:Number(Q);if(Number.isInteger(Z)&&Z>0)this.style.setProperty("--fig-chooser-grid-columns",String(Z));else this.style.removeProperty("--fig-chooser-grid-columns")}get choices(){return Array.from(this.querySelectorAll(`:scope > ${this.#N}`))}get selectedChoice(){return this.#Z}set selectedChoice(Q){if(Q&&!this.contains(Q))return;let Z=this.choices;for(let J of Z){let j=J===Q,_=R(J,"selected");if(j&&!_)J.setAttribute("selected","");else if(!j&&_)J.removeAttribute("selected")}this.#Z=Q;let $=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==$){if($)this.setAttribute("value",$)}this.#V(Q)}get value(){return this.#Z?.getAttribute("value")??""}set value(Q){if(Q===null||Q===void 0||Q==="")return;this.setAttribute("value",String(Q))}connectedCallback(){if(this.setAttribute("role","listbox"),this.shadowRoot)this.shadowRoot.replaceChildren();this.#U(),this.#S(),this.addEventListener("click",this.#Q),this.addEventListener("keydown",this.#j),this.addEventListener("scroll",this.#$),this.#E(),this.#T(),this.#y(),this.#P(),h(this,()=>{this.#z(),this.#B(),this.#L()})}#L(){let Q=()=>{if(!this.isConnected)return;if(this.#Z)this.#V(this.#Z,"auto")},Z=()=>{let $=this.querySelectorAll("img, video");for(let J of $){if(J.tagName==="IMG"?J.complete:J.readyState>=1)continue;let j=()=>{J.removeEventListener("load",j),J.removeEventListener("loadedmetadata",j),J.removeEventListener("error",j),Q()};J.addEventListener("load",j),J.addEventListener("loadedmetadata",j),J.addEventListener("error",j)}};requestAnimationFrame(()=>{Z(),Q()})}disconnectedCallback(){this.removeEventListener("click",this.#Q),this.removeEventListener("keydown",this.#j),this.removeEventListener("scroll",this.#$),this.#C(),this.#J?.disconnect(),this.#J=null,this.#q?.disconnect(),this.#q=null,this.#k()}attributeChangedCallback(Q,Z,$){if(Q==="value"&&$!==Z&&$)this.#O($);if(Q==="disabled"){let J=$!==null&&$!=="false",j=this.choices;for(let _ of j)if(J)_.setAttribute("aria-disabled","true"),_.setAttribute("tabindex","-1");else _.removeAttribute("aria-disabled"),_.setAttribute("tabindex","0")}if(Q==="choice-element")requestAnimationFrame(()=>this.#z());if(Q==="columns")this.#U(),this.#D();if(Q==="drag")if(this.#K)this.#T();else this.#C();if(Q==="overflow")this.#E(),requestAnimationFrame(()=>this.#B());if(Q==="layout"){if(this.#E(),$==="horizontal")this.scrollTop=0;else this.scrollLeft=0;this.#D()}}#z(){let Q=this.choices;if(!Q.length){this.#Z=null;return}let Z=this.getAttribute("value");if(Z&&this.#O(Z))return;let $=Q.find((J)=>R(J,"selected"));if($){this.selectedChoice=$;return}this.selectedChoice=Q[0]}#O(Q){let Z=this.choices;for(let $ of Z)if($.getAttribute("value")===Q)return this.selectedChoice=$,!0;return!1}#M(Q){let Z=this.#N,$=Q;while($&&$!==this){if($.matches(Z))return $;$=$.parentElement}return null}#F(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Z=this.#M(Q.target);if(!Z)return;if(Z.hasAttribute("disabled")&&Z.getAttribute("disabled")!=="false")return;this.selectedChoice=Z,this.#H()}#A(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Z=this.choices.filter((_)=>!_.hasAttribute("disabled")||_.getAttribute("disabled")==="false");if(!Z.length)return;let $=Z.indexOf(this.#Z),J=$,j=this.hasAttribute("loop");switch(Q.key){case"ArrowDown":case"ArrowRight":if(Q.preventDefault(),$<Z.length-1)J=$+1;else if(j)J=0;break;case"ArrowUp":case"ArrowLeft":if(Q.preventDefault(),$>0)J=$-1;else if(j)J=Z.length-1;break;case"Home":Q.preventDefault(),J=0;break;case"End":Q.preventDefault(),J=Z.length-1;break;case"Enter":case" ":if(Q.preventDefault(),document.activeElement?.matches(this.#N)){let _=this.#M(document.activeElement);if(_&&_!==this.#Z)this.selectedChoice=_,this.#H()}return;default:return}if(J!==$&&Z[J])this.selectedChoice=Z[J],Z[J].focus(),this.#H()}#H(){let Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#B(){if(this.#Y==="scrollbar")return;let Q=this.getAttribute("layout")==="horizontal";T0(this,this,Q?"x":"y")}#P(){this.#q?.disconnect(),this.#q=new ResizeObserver(()=>{this.#B(),this.#D()}),this.#q.observe(this)}#T(){if(this.#X?.bound)return;if(!this.#K)return;let Q=(_)=>{if(_.button!==0)return;if(_.target.closest("[data-fig-chooser-nav]"))return;if(!(this.getAttribute("layout")==="horizontal"?this.scrollWidth>this.clientWidth:this.scrollHeight>this.clientHeight))return;this.#X.active=!0,this.#X.didDrag=!1,this.#X.startX=_.clientX,this.#X.startY=_.clientY,this.#X.scrollLeft=this.scrollLeft,this.#X.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},Z=(_)=>{if(!this.#X.active)return;let q=this.getAttribute("layout")==="horizontal",G=_.clientX-this.#X.startX,X=_.clientY-this.#X.startY;if(!this.#X.didDrag&&Math.abs(q?G:X)>3)this.#X.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(_.pointerId);if(!this.#X.didDrag)return;if(q)this.scrollLeft=this.#X.scrollLeft-G;else this.scrollTop=this.#X.scrollTop-X},$=(_)=>{if(!this.#X.active)return;let q=this.#X.didDrag;if(this.#X.active=!1,this.#X.didDrag=!1,this.style.cursor="",this.style.userSelect="",_.pointerId!==void 0)try{this.releasePointerCapture(_.pointerId)}catch{}if(q)_.preventDefault(),_.stopPropagation()},J=(_)=>{if(this.#X?.suppressClick)_.stopPropagation(),_.preventDefault(),this.#X.suppressClick=!1},j=(_)=>{if(this.#X?.didDrag)this.#X.suppressClick=!0,setTimeout(()=>{if(this.#X)this.#X.suppressClick=!1},0)};this.#X={active:!1,didDrag:!1,suppressClick:!1,startX:0,startY:0,scrollLeft:0,scrollTop:0,bound:!0,onPointerDown:Q,onPointerMove:Z,onPointerUp:$,onClick:J,onPointerUpCapture:j},this.addEventListener("pointerdown",Q),window.addEventListener("pointermove",Z),window.addEventListener("pointerup",$),this.addEventListener("pointerup",j,!0),this.addEventListener("click",J,!0)}#C(){if(!this.#X?.bound)return;this.removeEventListener("pointerdown",this.#X.onPointerDown),window.removeEventListener("pointermove",this.#X.onPointerMove),window.removeEventListener("pointerup",this.#X.onPointerUp),this.removeEventListener("pointerup",this.#X.onPointerUpCapture,!0),this.removeEventListener("click",this.#X.onClick,!0),this.style.cursor="",this.style.userSelect="",this.#X=null}#S(){if(this.#W)return;let Q=this.querySelector(":scope > [data-fig-chooser-scroll]");if(!Q)return;this.#W=!0;try{let Z=Array.from(Q.childNodes);Q.replaceWith(...Z)}finally{this.#W=!1}}#E(){if(this.#Y==="scrollbar")this.#k();else this.#R()}#k(){this.#_?.remove(),this.#G?.remove(),this.#_=null,this.#G=null,this.classList.remove("overflow-start","overflow-end")}#R(){if(this.#_&&this.#G&&this.contains(this.#_)&&this.contains(this.#G))return;this.#_?.remove(),this.#G?.remove(),this.#_=null,this.#G=null;let Q=D0({owner:"chooser",startClass:"fig-chooser-nav-start",endClass:"fig-chooser-nav-end",chevronClass:"fig-chooser-nav-chevron",onStart:()=>this.#f(-1),onEnd:()=>this.#f(1)});this.#_=Q.start,this.#G=Q.end,this.prepend(this.#_),this.append(this.#G)}#f(Q){let Z=this.getAttribute("layout")==="horizontal";X0(this,Z?"x":"y",Q)}#D(){if(!this.#Z)return;this.#V(this.#Z,"auto")}#V(Q,Z="smooth"){if(!Q)return;requestAnimationFrame(()=>{if(!Q.isConnected)return;let $=this.scrollHeight>this.clientHeight,J=this.scrollWidth>this.clientWidth;if(!J&&!$)return;let j=Q.getBoundingClientRect(),_=this.getBoundingClientRect(),q={behavior:Z},G=!1;if($){let X=j.top-_.top+this.scrollTop,K=this.scrollHeight-this.clientHeight;q.top=Math.max(0,Math.min(X+j.height/2-this.clientHeight/2,K)),G=!0}if(J){let X=j.left-_.left+this.scrollLeft,K=this.scrollWidth-this.clientWidth;q.left=Math.max(0,Math.min(X+j.width/2-this.clientWidth/2,K)),G=!0}if(G)this.scrollTo(q);this.#B()})}#y(){this.#J?.disconnect(),this.#J=new MutationObserver(()=>{if(this.#W)return;this.#S(),this.#E();let Q=this.choices;if(this.#Z&&!Q.includes(this.#Z))this.#Z=null,this.#z();else if(!this.#Z&&Q.length)this.#z();requestAnimationFrame(()=>this.#B())}),this.#J.observe(this,{childList:!0,subtree:!1})}}customElements.define("fig-chooser",B1);class M1 extends HTMLElement{static observedAttributes=["color","selected","disabled","drag","drag-surface","drag-axes","drag-snapping","value","type","tip","hit-area","hit-area-mode","aria-label","aria-labelledby"];#Z=!1;#Q=!1;#j=null;#$=!1;#J=null;#q=null;#_=null;#G=null;get#X(){let Q=(this.getAttribute("tip")||"").trim().toLowerCase();return Q==="color"||Q==="add"||Q==="remove"?Q:null}get#W(){return!this.hasAttribute("data-no-color-picker")}get#Y(){let Q=this.getAttribute("drag");return Q!==null&&Q!=="false"}get#K(){let Q=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:Q.includes("x"),y:Q.includes("y")}}get#N(){let Q=this.getAttribute("drag-snapping");if(Q===null)return"false";let Z=Q.trim().toLowerCase();if(Z==="modifier")return"modifier";if(Z===""||Z==="true")return"true";return"false"}#U(Q){let Z=this.#N;if(Z==="true")return!0;if(Z==="modifier")return!!Q;return!1}#L(Q){if(Q<0.1)return 0;if(Q>0.9)return 1;if(Q>0.4&&Q<0.6)return 0.5;return Q}#z(Q,Z){if(Math.abs(Q-Z)<0.1){let J=(Q+Z)/2;return{x:J,y:J}}if(Math.abs(1-Q-Z)<0.1)return{x:Q,y:1-Q};return{x:Q,y:Z}}#O(){let Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){let Q=this.#O();if(!Q)return"0% 0%";let{px:Z,py:$}=this.#a(Q.getBoundingClientRect());return`${Math.round(Z*100)}% ${Math.round($*100)}%`}set value(Q){this.setAttribute("value",Q??"0% 0%")}#M(Q){let Z=Q==null?"":String(Q).trim();if(!Z)return{xPct:0,yPct:0};let $=Z.split(/[\s,]+/).filter(Boolean),J=(q)=>{if(!q)return 0;let G=q.includes("px"),X=q.includes("%"),K=parseFloat(q.replace(/[%px]/g,""));if(!Number.isFinite(K))return 0;if(G)return{px:K};if(X||Math.abs(K)>1)return Math.max(0,Math.min(100,K));return Math.max(0,Math.min(100,K*100))},j=J($[0]),_=J($[1]??$[0]);return{xToken:j,yToken:_}}#F(Q){let Z=this.#O();if(!Z)return;let{xToken:$,yToken:J}=this.#M(Q),j=Z.getBoundingClientRect(),_=(X,K)=>{if(X&&typeof X==="object"&&"px"in X)return Math.max(0,Math.min(K,X.px));return null},q=(X)=>{return`${typeof X==="number"?X:0}%`},G=this.#K;if(this.#A(G),G.x){let X=_($,j.width);this.style.left=X===null?q($):`${Math.round(X)}px`}if(G.y){let X=_(J,j.height);this.style.top=X===null?q(J):`${Math.round(X)}px`}}#A(Q=this.#K){this.style.setProperty("--fig-handle-position-translate",`${Q.x?"-50%":"0"} ${Q.y?"-50%":"0"}`)}#H(){this.#$=!0,this.setAttribute("value",this.value),this.#$=!1}get#B(){return this.getAttribute("hit-area-mode")||"handle"}#P(){let Q=this.getAttribute("hit-area");if(!Q)return null;let Z=Q.trim().split(/\s+/),$=0,J=0,j=!1,_=[];for(let q of Z){if(q==="circle"){j=!0;continue}let G=parseFloat(q);if(Number.isFinite(G))_.push(G)}if(_.length>=2)$=_[0],J=_[1];else if(_.length===1)$=_[0],J=_[0];else return null;return{vPad:$,hPad:J,circle:j}}#T(){let Q=this.#P();if(!Q){if(this.#G)this.#G.remove(),this.#G=null;this.style.removeProperty("--fig-handle-hit-area-size");return}if(!this.#G){let Z=document.createElement("div");Z.classList.add("fig-handle-hit-area"),Z.addEventListener("pointerdown",($)=>this.#C($)),this.prepend(Z),this.#G=Z}if(this.style.setProperty("--fig-handle-hit-area-size",String(Q.hPad*2)),Q.circle)this.#G.style.borderRadius="50%";else this.#G.style.borderRadius="inherit"}#C(Q){if(R(this,"disabled"))return;if(Q.target!==this.#G)return;if(this.#B==="delegate")Q.preventDefault(),Q.stopPropagation(),this.dispatchEvent(new CustomEvent("hitareadown",{bubbles:!0,detail:{originalEvent:Q}}));else this.#y(Q)}connectedCallback(){this.#D(),this.#f(),this.#T(),this.addEventListener("click",this.#S),document.addEventListener("pointerdown",this.#E),document.addEventListener("keydown",this.#k);let Q=this.getAttribute("value");if(Q)this.#F(Q);if(this.#X)this.#m()}disconnectedCallback(){if(this.#V(),this.#u(),this.#I(),this.#h(),this.#G)this.#G.remove(),this.#G=null;this.removeEventListener("click",this.#S),document.removeEventListener("pointerdown",this.#E),document.removeEventListener("keydown",this.#k)}select(){if(R(this,"disabled"))return;this.setAttribute("selected","")}deselect(){this.removeAttribute("selected")}#S=(Q)=>{if(this.#Q){this.#Q=!1;return}if(this.getAttribute("type")==="color"&&this.#W&&!this.#X){this.#w();return}this.select()};#E=(Q)=>{if(this.contains(Q.target))return;if((this.#J||this.#q)&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#k=(Q)=>{if(Q.defaultPrevented)return;if(Q.target===this&&this.#Y&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(Q.key)){if(this.#R(Q)){if(Q.preventDefault(),!R(this,"selected"))this.select()}return}if(Q.key!=="Enter"&&Q.key!==" ")return;if(Q.target===this&&!R(this,"selected")){if(Q.preventDefault(),this.getAttribute("type")==="color"&&this.#W&&!this.#X)this.#w();else this.select();return}if(!R(this,"selected"))return;if(this.getAttribute("type")!=="color")return;if(!this.#W)return;if(Q.preventDefault(),!this.#X)this.#w()};#R(Q){if(R(this,"disabled"))return!1;let Z=this.#O();if(!Z)return!1;let $=Z.getBoundingClientRect();if($.width<=0||$.height<=0)return!1;let J=this.#K,j=this.#a($),_=Q.shiftKey?0.1:0.01,q=j.px,G=j.py;switch(Q.key){case"ArrowLeft":if(!J.x)return!1;q-=_;break;case"ArrowRight":if(!J.x)return!1;q+=_;break;case"ArrowUp":if(!J.y)return!1;G-=_;break;case"ArrowDown":if(!J.y)return!1;G+=_;break;case"Home":if(J.x)q=0;if(J.y)G=0;break;case"End":if(J.x)q=1;if(J.y)G=1;break;default:return!1}if(q=Math.max(0,Math.min(1,q)),G=Math.max(0,Math.min(1,G)),this.#A(J),J.x)this.style.left=`${Math.round(q*$.width)}px`;if(J.y)this.style.top=`${Math.round(G*$.height)}px`;this.#H();let X={...this.#a($),shiftKey:Q.shiftKey,keyboard:!0};return this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:X})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:X})),!0}attributeChangedCallback(Q,Z,$){if(Q==="color"){if(!$||$==="false"||$==="true")this.style.removeProperty("--fill");else this.style.setProperty("--fill",$);if(this.#J&&this.#X==="color"&&$)this.#J.setAttribute("value",$);this.#v()}if(Q==="drag")this.#f();if(Q==="hit-area")this.#T();if(Q==="selected")this.#t();if(Q==="selected"||Q==="disabled"||Q==="type"||Q==="tip"||Q==="aria-label"||Q==="aria-labelledby")this.#D();if(Q==="value"&&!this.#$&&!this.#Z)this.#F($);if(Q==="tip"){if(this.#u(),this.#X)this.#I(),this.#m()}}#f(){if(this.#Y&&!this.#j)this.#j=(Q)=>this.#y(Q),this.addEventListener("pointerdown",this.#j);else if(!this.#Y&&this.#j)this.#V()}#D(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Z=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";if(!this.hasAttribute("role"))this.setAttribute("role","button");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex",Q?"-1":"0");else if(Q)this.setAttribute("tabindex","-1");if(this.setAttribute("aria-disabled",Q?"true":"false"),this.setAttribute("aria-pressed",Z?"true":"false"),!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby")){let $=this.#X||this.getAttribute("type")||"handle";this.setAttribute("aria-label",$==="color"?"Color handle":$==="add"?"Add handle":$==="remove"?"Remove handle":"Handle")}}#V(){if(this.#j)this.removeEventListener("pointerdown",this.#j),this.#j=null;this.#Z=!1}#y(Q){if(!this.#Y||R(this,"disabled"))return;Q.preventDefault();let Z=this.#O();if(!Z)return;this.#Z=!0;let $=this.#K,J=null,j=this.getBoundingClientRect(),_=j.left+j.width/2,q=j.top+j.height/2,G=Q.clientX-_,X=Q.clientY-q,K=Q.clientX,W=Q.clientY,F=3,N=(U,T,H=!1)=>{let B=Z.getBoundingClientRect();J=B;let M=this.#a(B),P=U-G-B.left,S=T-X-B.top,f=Math.max(0,Math.min(B.width,P)),x=Math.max(0,Math.min(B.height,S)),k=B.width>0?$.x?f/B.width:M.px:0.5,g=B.height>0?$.y?x/B.height:M.py:0.5;if(this.#U(H)){if($.x)k=this.#L(k);if($.y)g=this.#L(g);if($.x&&$.y){let i=this.#z(k,g);k=i.x,g=i.y}}if(this.#A($),$.x)this.style.left=`${Math.round(Math.max(0,Math.min(B.width,k*B.width)))}px`;if($.y)this.style.top=`${Math.round(Math.max(0,Math.min(B.height,g*B.height)))}px`},A=(U)=>{if(!this.#Z)return;if(!this.#Q){let T=U.clientX-K,H=U.clientY-W;if(T*T+H*H<F*F)return;if(this.#e(),this.classList.add("dragging"),this.style.cursor="grabbing",!R(this,"selected"))this.select()}this.#Q=!0,N(U.clientX,U.clientY,U.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#a(J),shiftKey:U.shiftKey}}))},L=(U)=>{if(this.#Z=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",A),window.removeEventListener("pointerup",L),this.#Q){N(U.clientX,U.clientY,U.shiftKey),this.#H(),this.#F(this.getAttribute("value")),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#a(J)}));let T=(H)=>{H.stopPropagation(),H.preventDefault()};this.addEventListener("click",T,{capture:!0,once:!0})}else this.#H();this.#Q=!1};window.addEventListener("pointermove",A),window.addEventListener("pointerup",L)}showColorTip(){if(!this.#X)return;if(this.#J){this.#J.style.display="";return}this.#m()}hideColorTip(){if(!this.#J)return;this.#J.style.display="none"}#g(Q=this.getAttribute("color")){let Z={color:"#D9D9D9",opacity:100},$=String(Q||"").trim();if(!$)return Z;let J=(_)=>{let q=_.replace("#","").trim();if(q.length===3||q.length===4){let[G,X,K,W]=q;return{color:`#${G}${G}${X}${X}${K}${K}`.toUpperCase(),opacity:W?Math.round(parseInt(`${W}${W}`,16)/255*100):100}}if(q.length===6||q.length===8)return{color:`#${q.slice(0,6)}`.toUpperCase(),opacity:q.length===8?Math.round(parseInt(q.slice(6,8),16)/255*100):100};return Z},j=(_,q,G)=>{let X=(K)=>Math.max(0,Math.min(255,Math.round(Number(K)))).toString(16).padStart(2,"0");return`#${X(_)}${X(q)}${X(G)}`.toUpperCase()};if($.startsWith("#"))return J($);try{let{ctx:_}=Y0(1,1);_.fillStyle="#000000",_.fillStyle=$;let q=_.fillStyle;if(q.startsWith("#"))return J(q);let G=q.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?/i);if(G)return{color:j(G[1],G[2],G[3]),opacity:G[4]!==void 0?Math.round(parseFloat(G[4])*100):100}}catch{}return Z}#b(){let{color:Q,opacity:Z}=this.#g();return JSON.stringify(Z<100?{type:"solid",color:Q,opacity:Z}:{type:"solid",color:Q})}#v(){if(!this.#q)return;this.#q.setAttribute("value",this.#b())}#x(){if(!c())return null;if(this.#q)return this.#q;let Q=document.createElement("fig-fill-picker");Q.setAttribute("mode","solid"),Q.setAttribute("alpha","true"),Q.setAttribute("dialog-offset","8 8"),Q.setAttribute("value",this.#b()),Q.anchorElement=this;let Z=document.createElement("span");return Z.hidden=!0,Q.appendChild(Z),Q.addEventListener("input",this.#p),Q.addEventListener("change",this.#l),Q.addEventListener("close",this.#j0),this.appendChild(Q),this.#q=Q,Q}#w(){if(R(this,"disabled"))return;let Q=this.#x();if(!Q){this.#c();return}this.setAttribute("selected",""),this.#v(),Q.open()}#I(){if(!this.#q)return;this.#q.removeEventListener("input",this.#p),this.#q.removeEventListener("change",this.#l),this.#q.removeEventListener("close",this.#j0),this.#q.close(),this.#q.remove(),this.#q=null,this.removeAttribute("selected")}#d(){if(this.#_)return this.#_;let Q=document.createElement("input");return Q.type="color",Q.tabIndex=-1,Q.setAttribute("aria-hidden","true"),Q.style.position="fixed",Q.style.inlineSize="1px",Q.style.blockSize="1px",Q.style.opacity="0",Q.style.pointerEvents="none",Q.addEventListener("input",this.#$0),Q.addEventListener("change",this.#J0),this.appendChild(Q),this.#_=Q,Q}#c(){let Q=this.#d(),{color:Z}=this.#g();Q.value=Z,this.setAttribute("selected",""),Q.click()}#h(){if(!this.#_)return;this.#_.removeEventListener("input",this.#$0),this.#_.removeEventListener("change",this.#J0),this.#_.remove(),this.#_=null}#e(){if(this.getAttribute("type")!=="color")return;this.#q?.close()}#m(){let Q=this.#X;if(!Q)return;if(this.#J)return;let Z=document.createElement("fig-color-tip");if(Q==="add"||Q==="remove")Z.setAttribute("control",Q);else Z.setAttribute("value",this.getAttribute("color")||"#D9D9D9"),Z.setAttribute("alpha","true");Z.addEventListener("input",this.#n),Z.addEventListener("change",this.#i),Z.addEventListener("add",this.#Z0),Z.addEventListener("remove",this.#Z0),this.appendChild(Z),this.#J=Z,this.#t()}#u(){if(!this.#J)return;this.#J.removeEventListener("input",this.#n),this.#J.removeEventListener("change",this.#i),this.#J.removeEventListener("add",this.#Z0),this.#J.removeEventListener("remove",this.#Z0),this.#J.remove(),this.#J=null}#t(){if(!this.#J||this.#X!=="color")return;let Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";this.#J.toggleAttribute("selected",Q)}#r(Q,Z){if(Z===void 0||Z>=100)return Q;let{r:$,g:J,b:j}=s(Q);return`rgba(${$}, ${J}, ${j}, ${Z/100})`}#s(Q){if(!Q?.color)return null;let Z=Q.opacity!==void 0?Q.opacity:Q.alpha!==void 0?Math.round(Q.alpha*100):void 0;return{color:Q.color,opacity:Z}}#p=(Q)=>{Q.stopPropagation();let Z=this.#s(Q.detail);if(!Z)return;this.setAttribute("color",this.#r(Z.color,Z.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Z}))};#l=(Q)=>{Q.stopPropagation();let Z=this.#s(Q.detail);if(!Z)return;this.setAttribute("color",this.#r(Z.color,Z.opacity)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Z}))};#Q0(Q){let{opacity:Z}=this.#g();return Z<100?{color:Q,opacity:Z}:{color:Q}}#$0=(Q)=>{Q.stopPropagation();let Z=this.#Q0(Q.target.value);this.setAttribute("color",this.#r(Z.color,Z.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Z}))};#J0=(Q)=>{Q.stopPropagation();let Z=this.#Q0(Q.target.value);this.setAttribute("color",this.#r(Z.color,Z.opacity)),this.removeAttribute("selected"),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Z}))};#j0=()=>{this.removeAttribute("selected")};#n=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#r(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#i=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#r(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#Z0=(Q)=>{Q.stopPropagation(),this.dispatchEvent(new CustomEvent(Q.type,{bubbles:!0,composed:!0}))};#a(Q){let Z=Q||this.#O()?.getBoundingClientRect();if(!Z)return{x:0,y:0,px:0,py:0};let $=this.getBoundingClientRect(),J=this.offsetWidth/2,j=this.offsetHeight/2,_=$.left-Z.left,q=$.top-Z.top,G=_+J,X=q+j,K=Z.width>0?G/Z.width:0,W=Z.height>0?X/Z.height:0;return{x:_,y:q,px:K,py:W}}}customElements.define("fig-handle",M1);class O1 extends HTMLElement{static get observedAttributes(){return["value","disabled"]}get value(){return this.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q??"")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","menuitem");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#Z()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="disabled")this.#Z()}#Z(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}customElements.define("fig-menu-item",O1);class F1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","separator")}}customElements.define("fig-menu-separator",F1);class A1 extends HTMLElement{#Z=null;#Q=null;#j=null;#$=null;#J;#q;#_;#G;#X;#W=-1;static get observedAttributes(){return["position","offset","closedby","disabled","open","trigger"]}constructor(){super();this.#J=this.#B.bind(this),this.#q=this.#P.bind(this),this.#_=this.#C.bind(this),this.#G=this.#S.bind(this),this.#X=this.#E.bind(this)}get value(){return this.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q??"")}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(this.#Y(),this.#N(),this.#U(),this.#L(),this.#O(),this.#H(),this.open)this.#R()}disconnectedCallback(){if(this.#z(),document.removeEventListener("keydown",this.#G,!0),this.#$)this.#$.disconnect(),this.#$=null;if(this.#Z){this.#Z.removeEventListener("close",this.#X);let Q=Array.from(this.#Z.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let Z of Q)this.insertBefore(Z,this.#Z);this.#Z.remove(),this.#Z=null}}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="open"){if($===null||$==="false")this.#f();else this.#R();return}if(Q==="disabled"){if(this.#Q)if($!==null&&$!=="false")this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");return}if(this.#Z&&(Q==="position"||Q==="offset"||Q==="closedby"))if($!==null)this.#Z.setAttribute(Q,$);else this.#Z.removeAttribute(Q)}#Y(){this.#Q=this.querySelector("[fig-menu-trigger]")||this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)")}#K(){return(this.getAttribute("trigger")||"").toLowerCase()==="contextmenu"||this.hasAttribute("contextmenu")}#N(){this.#Z=document.createElement("dialog",{is:"fig-popup"}),this.#Z.setAttribute("is","fig-popup"),this.#Z.setAttribute("theme","menu"),this.#Z.setAttribute("role","menu"),this.#Z.setAttribute("id",this.#Z.getAttribute("id")||b());let Q=this.getAttribute("position")||"bottom left";this.#Z.setAttribute("position",Q);let Z=this.getAttribute("offset");if(Z)this.#Z.setAttribute("offset",Z);let $=this.getAttribute("closedby");if($)this.#Z.setAttribute("closedby",$);if(this.#Q)this.#Z.anchor=this.#Q;this.#Z.addEventListener("close",this.#X),this.appendChild(this.#Z)}#U(){let Q=Array.from(this.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let Z of Q)this.#Z.appendChild(Z)}#L(){if(this.addEventListener("keydown",this.#G),this.#Q)this.#Q.addEventListener("click",this.#J),this.#Q.addEventListener("contextmenu",this.#q),this.#Q.setAttribute("aria-haspopup","menu"),this.#Q.setAttribute("aria-expanded","false"),this.#Q.setAttribute("aria-controls",this.#Z.getAttribute("id"));if(this.#Z)this.#Z.addEventListener("click",this.#_),this.#Z.addEventListener("keydown",this.#G)}#z(){if(this.removeEventListener("keydown",this.#G),this.#Q)this.#Q.removeEventListener("click",this.#J),this.#Q.removeEventListener("contextmenu",this.#q);if(this.#Z)this.#Z.removeEventListener("click",this.#_),this.#Z.removeEventListener("keydown",this.#G)}#O(){this.#$=new MutationObserver((Q)=>{for(let Z of Q)for(let $ of Z.addedNodes){if($.nodeType!==1||$===this.#Z)continue;if(($.tagName==="FIG-MENU-ITEM"||$.tagName==="FIG-MENU-SEPARATOR")&&$.parentElement===this)this.#Z.appendChild($);else if(!this.#Q&&$.parentElement===this){if(this.#Y(),this.#Q)this.#Q.addEventListener("click",this.#J),this.#Q.addEventListener("contextmenu",this.#q),this.#Q.setAttribute("aria-haspopup","menu"),this.#Q.setAttribute("aria-expanded","false"),this.#Q.setAttribute("aria-controls",this.#Z.getAttribute("id")),this.#Z.anchor=this.#Q,this.#H()}}}),this.#$.observe(this,{childList:!0})}#M(){if(!this.#Z)return[];return Array.from(this.#Z.querySelectorAll("fig-menu-item")).filter((Q)=>!Q.hasAttribute("disabled")||Q.getAttribute("disabled")==="false")}#F(){let Q=this.#M();if(!Q.length){this.#W=-1;return}let Z=document.activeElement,$=Q.findIndex((J)=>J===Z||J.contains(Z));this.#W=$>=0?$:-1}#A(Q){let Z=this.#M();if(!Z.length)return;let $=(Q+Z.length)%Z.length;this.#W=$,Z[$].focus()}#H(){if(!this.#Q)return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.#Q.setAttribute("disabled",""),this.#Q.setAttribute("aria-disabled","true"),this.#Q.setAttribute("aria-expanded","false");else this.#Q.removeAttribute("disabled"),this.#Q.removeAttribute("aria-disabled")}#B(Q){if(this.#K())return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;Q.stopPropagation();let Z=this.#Z?.matches?.(":open")??!1;if(this.open&&!Z)this.removeAttribute("open");if(this.open&&Z)this.open=!1;else{if(this.#Z&&this.#Q)this.#Z.anchor=this.#Q;this.open=!0}}#P(Q){if(!this.#K())return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;Q.preventDefault(),Q.stopPropagation(),this.#T(Q.clientX,Q.clientY)}#T(Q,Z){let $=!1,J=0,j=()=>{window.clearTimeout(J),window.removeEventListener("pointerup",_,!0),window.removeEventListener("pointercancel",q,!0)},_=()=>{if($)return;$=!0,j(),requestAnimationFrame(()=>this.showAt(Q,Z))},q=()=>{if($)return;$=!0,j()};window.addEventListener("pointerup",_,{once:!0,capture:!0}),window.addEventListener("pointercancel",q,{once:!0,capture:!0}),J=window.setTimeout(_,180)}#C(Q){let Z=Q.target.closest("fig-menu-item");if(!Z)return;if(Z.hasAttribute("disabled")&&Z.getAttribute("disabled")!=="false")return;this.#k(Z)}#S(Q){if(Q.currentTarget===document&&Q.key!=="Escape")return;if(Q.currentTarget===this&&this.#Z?.contains(Q.target))return;if(!this.open||!this.#Z?.matches?.(":open")){if(this.#Q?.contains(Q.target)&&(Q.key==="ArrowDown"||Q.key==="Enter"||Q.key===" ")){if(Q.preventDefault(),this.#Z&&this.#Q)this.#Z.anchor=this.#Q;this.open=!0,requestAnimationFrame(()=>this.#A(0))}return}let Z=this.#M();if(!Z.length)return;switch(Q.key){case"ArrowDown":{Q.preventDefault(),this.#F(),this.#A(this.#W+1);break}case"ArrowUp":{Q.preventDefault(),this.#F(),this.#A(this.#W-1);break}case"Home":{Q.preventDefault(),this.#A(0);break}case"End":{Q.preventDefault(),this.#A(Z.length-1);break}case"Escape":{Q.preventDefault(),this.open=!1,this.#Q?.focus();break}case"Enter":case" ":{this.#F();let $=Z[this.#W];if(!$)return;Q.preventDefault(),this.#k($);break}}}#E(){if(this.hasAttribute("open"))this.removeAttribute("open");if(this.#Q)this.#Q.setAttribute("aria-expanded","false"),this.#Q.focus();this.#W=-1}#k(Q){let Z=Q.getAttribute("value")||Q.textContent.trim();this.setAttribute("value",Z),this.dispatchEvent(new CustomEvent("change",{detail:{value:Z,item:Q},bubbles:!0})),this.open=!1}showAt(Q,Z){if(this.#j={getBoundingClientRect:()=>({width:0,height:0,top:Z,right:Q,bottom:Z,left:Q,x:Q,y:Z})},this.#Z)this.#Z.anchor=this.#j;if(this.open)this.open=!1;requestAnimationFrame(()=>{this.open=!0})}#R(){if(!this.#Z)return;if(this.#Z.open=!0,document.addEventListener("keydown",this.#G,!0),this.#Q)this.#Q.setAttribute("aria-expanded","true");this.#W=-1,requestAnimationFrame(()=>{if(!this.#Q?.matches?.(":focus-visible"))return;this.#A(0)})}#f(){if(!this.#Z)return;document.removeEventListener("keydown",this.#G,!0),this.#Z.open=!1,this.#Q?.setAttribute("aria-expanded","false")}}customElements.define("fig-menu",A1);

package/fig.js

@@ -15090,7 +15090,10 @@ const FIG_ICON_TOKENS = {
   chevron: "--icon-16-chevron",
   checkmark: "--icon-16-checkmark",
   reset: "--icon-16-reset",
-  "arrow-left": "--icon-16-arrow-left",
+  "arrow-left": {
+    medium: "--icon-24-arrow-left",
+    small: "--icon-16-arrow-left",
+  },
   steppers: "--icon-24-steppers",
   eyedropper: "--icon-24-eyedropper",
   add: "--icon-24-add",
@@ -15103,6 +15106,9 @@ const FIG_ICON_TOKENS = {
   play: "--icon-24-play",
   pause: "--icon-24-pause",
   search: "--icon-24-search",
+  edit: { medium: "--icon-24-edit", small: "--icon-16-edit" },
+  settings: { medium: "--icon-24-settings", small: "--icon-16-settings" },
+  more: { medium: "--icon-24-more", small: "--icon-16-more" },
   visible: { medium: "--icon-24-visible", small: "--icon-16-visible" },
   hidden: { medium: "--icon-24-hidden", small: "--icon-16-hidden" },
 };

package/package.json

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