@rogieking/figui3 6.24.1 → 6.24.3

package/dist/fig.js

@@ -359,6 +359,6 @@ var y1=(Q,Z)=>()=>(Q&&(Z=Q(Q=0)),Z);var w1={};var T0=y1(()=>{/*! Vendored from @
         <circle class="fig-interpolation-swatch-rim" cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="${Q}"/>
       </svg>
       <div class="fig-interpolation-swatch-fill" aria-hidden="true"></div>
-    `,this.#X=this.querySelector(".fig-interpolation-swatch-svg"),this.#W=this.querySelector(".fig-interpolation-swatch-fill"),this.#Y=!0}#S(){if(!this.#W)return;let Q=this.#L();if(this.#X)this.#X.style.display=Q?"":"none";let Z=Q?(()=>{let{startDeg:J,sweepDeg:j}=this.#z();return this.#M(J,j)})():this.#D(),$=this.#T(Z);this.#W.style.setProperty("-webkit-mask-image",$),this.#W.style.maskImage=$,this.#W.style.background=this.#R()}}z("fig-interpolation-swatch",C);var l1={chevron:"--icon-16-chevron",checkmark:"--icon-16-checkmark",reset:{medium:"--icon-24-reset",small:"--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",adjust:{medium:"--icon-24-adjust",small:"--icon-16-adjust"},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",download:"--icon-24-download",upload:"--icon-24-upload",sun:"--icon-24-sun",moon:"--icon-24-moon",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 a1(Q,Z="medium"){let $=Q&&l1[Q];if(!$)return"";let J=typeof $==="string"?$:$[Z==="small"?"small":"medium"];return J?`var(${J})`:""}class z1 extends HTMLElement{static get observedAttributes(){return["name","size","color"]}connectedCallback(){this.#Q()}attributeChangedCallback(Q,Z,$){if(Z!==$)this.#Q()}#Q(){let Q=this.getAttribute("name"),Z=this.getAttribute("size")||"medium",$=a1(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")}}z("fig-icon",z1);class H1 extends HTMLElement{}z("fig-content",H1);class A1 extends HTMLElement{}z("fig-tab-content",A1);class R1 extends HTMLElement{}z("fig-button-combo",R1);class D1 extends HTMLElement{}z("fig-input-combo",D1);class T1 extends HTMLElement{#Q=null;#Z=null;#$=null;#J=this.#B.bind(this);#j=this.#M.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.#N)}#_(){if(this.#Q)this.#Q.removeEventListener("input",this.#J),this.#Q.removeEventListener("change",this.#j);if(this.#Z)this.#Z.removeEventListener("input",this.#J),this.#Z.removeEventListener("change",this.#j);if(this.#$)this.#$.disconnect(),this.#$=null}#Y(){if(this.#$)this.#$.disconnect(),this.#$=null;if(!this.#Z)return;this.#$=new MutationObserver(()=>{if(this.#Z?.hasAttribute("selected")&&this.#Z.getAttribute("selected")!=="false"){if(!this.hasAttribute("selected"))this.setAttribute("selected","")}else if(this.hasAttribute("selected"))this.removeAttribute("selected")}),this.#$.observe(this.#Z,{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 X=Q==="add"?"add":"minus",Y=this.getAttribute("aria-label")||(Q==="add"?"Add color stop":"Remove color stop");this.innerHTML=`<fig-button icon variant="ghost" aria-label="${v(Y)}"><fig-icon name="${X}"></fig-icon></fig-button>`,this.#Q=null,this.#Z=null,this.addEventListener("click",this.#N),this.#F();return}this.removeEventListener("click",this.#N);let Z=(this.getAttribute("value")||"").trim(),$=this.#U(Z),J=this.#G(Z),j=this.#X?"":'alpha="false"',q=J<1?JSON.stringify({type:"solid",color:$,opacity:Math.round(J*100)}):JSON.stringify({type:"solid",color:$}),_=J<1?` alpha="${J}"`:"";if(this.innerHTML=o()?`<fig-fill-picker mode="solid" ${j} value='${q}'>
+    `,this.#X=this.querySelector(".fig-interpolation-swatch-svg"),this.#W=this.querySelector(".fig-interpolation-swatch-fill"),this.#Y=!0}#S(){if(!this.#W)return;let Q=this.#L();if(this.#X)this.#X.style.display=Q?"":"none";let Z=Q?(()=>{let{startDeg:J,sweepDeg:j}=this.#z();return this.#M(J,j)})():this.#D(),$=this.#T(Z);this.#W.style.setProperty("-webkit-mask-image",$),this.#W.style.maskImage=$,this.#W.style.background=this.#R()}}z("fig-interpolation-swatch",C);var l1={chevron:"--icon-16-chevron",checkmark:"--icon-16-checkmark",reset:{medium:"--icon-24-reset",small:"--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",send:{medium:"--icon-24-send",small:"--icon-16-send"},adjust:{medium:"--icon-24-adjust",small:"--icon-16-adjust"},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",download:"--icon-24-download",upload:"--icon-24-upload",sun:"--icon-24-sun",moon:"--icon-24-moon",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 a1(Q,Z="medium"){let $=Q&&l1[Q];if(!$)return"";let J=typeof $==="string"?$:$[Z==="small"?"small":"medium"];return J?`var(${J})`:""}class z1 extends HTMLElement{static get observedAttributes(){return["name","size","color"]}connectedCallback(){this.#Q()}attributeChangedCallback(Q,Z,$){if(Z!==$)this.#Q()}#Q(){let Q=this.getAttribute("name"),Z=this.getAttribute("size")||"medium",$=a1(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")}}z("fig-icon",z1);class H1 extends HTMLElement{}z("fig-content",H1);class A1 extends HTMLElement{}z("fig-tab-content",A1);class R1 extends HTMLElement{}z("fig-button-combo",R1);class D1 extends HTMLElement{}z("fig-input-combo",D1);class T1 extends HTMLElement{#Q=null;#Z=null;#$=null;#J=this.#B.bind(this);#j=this.#M.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.#N)}#_(){if(this.#Q)this.#Q.removeEventListener("input",this.#J),this.#Q.removeEventListener("change",this.#j);if(this.#Z)this.#Z.removeEventListener("input",this.#J),this.#Z.removeEventListener("change",this.#j);if(this.#$)this.#$.disconnect(),this.#$=null}#Y(){if(this.#$)this.#$.disconnect(),this.#$=null;if(!this.#Z)return;this.#$=new MutationObserver(()=>{if(this.#Z?.hasAttribute("selected")&&this.#Z.getAttribute("selected")!=="false"){if(!this.hasAttribute("selected"))this.setAttribute("selected","")}else if(this.hasAttribute("selected"))this.removeAttribute("selected")}),this.#$.observe(this.#Z,{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 X=Q==="add"?"add":"minus",Y=this.getAttribute("aria-label")||(Q==="add"?"Add color stop":"Remove color stop");this.innerHTML=`<fig-button icon variant="ghost" aria-label="${v(Y)}"><fig-icon name="${X}"></fig-icon></fig-button>`,this.#Q=null,this.#Z=null,this.addEventListener("click",this.#N),this.#F();return}this.removeEventListener("click",this.#N);let Z=(this.getAttribute("value")||"").trim(),$=this.#U(Z),J=this.#G(Z),j=this.#X?"":'alpha="false"',q=J<1?JSON.stringify({type:"solid",color:$,opacity:Math.round(J*100)}):JSON.stringify({type:"solid",color:$}),_=J<1?` alpha="${J}"`:"";if(this.innerHTML=o()?`<fig-fill-picker mode="solid" ${j} value='${q}'>
           <fig-swatch background="${$}"${_}></fig-swatch>
         </fig-fill-picker>`:`<fig-swatch background="${$}"${_}></fig-swatch>`,this.#Q=this.querySelector("fig-fill-picker"),this.#Z=this.querySelector("fig-swatch"),this.#_(),this.#Q?.addEventListener("input",this.#J),this.#Q?.addEventListener("change",this.#j),!this.#Q)this.#Z?.addEventListener("input",this.#J),this.#Z?.addEventListener("change",this.#j);this.#Y(),this.#F()}#N=()=>{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"}#G(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:$}=O0(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(_))).toString(16).padStart(2,"0");return`#${q(j[1])}${q(j[2])}${q(j[3])}`.toUpperCase()}}catch{}return"#D9D9D9"}#L(){let Q=this.getAttribute("value"),Z=this.#U(Q),$=this.#G(Q);if(Q!==Z&&$>=1){this.setAttribute("value",Z);return}if(this.#Q){this.#F();let J=$<1?{type:"solid",color:Z,opacity:Math.round($*100)}:{type:"solid",color:Z};if(this.#Q.setAttribute("value",JSON.stringify(J)),this.#X)this.#Q.removeAttribute("alpha");else this.#Q.setAttribute("alpha","false");if(F(this,"disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}if(this.#Z){if(this.#F(),this.#Z.setAttribute("background",Z),$<1)this.#Z.setAttribute("alpha",String($));else this.#Z.removeAttribute("alpha");if(F(this,"disabled"))this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}}#F(){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 X=this.querySelector("fig-button"),Y=this.getAttribute("aria-label")||(Q==="add"?"Add color stop":"Remove color stop");if(X?.setAttribute("aria-label",Y),Z)X?.setAttribute("disabled","");else X?.removeAttribute("disabled");return}let J=this.#Q||this.#Z;if(!J)return;let j=this.getAttribute("aria-label")||"Color stop",q=this.getAttribute("aria-labelledby"),_=this.getAttribute("aria-describedby");if(q)J.setAttribute("aria-labelledby",q),J.removeAttribute("aria-label");else J.setAttribute("aria-label",j),J.removeAttribute("aria-labelledby");if(_)J.setAttribute("aria-describedby",_);else J.removeAttribute("aria-describedby")}#z(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}))}#B(Q){Q.stopPropagation(),this.#z(Q.detail||{color:Q.target?.value},"input")}#M(Q){Q.stopPropagation(),this.#z(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.#F();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 F(this,"selected")}set selected(Q){this.toggleAttribute("selected",Boolean(Q))}get disabled(){return F(this,"disabled")}set disabled(Q){this.toggleAttribute("disabled",Boolean(Q))}}z("fig-color-tip",T1);class P1 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",F(this,"selected")?"true":"false"),F(this,"disabled"))this.setAttribute("aria-disabled","true")}attributeChangedCallback(Q){if(Q==="selected")this.setAttribute("aria-selected",F(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")}}z("fig-choice",P1);class E1 extends HTMLElement{#Q=null;#Z=this.#D.bind(this);#$=this.#T.bind(this);#J=this.#O.bind(this);#j=null;#q=null;#_=null;#Y=null;#X=null;#W=!1;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","columns","drag","layout","overflow","loop"]}get#N(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#K(){let Q=this.getAttribute("drag");return Q===null||Q!=="false"}get#G(){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.#G}`))}get selectedChoice(){return this.#Q}set selectedChoice(Q){if(Q&&!this.contains(Q))return;let Z=this.choices;for(let J of Z){let j=J===Q,q=F(J,"selected");if(j&&!q)J.setAttribute("selected","");else if(!j&&q)J.removeAttribute("selected")}this.#Q=Q;let $=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==$){if($)this.setAttribute("value",$)}this.#y(Q)}get value(){return this.#Q?.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.#f(),this.addEventListener("click",this.#Z),this.addEventListener("keydown",this.#$),this.addEventListener("scroll",this.#J),this.#I(),this.#P(),this.#v(),this.#R(),this.#z(),c(this,()=>{this.#F(),this.#O(),this.#L()})}#L(){let Q=()=>{if(!this.isConnected)return;if(this.#Q)this.#y(this.#Q,"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.#Z),this.removeEventListener("keydown",this.#$),this.removeEventListener("scroll",this.#J),this.#S(),this.#j?.disconnect(),this.#j=null,this.#q?.disconnect(),this.#q=null,this.#A()}attributeChangedCallback(Q,Z,$){if(Q==="value"&&$!==Z&&$)this.#B($);if(Q==="disabled")this.#z();if(Q==="choice-element")requestAnimationFrame(()=>this.#F());if(Q==="columns")this.#U(),this.#k();if(Q==="drag")if(this.#K)this.#P();else this.#S();if(Q==="overflow")this.#I(),requestAnimationFrame(()=>this.#O());if(Q==="layout"){if(this.#I(),$==="horizontal")this.scrollTop=0;else this.scrollLeft=0;this.#k()}}#F(){let Q=this.choices;if(!Q.length){this.#Q=null;return}let Z=this.getAttribute("value");if(Z&&this.#B(Z))return;let $=Q.find((J)=>F(J,"selected"));if($){this.selectedChoice=$;return}this.selectedChoice=Q[0]}#z(){let Q=F(this,"disabled");if(Q)this.setAttribute("aria-disabled","true");else this.removeAttribute("aria-disabled");for(let Z of this.choices)if(Q||F(Z,"disabled"))Z.setAttribute("aria-disabled","true"),Z.setAttribute("tabindex","-1");else Z.removeAttribute("aria-disabled"),Z.setAttribute("tabindex","0")}#B(Q){let Z=this.choices;for(let $ of Z)if($.getAttribute("value")===Q)return this.selectedChoice=$,!0;return!1}#M(Q){let Z=this.#G,$=Q;while($&&$!==this){if($.matches(Z))return $;$=$.parentElement}return null}#D(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()}#T(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Z=this.choices.filter((q)=>!q.hasAttribute("disabled")||q.getAttribute("disabled")==="false");if(!Z.length)return;let $=Z.indexOf(this.#Q),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.#G)){let q=this.#M(document.activeElement);if(q&&q!==this.#Q)this.selectedChoice=q,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}))}#O(){if(this.#N==="scrollbar")return;let Q=this.getAttribute("layout")==="horizontal";a(this,this,Q?"x":"y")}#R(){this.#q?.disconnect(),this.#q=new ResizeObserver(()=>{this.#O(),this.#k()}),this.#q.observe(this)}#P(){if(this.#X?.bound)return;if(!this.#K)return;let Q=(q)=>{if(q.button!==0)return;if(q.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=q.clientX,this.#X.startY=q.clientY,this.#X.scrollLeft=this.scrollLeft,this.#X.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},Z=(q)=>{if(!this.#X.active)return;let _=this.getAttribute("layout")==="horizontal",X=q.clientX-this.#X.startX,Y=q.clientY-this.#X.startY;if(!this.#X.didDrag&&Math.abs(_?X:Y)>3)this.#X.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(q.pointerId);if(!this.#X.didDrag)return;if(_)this.scrollLeft=this.#X.scrollLeft-X;else this.scrollTop=this.#X.scrollTop-Y},$=(q)=>{if(!this.#X.active)return;let _=this.#X.didDrag;if(this.#X.active=!1,this.#X.didDrag=!1,this.style.cursor="",this.style.userSelect="",q.pointerId!==void 0)try{this.releasePointerCapture(q.pointerId)}catch{}if(_)q.preventDefault(),q.stopPropagation()},J=(q)=>{if(this.#X?.suppressClick)q.stopPropagation(),q.preventDefault(),this.#X.suppressClick=!1},j=(q)=>{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)}#S(){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}#f(){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}}#I(){if(this.#N==="scrollbar")this.#A();else this.#E()}#A(){this.#_?.remove(),this.#Y?.remove(),this.#_=null,this.#Y=null,this.classList.remove("overflow-start","overflow-end")}#E(){if(this.#_&&this.#Y&&this.contains(this.#_)&&this.contains(this.#Y))return;this.#_?.remove(),this.#Y?.remove(),this.#_=null,this.#Y=null;let Q=X0({owner:"chooser",startClass:"fig-chooser-nav-start",endClass:"fig-chooser-nav-end",chevronClass:"fig-chooser-nav-chevron",onStart:()=>this.#C(-1),onEnd:()=>this.#C(1)});this.#_=Q.start,this.#Y=Q.end,this.prepend(this.#_),this.append(this.#Y)}#C(Q){let Z=this.getAttribute("layout")==="horizontal";i(this,Z?"x":"y",Q)}#k(){if(!this.#Q)return;this.#y(this.#Q,"auto")}#y(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(),q=this.getBoundingClientRect(),_={behavior:Z},X=!1;if($){let Y=j.top-q.top+this.scrollTop,K=this.scrollHeight-this.clientHeight;_.top=Math.max(0,Math.min(Y+j.height/2-this.clientHeight/2,K)),X=!0}if(J){let Y=j.left-q.left+this.scrollLeft,K=this.scrollWidth-this.clientWidth;_.left=Math.max(0,Math.min(Y+j.width/2-this.clientWidth/2,K)),X=!0}if(X)this.scrollTo(_);this.#O()})}#v(){this.#j?.disconnect(),this.#j=new MutationObserver(()=>{if(this.#W)return;this.#f(),this.#I(),this.#z();let Q=this.choices;if(this.#Q&&!Q.includes(this.#Q))this.#Q=null,this.#F();else if(!this.#Q&&Q.length)this.#F();requestAnimationFrame(()=>this.#O())}),this.#j.observe(this,{childList:!0,subtree:!1})}}z("fig-chooser",E1);class C1 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"];#Q=!1;#Z=!1;#$=null;#J=null;#j=!1;#q=null;#_=null;#Y=null;#X=null;get#W(){let Q=(this.getAttribute("tip")||"").trim().toLowerCase();return Q==="color"||Q==="add"||Q==="remove"?Q:null}get#N(){return!this.hasAttribute("data-no-color-picker")}get#K(){let Q=this.getAttribute("drag");return Q!==null&&Q!=="false"}get#G(){let Q=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:Q.includes("x"),y:Q.includes("y")}}get#U(){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"}#L(Q){let Z=this.#U;if(Z==="true")return!0;if(Z==="modifier")return!!Q;return!1}#F(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}}#B(){let Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){let Q=this.#B();if(!Q)return"0% 0%";let{px:Z,py:$}=this.#n(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=(_)=>{if(!_)return 0;let X=_.includes("px"),Y=_.includes("%"),K=parseFloat(_.replace(/[%px]/g,""));if(!Number.isFinite(K))return 0;if(X)return{px:K};if(Y||Math.abs(K)>1)return Math.max(0,Math.min(100,K));return Math.max(0,Math.min(100,K*100))},j=J($[0]),q=J($[1]??$[0]);return{xToken:j,yToken:q}}#D(Q){let Z=this.#B();if(!Z)return;let{xToken:$,yToken:J}=this.#M(Q),j=Z.getBoundingClientRect(),q=(Y,K)=>{if(Y&&typeof Y==="object"&&"px"in Y)return Math.max(0,Math.min(K,Y.px));return null},_=(Y)=>{return`${typeof Y==="number"?Y:0}%`},X=this.#G;if(this.#T(X),X.x){let Y=q($,j.width);this.style.left=Y===null?_($):`${Math.round(Y)}px`}if(X.y){let Y=q(J,j.height);this.style.top=Y===null?_(J):`${Math.round(Y)}px`}}#T(Q=this.#G){this.style.setProperty("--fig-handle-position-translate",`${Q.x?"-50%":"0"} ${Q.y?"-50%":"0"}`)}#H(){this.#j=!0,this.setAttribute("value",this.value),this.#j=!1}get#O(){return this.getAttribute("hit-area-mode")||"handle"}#R(){let Q=this.getAttribute("hit-area");if(!Q)return null;let Z=Q.trim().split(/\s+/),$=0,J=0,j=!1,q=[];for(let _ of Z){if(_==="circle"){j=!0;continue}let X=parseFloat(_);if(Number.isFinite(X))q.push(X)}if(q.length>=2)$=q[0],J=q[1];else if(q.length===1)$=q[0],J=q[0];else return null;return{vPad:$,hPad:J,circle:j}}#P(){let Q=this.#R();if(!Q){if(this.#X)this.#X.remove(),this.#X=null;this.style.removeProperty("--fig-handle-hit-area-size");return}if(!this.#X){let Z=document.createElement("div");Z.classList.add("fig-handle-hit-area"),Z.addEventListener("pointerdown",($)=>this.#S($)),this.prepend(Z),this.#X=Z}if(this.style.setProperty("--fig-handle-hit-area-size",String(Q.hPad*2)),Q.circle)this.#X.style.borderRadius="50%";else this.#X.style.borderRadius="inherit"}#S(Q){if(F(this,"disabled"))return;if(Q.target!==this.#X)return;if(this.#O==="delegate")Q.preventDefault(),Q.stopPropagation(),this.dispatchEvent(new CustomEvent("hitareadown",{bubbles:!0,detail:{originalEvent:Q}}));else this.#v(Q)}connectedCallback(){this.#k(),this.#C(),this.#P(),this.addEventListener("click",this.#f),document.addEventListener("pointerdown",this.#I),document.addEventListener("keydown",this.#A);let Q=this.getAttribute("value");if(Q)this.#D(Q);if(this.#W)this.#s()}disconnectedCallback(){if(this.#y(),this.#t(),this.#c(),this.#d(),this.#X)this.#X.remove(),this.#X=null;this.removeEventListener("click",this.#f),document.removeEventListener("pointerdown",this.#I),document.removeEventListener("keydown",this.#A)}select(){if(F(this,"disabled"))return;this.setAttribute("selected","")}deselect(){this.removeAttribute("selected")}#f=(Q)=>{if(this.#Z){this.#Z=!1;return}if(this.getAttribute("type")==="color"&&this.#N&&!this.#W){this.#x();return}this.select()};#I=(Q)=>{if(this.contains(Q.target))return;if((this.#q||this.#_)&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#A=(Q)=>{if(Q.defaultPrevented)return;if(Q.target===this&&this.#K&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(Q.key)){if(this.#E(Q)){if(Q.preventDefault(),!F(this,"selected"))this.select()}return}if(Q.key!=="Enter"&&Q.key!==" ")return;if(Q.target===this&&!F(this,"selected")){if(Q.preventDefault(),this.getAttribute("type")==="color"&&this.#N&&!this.#W)this.#x();else this.select();return}if(!F(this,"selected"))return;if(this.getAttribute("type")!=="color")return;if(!this.#N)return;if(Q.preventDefault(),!this.#W)this.#x()};#E(Q){if(F(this,"disabled"))return!1;let Z=this.#B();if(!Z)return!1;let $=Z.getBoundingClientRect();if($.width<=0||$.height<=0)return!1;let J=this.#G,j=this.#n($),q=Q.shiftKey?0.1:0.01,_=j.px,X=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;X-=q;break;case"ArrowDown":if(!J.y)return!1;X+=q;break;case"Home":if(J.x)_=0;if(J.y)X=0;break;case"End":if(J.x)_=1;if(J.y)X=1;break;default:return!1}if(_=Math.max(0,Math.min(1,_)),X=Math.max(0,Math.min(1,X)),this.#T(J),J.x)this.style.left=`${Math.round(_*$.width)}px`;if(J.y)this.style.top=`${Math.round(X*$.height)}px`;this.#H();let Y={...this.#n($),shiftKey:Q.shiftKey,keyboard:!0};return this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Y})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Y})),!0}attributeChangedCallback(Q,Z,$){if(Q==="color"){if(!$||$==="false"||$==="true")this.style.removeProperty("--fill");else this.style.setProperty("--fill",$);if(this.#q&&this.#W==="color"&&$)this.#q.setAttribute("value",$);this.#V()}if(Q==="drag")this.#C();if(Q==="hit-area")this.#P();if(Q==="selected")this.#r();if(Q==="selected"||Q==="disabled"||Q==="type"||Q==="tip"||Q==="aria-label"||Q==="aria-labelledby")this.#k();if(Q==="value"&&!this.#j&&!this.#Q)this.#D($);if(Q==="tip"){if(this.#t(),this.#W)this.#c(),this.#s()}}#C(){if(this.#K&&!this.#$)this.#$=(Q)=>this.#v(Q),this.addEventListener("pointerdown",this.#$);else if(!this.#K&&this.#$)this.#y()}#k(){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.#W||this.getAttribute("type")||"handle";this.setAttribute("aria-label",$==="color"?"Color handle":$==="add"?"Add handle":$==="remove"?"Remove handle":"Handle")}}#y(){if(this.#J?.(),this.#J=null,this.#$)this.removeEventListener("pointerdown",this.#$),this.#$=null;this.#Q=!1,this.#Z=!1}#v(Q){if(!this.#K||F(this,"disabled"))return;Q.preventDefault();let Z=this.#B();if(!Z)return;this.#J?.(),this.#Q=!0;let $=this.#G,J=null,j=this.getBoundingClientRect(),q=j.left+j.width/2,_=j.top+j.height/2,X=Q.clientX-q,Y=Q.clientY-_,K=Q.clientX,G=Q.clientY,N=3,W=(T,R,A=!1)=>{let M=Z.getBoundingClientRect();J=M;let E=this.#n(M),k=T-X-M.left,S=R-Y-M.top,x=Math.max(0,Math.min(M.width,k)),y=Math.max(0,Math.min(M.height,S)),m=M.width>0?$.x?x/M.width:E.px:0.5,d=M.height>0?$.y?y/M.height:E.py:0.5;if(this.#L(A)){if($.x)m=this.#F(m);if($.y)d=this.#F(d);if($.x&&$.y){let t=this.#z(m,d);m=t.x,d=t.y}}if(this.#T($),$.x)this.style.left=`${Math.round(Math.max(0,Math.min(M.width,m*M.width)))}px`;if($.y)this.style.top=`${Math.round(Math.max(0,Math.min(M.height,d*M.height)))}px`},O=(T)=>{if(!this.#Q)return;if(!this.#Z){let R=T.clientX-K,A=T.clientY-G;if(R*R+A*A<N*N)return;if(this.#p(),this.classList.add("dragging"),this.style.cursor="grabbing",!F(this,"selected"))this.select()}this.#Z=!0,W(T.clientX,T.clientY,T.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#n(J),shiftKey:T.shiftKey}}))},B=(T)=>{if(L(),this.#Z){W(T.clientX,T.clientY,T.shiftKey),this.#H(),this.#D(this.getAttribute("value")),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#n(J)}));let R=(A)=>{A.stopPropagation(),A.preventDefault()};this.addEventListener("click",R,{capture:!0,once:!0})}else this.#H();this.#Z=!1},L=()=>{if(window.removeEventListener("pointermove",O),window.removeEventListener("pointerup",B),this.#Q=!1,this.style.cursor="",this.classList.remove("dragging"),this.#J===L)this.#J=null};this.#J=L,window.addEventListener("pointermove",O),window.addEventListener("pointerup",B)}showColorTip(){if(!this.#W)return;if(this.#q){this.#q.style.display="";return}this.#s()}hideColorTip(){if(!this.#q)return;this.#q.style.display="none"}#b(Q=this.getAttribute("color")){let Z={color:"#D9D9D9",opacity:100},$=String(Q||"").trim();if(!$)return Z;let J=(q)=>{let _=q.replace("#","").trim();if(_.length===3||_.length===4){let[X,Y,K,G]=_;return{color:`#${X}${X}${Y}${Y}${K}${K}`.toUpperCase(),opacity:G?Math.round(parseInt(`${G}${G}`,16)/255*100):100}}if(_.length===6||_.length===8)return{color:`#${_.slice(0,6)}`.toUpperCase(),opacity:_.length===8?Math.round(parseInt(_.slice(6,8),16)/255*100):100};return Z},j=(q,_,X)=>{let Y=(K)=>Math.max(0,Math.min(255,Math.round(Number(K)))).toString(16).padStart(2,"0");return`#${Y(q)}${Y(_)}${Y(X)}`.toUpperCase()};if($.startsWith("#"))return J($);try{let{ctx:q}=O0(1,1);q.fillStyle="#000000",q.fillStyle=$;let _=q.fillStyle;if(_.startsWith("#"))return J(_);let X=_.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?/i);if(X)return{color:j(X[1],X[2],X[3]),opacity:X[4]!==void 0?Math.round(parseFloat(X[4])*100):100}}catch{}return Z}#w(){let{color:Q,opacity:Z}=this.#b();return JSON.stringify(Z<100?{type:"solid",color:Q,opacity:Z}:{type:"solid",color:Q})}#V(){if(!this.#_)return;this.#_.setAttribute("value",this.#w())}#g(){if(!o())return null;if(this.#_)return this.#_;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.#w()),Q.anchorElement=this;let Z=document.createElement("span");return Z.hidden=!0,Q.appendChild(Z),Q.addEventListener("input",this.#i),Q.addEventListener("change",this.#Z0),Q.addEventListener("close",this.#l),this.appendChild(Q),this.#_=Q,Q}#x(){if(F(this,"disabled"))return;let Q=this.#g();if(!Q){this.#h();return}this.setAttribute("selected",""),this.#V(),Q.open()}#c(){if(!this.#_)return;this.#_.removeEventListener("input",this.#i),this.#_.removeEventListener("change",this.#Z0),this.#_.removeEventListener("close",this.#l),this.#_.close(),this.#_.remove(),this.#_=null,this.removeAttribute("selected")}#m(){if(this.#Y)return this.#Y;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.#q0),Q.addEventListener("change",this.#e),this.appendChild(Q),this.#Y=Q,Q}#h(){let Q=this.#m(),{color:Z}=this.#b();Q.value=Z,this.setAttribute("selected",""),Q.click()}#d(){if(!this.#Y)return;this.#Y.removeEventListener("input",this.#q0),this.#Y.removeEventListener("change",this.#e),this.#Y.remove(),this.#Y=null}#p(){if(this.getAttribute("type")!=="color")return;this.#_?.close()}#s(){let Q=this.#W;if(!Q)return;if(this.#q)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.#J0),Z.addEventListener("change",this.#$0),Z.addEventListener("add",this.#a),Z.addEventListener("remove",this.#a),this.appendChild(Z),this.#q=Z,this.#r()}#t(){if(!this.#q)return;this.#q.removeEventListener("input",this.#J0),this.#q.removeEventListener("change",this.#$0),this.#q.removeEventListener("add",this.#a),this.#q.removeEventListener("remove",this.#a),this.#q.remove(),this.#q=null}#r(){if(!this.#q||this.#W!=="color")return;let Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";this.#q.toggleAttribute("selected",Q)}#u(Q,Z){if(Z===void 0||Z>=100)return Q;let{r:$,g:J,b:j}=r(Q);return`rgba(${$}, ${J}, ${j}, ${Z/100})`}#o(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}}#i=(Q)=>{Q.stopPropagation();let Z=this.#o(Q.detail);if(!Z)return;this.setAttribute("color",this.#u(Z.color,Z.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Z}))};#Z0=(Q)=>{Q.stopPropagation();let Z=this.#o(Q.detail);if(!Z)return;this.setAttribute("color",this.#u(Z.color,Z.opacity)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Z}))};#j0(Q){let{opacity:Z}=this.#b();return Z<100?{color:Q,opacity:Z}:{color:Q}}#q0=(Q)=>{Q.stopPropagation();let Z=this.#j0(Q.target.value);this.setAttribute("color",this.#u(Z.color,Z.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Z}))};#e=(Q)=>{Q.stopPropagation();let Z=this.#j0(Q.target.value);this.setAttribute("color",this.#u(Z.color,Z.opacity)),this.removeAttribute("selected"),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Z}))};#l=()=>{this.removeAttribute("selected")};#J0=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#u(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#$0=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#u(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#a=(Q)=>{Q.stopPropagation(),this.dispatchEvent(new CustomEvent(Q.type,{bubbles:!0,composed:!0}))};#n(Q){let Z=Q||this.#B()?.getBoundingClientRect();if(!Z)return{x:0,y:0,px:0,py:0};let $=this.getBoundingClientRect(),J=this.offsetWidth/2,j=this.offsetHeight/2,q=$.left-Z.left,_=$.top-Z.top,X=q+J,Y=_+j,K=Z.width>0?X/Z.width:0,G=Z.height>0?Y/Z.height:0;return{x:q,y:_,px:K,py:G}}}z("fig-handle",C1);class k1 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.#Q()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="disabled")this.#Q()}#Q(){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")}}z("fig-menu-item",k1);class S1 extends HTMLElement{static get observedAttributes(){return["label"]}get label(){return this.getAttribute("label")??""}set label(Q){if(Q==null||Q==="")this.removeAttribute("label");else this.setAttribute("label",String(Q))}connectedCallback(){this.#Q()}attributeChangedCallback(Q,Z,$){if(Z===$)return;this.#Q()}#Q(){if(!this.hasAttribute("role"))this.setAttribute("role","separator");let Q=this.label.trim();if(Q)this.setAttribute("aria-label",Q);else this.removeAttribute("aria-label")}}z("fig-separator",S1);class f1 extends HTMLElement{#Q=null;#Z=null;#$=null;#J=null;#j=null;#q=null;#_=null;#Y=null;#X;#W;#N;#K;#G;#U=this.#P.bind(this);#L=-1;static get observedAttributes(){return["position","offset","closedby","disabled","open","trigger"]}constructor(){super();this.#X=this.#y.bind(this),this.#W=this.#v.bind(this),this.#N=this.#w.bind(this),this.#K=this.#V.bind(this),this.#G=this.#g.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){if(this.#k())return;this.setAttribute("open","")}else this.removeAttribute("open")}connectedCallback(){if(this.#F(),this.#B(),this.#M(),this.#D(),this.#O(),this.#H(),this.#C(),this.open)this.#c()}disconnectedCallback(){if(this.#T(),this.#R(),document.removeEventListener("keydown",this.#K,!0),this.#j)this.#j.disconnect(),this.#j=null;if(this.#Q){this.#Q.removeEventListener("close",this.#G);let Q=Array.from(this.#Z?.querySelectorAll(":scope > fig-menu-item, :scope > fig-separator")??[]);for(let Z of Q)this.insertBefore(Z,this.#Q);this.#Q.remove(),this.#Q=null,this.#Z=null}}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="open"){if($===null||$==="false")this.#m();else{if(this.#k()){this.removeAttribute("open");return}this.#c()}return}if(Q==="disabled"){this.#C();return}if(this.#Q&&(Q==="position"||Q==="offset"||Q==="closedby"))if($!==null)this.#Q.setAttribute(Q,$);else this.#Q.removeAttribute(Q)}#F(){this.#$=this.querySelector("[fig-menu-trigger]")||this.querySelector(":scope > :not(fig-menu-item):not(fig-separator)")}#z(){return(this.getAttribute("trigger")||"").toLowerCase()==="contextmenu"||this.hasAttribute("contextmenu")}#B(){this.#Q=document.createElement("dialog",{is:"fig-popup"}),this.#Q.setAttribute("is","fig-popup"),this.#Q.classList.add("fig-menu-popup"),this.#Q.setAttribute("theme","menu"),this.#Q.setAttribute("role","menu"),this.#Q.setAttribute("id",this.#Q.getAttribute("id")||h());let Q=this.getAttribute("position")||"bottom left";this.#Q.setAttribute("position",Q);let Z=this.getAttribute("offset");if(Z)this.#Q.setAttribute("offset",Z);let $=this.getAttribute("closedby");if($)this.#Q.setAttribute("closedby",$);if(this.#$)this.#Q.anchor=this.#$;this.#Z=document.createElement("div"),this.#Z.className="fig-menu-options",this.#Z.setAttribute("role","presentation"),this.#Q.appendChild(this.#Z),this.#Q.addEventListener("close",this.#G),this.appendChild(this.#Q)}#M(){if(!this.#Z)return;let Q=Array.from(this.querySelectorAll(":scope > fig-menu-item, :scope > fig-separator"));for(let Z of Q)this.#Z.appendChild(Z)}#D(){if(this.addEventListener("keydown",this.#K),this.#$)this.#$.addEventListener("click",this.#X),this.#$.addEventListener("contextmenu",this.#W),this.#$.setAttribute("aria-haspopup","menu"),this.#$.setAttribute("aria-expanded","false"),this.#$.setAttribute("aria-controls",this.#Q.getAttribute("id"));if(this.#Q)this.#Q.addEventListener("click",this.#N),this.#Q.addEventListener("keydown",this.#K)}#T(){if(this.removeEventListener("keydown",this.#K),this.#$)this.#$.removeEventListener("click",this.#X),this.#$.removeEventListener("contextmenu",this.#W);if(this.#Q)this.#Q.removeEventListener("click",this.#N),this.#Q.removeEventListener("keydown",this.#K)}#H(){this.#j=new MutationObserver((Q)=>{for(let Z of Q)for(let $ of Z.addedNodes){if($.nodeType!==1||$===this.#Q)continue;if(($.tagName==="FIG-MENU-ITEM"||$.tagName==="FIG-SEPARATOR")&&$.parentElement===this)this.#Z?.appendChild($);else if(!this.#$&&$.parentElement===this){if(this.#F(),this.#$)this.#$.addEventListener("click",this.#X),this.#$.addEventListener("contextmenu",this.#W),this.#$.setAttribute("aria-haspopup","menu"),this.#$.setAttribute("aria-expanded","false"),this.#$.setAttribute("aria-controls",this.#Q.getAttribute("id")),this.#Q.anchor=this.#$,this.#C()}}this.#P()}),this.#j.observe(this,{childList:!0})}#O(){if(!this.#Z)return;this.#S(),this.#Z.addEventListener("scroll",this.#U,{passive:!0}),this.#q?.disconnect(),this.#q=new ResizeObserver(()=>this.#P()),this.#q.observe(this.#Z),requestAnimationFrame(()=>this.#P())}#R(){this.#Z?.removeEventListener("scroll",this.#U),this.#q?.disconnect(),this.#q=null,this.#f()}#P(){return a(this.#Z,this.#Z,"y")}#S(){if(this.#_&&this.#Y&&this.#Z?.contains(this.#_)&&this.#Z?.contains(this.#Y))return;this.#f();let Q=X0({owner:"menu",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>i(this.#Z,"y",-1),onEnd:()=>i(this.#Z,"y",1)});this.#_=Q.start,this.#Y=Q.end,this.#Z.prepend(this.#_),this.#Z.append(this.#Y)}#f(){this.#_?.remove(),this.#Y?.remove(),this.#_=null,this.#Y=null,this.#Z?.classList.remove("overflow-start","overflow-end")}#I(){if(!this.#Z)return[];return Array.from(this.#Z.querySelectorAll("fig-menu-item")).filter((Q)=>!Q.hasAttribute("disabled")||Q.getAttribute("disabled")==="false")}#A(){let Q=this.#I();if(!Q.length){this.#L=-1;return}let Z=document.activeElement,$=Q.findIndex((J)=>J===Z||J.contains(Z));this.#L=$>=0?$:-1}#E(Q){let Z=this.#I();if(!Z.length)return;let $=(Q+Z.length)%Z.length;this.#L=$;let J=Z[$];J.focus(),S0(this.#Z,J,"y")}#C(){let Q=this.#k();if(Q)if(this.open)this.removeAttribute("open");else this.#m();if(!this.#$)return;if(Q)this.#$.setAttribute("disabled",""),this.#$.setAttribute("aria-disabled","true"),this.#$.setAttribute("aria-expanded","false");else this.#$.removeAttribute("disabled"),this.#$.removeAttribute("aria-disabled")}#k(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#y(Q){if(this.#z())return;if(this.#k())return;Q.stopPropagation();let Z=this.#Q?.matches?.(":open")??!1;if(this.open&&!Z)this.removeAttribute("open");if(this.open&&Z)this.open=!1;else{if(this.#Q&&this.#$)this.#Q.anchor=this.#$;this.open=!0}}#v(Q){if(!this.#z())return;if(this.#k())return;Q.preventDefault(),Q.stopPropagation(),this.#b(Q.clientX,Q.clientY)}#b(Q,Z){let $=!1,J=0,j=()=>{window.clearTimeout(J),window.removeEventListener("pointerup",q,!0),window.removeEventListener("pointercancel",_,!0)},q=()=>{if($)return;$=!0,j(),requestAnimationFrame(()=>this.showAt(Q,Z))},_=()=>{if($)return;$=!0,j()};window.addEventListener("pointerup",q,{once:!0,capture:!0}),window.addEventListener("pointercancel",_,{once:!0,capture:!0}),J=window.setTimeout(q,180)}#w(Q){if(this.#k())return;let Z=Q.target.closest("fig-menu-item");if(!Z)return;if(Z.hasAttribute("disabled")&&Z.getAttribute("disabled")!=="false")return;this.#x(Z)}#V(Q){if(this.#k())return;if(Q.currentTarget===document&&Q.key!=="Escape")return;if(Q.currentTarget===this&&this.#Q?.contains(Q.target))return;if(!this.open||!this.#Q?.matches?.(":open")){if(this.#$?.contains(Q.target)&&(Q.key==="ArrowDown"||Q.key==="Enter"||Q.key===" ")){if(Q.preventDefault(),this.#Q&&this.#$)this.#Q.anchor=this.#$;this.open=!0,requestAnimationFrame(()=>this.#E(0))}return}let Z=this.#I();if(!Z.length)return;switch(Q.key){case"ArrowDown":{Q.preventDefault(),this.#A(),this.#E(this.#L+1);break}case"ArrowUp":{Q.preventDefault(),this.#A(),this.#E(this.#L-1);break}case"Home":{Q.preventDefault(),this.#E(0);break}case"End":{Q.preventDefault(),this.#E(Z.length-1);break}case"Escape":{Q.preventDefault(),this.open=!1,this.#$?.focus();break}case"Enter":case" ":{this.#A();let $=Z[this.#L];if(!$)return;Q.preventDefault(),this.#x($);break}}}#g(){if(this.hasAttribute("open"))this.removeAttribute("open");if(this.#$)this.#$.setAttribute("aria-expanded","false"),this.#$.focus();this.#L=-1}#x(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.#k())return;if(this.#J={getBoundingClientRect:()=>({width:0,height:0,top:Z,right:Q,bottom:Z,left:Q,x:Q,y:Z})},this.#Q)this.#Q.anchor=this.#J;if(this.open)this.open=!1;requestAnimationFrame(()=>{if(this.#k())return;this.open=!0})}#c(){if(!this.#Q||this.#k()){if(this.hasAttribute("open"))this.removeAttribute("open");return}if(this.#Q.open=!0,document.addEventListener("keydown",this.#K,!0),this.#$)this.#$.setAttribute("aria-expanded","true");this.#L=-1,requestAnimationFrame(()=>{if(this.#P(),!this.#$?.matches?.(":focus-visible"))return;this.#E(0)})}#m(){if(!this.#Q)return;document.removeEventListener("keydown",this.#K,!0),this.#Q.open=!1,this.#$?.setAttribute("aria-expanded","false")}}z("fig-menu",f1);

package/fig-lab.css

@@ -9,7 +9,7 @@
  */
 
 fig-ai-prompt {
-  --fig-ai-prompt-margin-inline: var(--spacer-2);
+  --fig-ai-prompt-margin-inline: var(--spacer-3);
 
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@ fig-ai-prompt {
   background: var(--figma-color-bg);
   color: var(--figma-color-text);
 
-  &:focus-within {
+  &:has(> fig-input-text:focus-within) {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
@@ -48,15 +48,18 @@ fig-ai-prompt {
     & > textarea {
       box-sizing: border-box;
       width: 100%;
-      height: 100%;
+      height: auto;
+      align-self: stretch;
       min-height: var(--spacer-6);
       padding: var(--spacer-3);
+      padding-bottom: 0;
       resize: none;
       font-size: inherit;
     }
   }
 
   & > fig-footer {
+    justify-content: space-between;
     border: none;
     box-shadow: none;
   }

package/fig.js

@@ -17239,6 +17239,7 @@ const FIG_ICON_TOKENS = {
   steppers: "--icon-24-steppers",
   eyedropper: "--icon-24-eyedropper",
   add: "--icon-24-add",
+  send: { medium: "--icon-24-send", small: "--icon-16-send" },
   adjust: { medium: "--icon-24-adjust", small: "--icon-16-adjust" },
   minus: "--icon-24-minus",
   back: "--icon-24-back",

package/package.json

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