@rogieking/figui3 9.0.12 → 9.0.14

package/.cursor/skills/fig-editor/components.md

@@ -30,7 +30,7 @@ Data-driven (no authored options):
 ```
 
 - Attrs: `value`, `label`, `options` (comma / newline / JSON), `menu-anchor` (alternate anchor selector), `variant` (`ghost`), `size` (`large`, 32px trigger), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (omit to overlay the selected option on the trigger; set `bottom left`, `bottom right`, `top left`, `top right`, `bottom center`, or `top center` to place the menu like a popup), `offset`, `closedby`, `open`
-- Property: `menuAnchor` accepts an `Element`, selector string, or `null`. Alternate anchors preserve selected-option alignment; clear it to restore trigger alignment.
+- Property: `menuAnchor` accepts an `Element`, selector string, or `null`. The menu matches the anchor width and centers its selected row over it; if the anchor is narrower than the menu’s usable minimum, default overlay mode centers the wider menu over the anchor. Clear it to restore trigger-text alignment. Explicit `position` keeps anchor-derived sizing while applying normal popup placement and edge alignment.
 - Events: `input` / `change` on commit; `optionhover` for pointer previews; `optionfocus` for open-menu keyboard previews. Both preview events provide the option value in `detail` without changing selection and require native listeners.
 - Do not `stopPropagation` on option click — React light-DOM handlers must run.
 - Internal popup uses `popover="manual"` so the list works inside `fig-popup variant="popover"`.

package/README.md

@@ -235,7 +235,7 @@ Author options in `<fig-select-options>`, or pass `options`. Add `subtle` to one
 </fig-select>
 ```
 
-Set `menu-anchor` to a selector, or assign an element to the `menuAnchor` property. The selected option aligns against the alternate anchor; removing it restores alignment to the select trigger.
+Set `menu-anchor` to a selector, or assign an element to the `menuAnchor` property. The menu matches the anchor width and centers its selected row over the anchor. If the anchor is narrower than the menu’s usable minimum, the wider menu is centered over it in the default overlay mode. Removing the anchor restores trigger-text alignment. An explicit `position` keeps the anchor-derived width while applying normal popup placement and edge alignment relative to the menu anchor.
 
 ```js
 document.querySelector("fig-select").menuAnchor =

package/dist/fig-editor.js

@@ -1,6 +1,6 @@
-import"./fig.js";import"./fig-lab.js";function A(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function T(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}function p(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function I(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function d(J){let Q=String(J??"").trim();if(!Q||Q.startsWith("{")||Q.startsWith("#"))return!1;if(Q.startsWith("data:video/"))return!0;try{let Z=new URL(Q,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test(Z)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(Q)}}function C(J,Q={}){let Z=document.createElement("fig-icon");if(J)Z.setAttribute("name",J);if(Q.size)Z.setAttribute("size",Q.size);if(Q.className)Z.className=Q.className;return Z}function h(J,Q){let Z=($)=>{if($===null||$===void 0||$===!1)return;if(Array.isArray($)){$.forEach(Z);return}J.append($ instanceof Node?$:String($))};return Z(Q),J}function s(J,Q={}){for(let[Z,$]of Object.entries(Q)){if($===null||$===void 0||$===!1)continue;if(Z==="className")J.className=String($);else if($===!0)J.setAttribute(Z,"");else J.setAttribute(Z,String($))}return J}function G(J,Q,Z){let $=document.createElement(J);return s($,Q),h($,Z)}var i="http://www.w3.org/2000/svg";function u(J,Q,Z){let $=document.createElementNS(i,J);for(let[X,Y]of Object.entries(Q||{})){if(Y===null||Y===void 0||Y===!1)continue;if(X==="className")$.setAttribute("class",String(Y));else if(Y===!0)$.setAttribute(X,"");else $.setAttribute(X,String(Y))}return h($,Z)}function l(J){let Q=String(J||"").replace(/^#/,"");return{r:parseInt(Q.substring(0,2),16)||0,g:parseInt(Q.substring(2,4),16)||0,b:parseInt(Q.substring(4,6),16)||0}}function r(J,Q,Z){let $=J/255,X=Q/255,Y=Z/255,j=Math.max($,X,Y),K=Math.min($,X,Y),W=(j+K)/2;if(j===K)return{h:0,s:0,l:W*100};let U=j-K,L=W>0.5?U/(2-j-K):U/(j+K),z;switch(j){case $:z=((X-Y)/U+(X<Y?6:0))/6;break;case X:z=((Y-$)/U+2)/6;break;default:z=(($-X)/U+4)/6;break}return{h:z*360,s:L*100,l:W*100}}function x(J){let Q=J/255;return Q<=0.04045?Q/12.92:Math.pow((Q+0.055)/1.055,2.4)}function n(J,Q,Z){let $=x(J),X=x(Q),Y=x(Z),j=Math.cbrt(0.4122214708*$+0.5363325363*X+0.0514459929*Y),K=Math.cbrt(0.2119034982*$+0.6806995451*X+0.1073969566*Y),W=Math.cbrt(0.0883024619*$+0.2817188376*X+0.6299787005*Y);return{l:0.2104542553*j+0.793617785*K-0.0040720468*W,a:1.9779984951*j-2.428592205*K+0.4505937099*W,b:0.0259040371*j+0.7827717662*K-0.808675766*W}}function o(J,Q,Z){return{l:J,c:Math.sqrt(Q*Q+Z*Z),h:Math.atan2(Z,Q)*180/Math.PI}}function a({owner:J,onStart:Q,onEnd:Z,startClass:$="",endClass:X="",chevronClass:Y="",startLabel:j="Scroll back",endLabel:K="Scroll forward"}={}){let W=(U,L)=>{let z=document.createElement("button");if(z.type="button",z.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?$:X].filter(Boolean).join(" "),z.dataset.figOverflow=U,J)z.setAttribute(`data-fig-${J}-nav`,U);return z.setAttribute("tabindex","-1"),z.setAttribute("aria-label",U==="start"?j:K),z.appendChild(C("chevron",{size:"small",className:["fig-overflow-chevron",Y].filter(Boolean).join(" ")})),z.addEventListener("click",(O)=>{O.preventDefault(),O.stopPropagation(),L?.(O)}),z};return{start:W("start",Q),end:W("end",Z)}}function w(J,Q,Z="x",$=2){if(!J||!Q)return!1;let X=Z==="x",Y=X?Q.scrollWidth:Q.scrollHeight,j=X?Q.clientWidth:Q.clientHeight,K=X?Q.scrollLeft:Q.scrollTop,W=Y-j>$,U=!W||K<=$,L=!W||K+j>=Y-$;return J.classList.toggle("overflow-start",!U),J.classList.toggle("overflow-end",!L),W}function b(J,Q="x",Z=1){if(!J)return;let $=Q==="x",Y=($?J.clientWidth:J.clientHeight)*0.8*Z;J.scrollBy({[$?"left":"top"]:Y,behavior:"smooth"})}function t(J,Q,Z="y",$="auto"){if(!J||!Q||!J.contains(Q))return;requestAnimationFrame(()=>{if(!J.isConnected||!Q.isConnected)return;let X=Z==="x",Y=X?J.scrollWidth:J.scrollHeight,j=X?J.clientWidth:J.clientHeight;if(Y<=j+1){w(J,J,Z);return}let K=Q.getBoundingClientRect(),W=J.getBoundingClientRect(),U=X?J.scrollLeft:J.scrollTop,L=(X?K.left-W.left:K.top-W.top)+U,z=X?K.width:K.height,O=Y-j,f=Math.max(0,Math.min(L+z/2-j/2,O));J.scrollTo({[X?"left":"top"]:f,behavior:$}),w(J,J,Z)})}function e(J){let Q=J||"";if(Q.startsWith("["))try{let $=JSON.parse(Q);return Array.isArray($)?$:[]}catch{}let Z=Q.includes(`
+import"./fig.js";import"./fig-lab.js";function A(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function k(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}function p(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function I(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function d(J){let Q=String(J??"").trim();if(!Q||Q.startsWith("{")||Q.startsWith("#"))return!1;if(Q.startsWith("data:video/"))return!0;try{let Z=new URL(Q,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test(Z)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(Q)}}function C(J,Q={}){let Z=document.createElement("fig-icon");if(J)Z.setAttribute("name",J);if(Q.size)Z.setAttribute("size",Q.size);if(Q.className)Z.className=Q.className;return Z}function h(J,Q){let Z=($)=>{if($===null||$===void 0||$===!1)return;if(Array.isArray($)){$.forEach(Z);return}J.append($ instanceof Node?$:String($))};return Z(Q),J}function s(J,Q={}){for(let[Z,$]of Object.entries(Q)){if($===null||$===void 0||$===!1)continue;if(Z==="className")J.className=String($);else if($===!0)J.setAttribute(Z,"");else J.setAttribute(Z,String($))}return J}function G(J,Q,Z){let $=document.createElement(J);return s($,Q),h($,Z)}var i="http://www.w3.org/2000/svg";function u(J,Q,Z){let $=document.createElementNS(i,J);for(let[X,Y]of Object.entries(Q||{})){if(Y===null||Y===void 0||Y===!1)continue;if(X==="className")$.setAttribute("class",String(Y));else if(Y===!0)$.setAttribute(X,"");else $.setAttribute(X,String(Y))}return h($,Z)}function l(J){let Q=String(J||"").replace(/^#/,"");return{r:parseInt(Q.substring(0,2),16)||0,g:parseInt(Q.substring(2,4),16)||0,b:parseInt(Q.substring(4,6),16)||0}}function r(J,Q,Z){let $=J/255,X=Q/255,Y=Z/255,j=Math.max($,X,Y),K=Math.min($,X,Y),W=(j+K)/2;if(j===K)return{h:0,s:0,l:W*100};let z=j-K,L=W>0.5?z/(2-j-K):z/(j+K),U;switch(j){case $:U=((X-Y)/z+(X<Y?6:0))/6;break;case X:U=((Y-$)/z+2)/6;break;default:U=(($-X)/z+4)/6;break}return{h:U*360,s:L*100,l:W*100}}function x(J){let Q=J/255;return Q<=0.04045?Q/12.92:Math.pow((Q+0.055)/1.055,2.4)}function n(J,Q,Z){let $=x(J),X=x(Q),Y=x(Z),j=Math.cbrt(0.4122214708*$+0.5363325363*X+0.0514459929*Y),K=Math.cbrt(0.2119034982*$+0.6806995451*X+0.1073969566*Y),W=Math.cbrt(0.0883024619*$+0.2817188376*X+0.6299787005*Y);return{l:0.2104542553*j+0.793617785*K-0.0040720468*W,a:1.9779984951*j-2.428592205*K+0.4505937099*W,b:0.0259040371*j+0.7827717662*K-0.808675766*W}}function o(J,Q,Z){return{l:J,c:Math.sqrt(Q*Q+Z*Z),h:Math.atan2(Z,Q)*180/Math.PI}}function a({owner:J,onStart:Q,onEnd:Z,startClass:$="",endClass:X="",chevronClass:Y="",startLabel:j="Scroll back",endLabel:K="Scroll forward"}={}){let W=(z,L)=>{let U=document.createElement("button");if(U.type="button",U.className=["fig-overflow",`fig-overflow-${z}`,z==="start"?$:X].filter(Boolean).join(" "),U.dataset.figOverflow=z,J)U.setAttribute(`data-fig-${J}-nav`,z);return U.setAttribute("tabindex","-1"),U.setAttribute("aria-label",z==="start"?j:K),U.appendChild(C("chevron",{size:"small",className:["fig-overflow-chevron",Y].filter(Boolean).join(" ")})),U.addEventListener("click",(O)=>{O.preventDefault(),O.stopPropagation(),L?.(O)}),U};return{start:W("start",Q),end:W("end",Z)}}function w(J,Q,Z="x",$=2){if(!J||!Q)return!1;let X=Z==="x",Y=X?Q.scrollWidth:Q.scrollHeight,j=X?Q.clientWidth:Q.clientHeight,K=X?Q.scrollLeft:Q.scrollTop,W=Y-j>$,z=!W||K<=$,L=!W||K+j>=Y-$;return J.classList.toggle("overflow-start",!z),J.classList.toggle("overflow-end",!L),W}function b(J,Q="x",Z=1){if(!J)return;let $=Q==="x",Y=($?J.clientWidth:J.clientHeight)*0.8*Z;J.scrollBy({[$?"left":"top"]:Y,behavior:"smooth"})}function t(J,Q,Z="y",$="auto"){if(!J||!Q||!J.contains(Q))return;requestAnimationFrame(()=>{if(!J.isConnected||!Q.isConnected)return;let X=Z==="x",Y=X?J.scrollWidth:J.scrollHeight,j=X?J.clientWidth:J.clientHeight;if(Y<=j+1){w(J,J,Z);return}let K=Q.getBoundingClientRect(),W=J.getBoundingClientRect(),z=X?J.scrollLeft:J.scrollTop,L=(X?K.left-W.left:K.top-W.top)+z,U=X?K.width:K.height,O=Y-j,f=Math.max(0,Math.min(L+U/2-j/2,O));J.scrollTo({[X?"left":"top"]:f,behavior:$}),w(J,J,Z)})}function e(J){let Q=J||"";if(Q.startsWith("["))try{let $=JSON.parse(Q);return Array.isArray($)?$:[]}catch{}let Z=Q.includes(`
 `)?`
-`:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function JJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function QJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}class v extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let J=this.getAttribute("value");if(J!==null)return J;return(this.textContent||"").trim()}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get disabled(){return T(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return T(this,"selected")}set selected(J){if(J)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#K()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="disabled")this.#K()}#K(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}A("fig-select-option",v);class m extends HTMLElement{#K=null;#Z=null;#j=null;#W=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#F(),this.#L(),this.#z(),this.addEventListener("scroll",this.#J,{passive:!0}),this.#j?.disconnect(),this.#j=new ResizeObserver(()=>this.syncOverflow()),this.#j.observe(this),this.#W?.disconnect(),this.#W=new MutationObserver(()=>{if(!this.isConnected)return;this.#z(),this.syncOverflow()}),this.#W.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#J),this.#j?.disconnect(),this.#j=null,this.#W?.disconnect(),this.#W=null,this.#X()}syncOverflow(){return this.#L(),w(this,this,"y")}scrollToOption(J,Q="auto"){t(this,J,"y",Q)}#F(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#L(){let J=Array.from(this.children).find((Q)=>!Q.hasAttribute("data-fig-select-nav"));if(J?.tagName==="FIG-SEPARATOR")J.setAttribute("borderless","")}#z(){if(this.#K&&this.#Z&&this.contains(this.#K)&&this.contains(this.#Z)){this.#B();return}this.#X();let J=a({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>b(this,"y",-1),onEnd:()=>b(this,"y",1)});this.#K=J.start,this.#Z=J.end,this.#B()}#B(){if(this.firstElementChild!==this.#K)this.prepend(this.#K);if(this.lastElementChild!==this.#Z)this.append(this.#Z)}#X(){this.#K?.remove(),this.#Z?.remove(),this.#K=null,this.#Z=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",m);class c extends HTMLElement{#K=null;#Z=null;#j=null;#W=null;#J=null;#F=null;#L=null;#z=null;#B=null;#X=!1;#G=-1;#Y=!1;#U=!1;#Q=null;#$=!1;#N=null;#k=null;#M=!1;#f=null;#v=this.#$J.bind(this);#q=this.#wJ.bind(this);#H=this.#TJ.bind(this);#R=this.#kJ.bind(this);#_=this.#t.bind(this);#C=this.#y.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open","variant","size","menu-anchor","aria-label"]}get value(){return this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get open(){return T(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#f??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#f=J}else if(typeof J==="string"&&J.trim())this.#f=null,this.setAttribute("menu-anchor",J);else this.#f=null,this.removeAttribute("menu-anchor");this.#E()}connectedCallback(){if(!this.#X)this.#JJ();if(this.#m(),this.#p(),this.#RJ(),this.#T(),this.#BJ(),this.#P(),this.#HJ(),this.#xJ(),this.open)this.#b()}disconnectedCallback(){this.#IJ(),document.removeEventListener("keydown",this.#R,!0),this.#B?.disconnect(),this.#B=null}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#X)return;if(J==="options"){this.#p(),this.#P();return}if(J==="value"||J==="label"||J==="aria-label"){this.#P();return}if(J==="disabled"){this.#RJ();return}if(J==="size"){this.#T();return}if(J==="open"){if(Z===null||Z==="false")this.#S();else this.#b();return}if(J==="menu-anchor"){this.#f=null,this.#E();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#BJ(),this.open)this.#OJ()}}focus(J){this.#K?.focus(J)}blur(){this.#K?.blur()}#T(){if(!this.#K)return;let J=this.getAttribute("size");if(J)this.#K.setAttribute("size",J);else this.#K.removeAttribute("size")}#I(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#m(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#A(){let Q=(this.#z?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#c(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#zJ(){let J=this.#A();if(J){if(!J.hasAttribute("slot"))J.setAttribute("slot","panel");return J}return J=document.createElement("fig-select-options"),J.setAttribute("slot","panel"),J.setAttribute("data-fig-generated",""),this.appendChild(J),J}#p(){if(this.#c())return;let J=this.hasAttribute("options"),Q=J?this.#zJ():this.#A();if(!Q)return;this.#M=!0;try{for(let X of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))X.remove();if(!J)return;let Z=e(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let X of Z){let Y=document.createElement("fig-select-option");if(Y.setAttribute("data-fig-generated",""),Y.setAttribute("value",JJ(X)),Y.textContent=QJ(X),$)Q.insertBefore(Y,$);else Q.appendChild(Y)}}finally{this.#M=!1}}#JJ(){this.#X=!0;let J=this.attachShadow({mode:"open"}),Q=document.createElement("style");Q.textContent=`
+`:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function JJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function QJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}class v extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let J=this.getAttribute("value");if(J!==null)return J;return(this.textContent||"").trim()}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get disabled(){return k(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return k(this,"selected")}set selected(J){if(J)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#K()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="disabled")this.#K()}#K(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}A("fig-select-option",v);class m extends HTMLElement{#K=null;#Q=null;#j=null;#W=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#C(),this.#L(),this.#z(),this.addEventListener("scroll",this.#J,{passive:!0}),this.#j?.disconnect(),this.#j=new ResizeObserver(()=>this.syncOverflow()),this.#j.observe(this),this.#W?.disconnect(),this.#W=new MutationObserver(()=>{if(!this.isConnected)return;this.#z(),this.syncOverflow()}),this.#W.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#J),this.#j?.disconnect(),this.#j=null,this.#W?.disconnect(),this.#W=null,this.#X()}syncOverflow(){return this.#L(),w(this,this,"y")}scrollToOption(J,Q="auto"){t(this,J,"y",Q)}#C(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#L(){let J=Array.from(this.children).find((Q)=>!Q.hasAttribute("data-fig-select-nav"));if(J?.tagName==="FIG-SEPARATOR")J.setAttribute("borderless","")}#z(){if(this.#K&&this.#Q&&this.contains(this.#K)&&this.contains(this.#Q)){this.#B();return}this.#X();let J=a({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>b(this,"y",-1),onEnd:()=>b(this,"y",1)});this.#K=J.start,this.#Q=J.end,this.#B()}#B(){if(this.firstElementChild!==this.#K)this.prepend(this.#K);if(this.lastElementChild!==this.#Q)this.append(this.#Q)}#X(){this.#K?.remove(),this.#Q?.remove(),this.#K=null,this.#Q=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",m);class c extends HTMLElement{#K=null;#Q=null;#j=null;#W=null;#J=null;#C=null;#L=null;#z=null;#B=null;#X=!1;#G=-1;#Y=!1;#U=!1;#Z=null;#$=!1;#y=null;#M=null;#N=!1;#f=null;#c=this.#JJ.bind(this);#q=this.#uJ.bind(this);#H=this.#jJ.bind(this);#R=this.#bJ.bind(this);#_=this.#gJ.bind(this);#E=this.#XJ.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open","variant","size","menu-anchor","aria-label"]}get value(){return this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get open(){return k(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#f??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#f=J}else if(typeof J==="string"&&J.trim())this.#f=null,this.setAttribute("menu-anchor",J);else this.#f=null,this.removeAttribute("menu-anchor");this.#i()}connectedCallback(){if(!this.#X)this.#ZJ();if(this.#p(),this.#s(),this.#e(),this.#T(),this.#YJ(),this.#g(),this.#IJ(),this.#b(),this.open)this.#qJ()}disconnectedCallback(){this.#xJ(),document.removeEventListener("keydown",this.#R,!0),this.#B?.disconnect(),this.#B=null}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#X)return;if(J==="options"){this.#s(),this.#g();return}if(J==="value"||J==="label"||J==="aria-label"){this.#g();return}if(J==="disabled"){this.#e();return}if(J==="size"){this.#T();return}if(J==="open"){if(Z===null||Z==="false")this.#NJ();else this.#qJ();return}if(J==="menu-anchor"){this.#f=null,this.#i();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#YJ(),this.open)this.#$J()}}focus(J){this.#K?.focus(J)}blur(){this.#K?.blur()}#T(){if(!this.#K)return;let J=this.getAttribute("size");if(J)this.#K.setAttribute("size",J);else this.#K.removeAttribute("size")}#w(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#p(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#A(){let Q=(this.#z?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#d(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#GJ(){let J=this.#A();if(J){if(!J.hasAttribute("slot"))J.setAttribute("slot","panel");return J}return J=document.createElement("fig-select-options"),J.setAttribute("slot","panel"),J.setAttribute("data-fig-generated",""),this.appendChild(J),J}#s(){if(this.#d())return;let J=this.hasAttribute("options"),Q=J?this.#GJ():this.#A();if(!Q)return;this.#N=!0;try{for(let X of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))X.remove();if(!J)return;let Z=e(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let X of Z){let Y=document.createElement("fig-select-option");if(Y.setAttribute("data-fig-generated",""),Y.setAttribute("value",JJ(X)),Y.textContent=QJ(X),$)Q.insertBefore(Y,$);else Q.appendChild(Y)}}finally{this.#N=!1}}#ZJ(){this.#X=!0;let J=this.attachShadow({mode:"open"}),Q=document.createElement("style");Q.textContent=`
         :host {
           display: inline-flex;
           position: relative;
@@ -105,4 +105,4 @@ import"./fig.js";import"./fig-lab.js";function A(J,Q){if(!customElements.get(J))
           min-height: 0;
           max-height: inherit;
         }
-    `,J.appendChild(Q);let Z=document.createElement("fig-button");Z.className="fig-select-trigger",Z.setAttribute("part","trigger"),Z.setAttribute("variant","ghost"),Z.setAttribute("aria-haspopup","listbox"),Z.setAttribute("aria-expanded","false");let $=document.createElement("span");$.className="fig-select-prepend",$.setAttribute("part","prepend"),$.setAttribute("aria-hidden","true");let X=document.createElement("slot");X.setAttribute("name","prepend-trigger"),X.hidden=!0;let Y=document.createElement("span");Y.className="fig-select-prepend-fallback",$.append(X,Y);let j=document.createElement("span");j.className="fig-select-label",j.setAttribute("part","label");let K=document.createElement("slot");K.setAttribute("name","trigger"),K.hidden=!0,Z.append($,j,K);let W=document.createElement("dialog",{is:"fig-popup"});if(W.setAttribute("is","fig-popup"),W.setAttribute("part","listbox"),W.setAttribute("theme","menu"),W.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)W.setAttribute("popover","manual");W.id=p(),Z.setAttribute("aria-controls",W.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),W.appendChild(U),J.append(Z,W),this.#K=Z,this.#j=$,this.#W=X,this.#J=Y,this.#F=K,this.#L=j,this.#Z=W,this.#z=U,this.#E(),this.#m(),this.#r(),!this.hasAttribute("value")){let L=this.#s().find((z)=>T(z,"selected"));if(L)this.setAttribute("value",L.value)}}#r(){if(!this.#Z||this.#U)return;if(typeof this.#Z.positionPopup!=="function")return;this.#Q=this.#Z.positionPopup.bind(this.#Z),this.#Z.positionPopup=()=>{if(!this.open){this.#Q?.();return}this.#OJ()},this.#U=!0}#n(J){if(!J)return null;let Q=document.createRange();Q.selectNodeContents(J);let Z=[...Q.getClientRects()].filter(($)=>$.width>0&&$.height>0);if(Z.length)return Z[0];return J.getBoundingClientRect()}#x(){if(typeof this.#Z?.parseViewportMargins==="function")return this.#Z.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#o(){if(this.#f?.isConnected)return this.#f;let J=this.getAttribute("menu-anchor");if(J)try{let Q=this.parentElement?.querySelector(J);if(Q&&Q!==this&&!this.contains(Q))return Q;let $=this.getRootNode()?.querySelector?.(J);if($&&$!==this&&!this.contains($))return $}catch{}return this.#K}#E(){if(!this.#Z)return;if(this.#Z.anchor=this.#o(),!this.open)return;this.#$=!1,this.#N=null,this.#k=null,this.#Z.queueReposition?.()}#w(){let J=this.#o();if(J&&J!==this.#K){let $=J.getBoundingClientRect();if($?.width&&$?.height)return $}let Q=this.#L?.getBoundingClientRect();if(Q?.width&&Q?.height)return Q;let Z=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;return this.#j?.getBoundingClientRect()??null}#a(){let J=this.#w();if(!J)return null;return{x:J.x,y:J.y,width:J.width,height:J.height}}#UJ(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#CJ(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.x-Q.x)>Z||Math.abs(J.y-Q.y)>Z||Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z}#EJ(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z||Math.abs(J.offsetLeft-Q.offsetLeft)>Z||Math.abs(J.offsetTop-Q.offsetTop)>Z}#AJ(){if(!this.#$)return!1;let J=this.#CJ(this.#N,this.#a()),Q=this.#EJ(this.#k,this.#UJ());return!J&&!Q}#QJ(){this.#N=this.#a(),this.#k=this.#UJ()}#qJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#PJ(){if(!this.#Z)return;this.#Z.style.removeProperty("left"),this.#Z.style.removeProperty("top"),this.#Z.style.removeProperty("right"),this.#Z.style.removeProperty("bottom")}#OJ(){if(this.#qJ()){this.#$=!1,this.#N=null,this.#k=null,this.#PJ(),this.#Q?.(),this.#GJ();return}this.#SJ()}#GJ(){let J=this.#Z;if(!J||typeof J.clampToViewport!=="function")return;let Q=J.getBoundingClientRect();if(!Q.width||!Q.height)return;let Z=this.#x(),{left:$,top:X}=J.clampToViewport({left:Q.left,top:Q.top},Q,Z);J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round($)}px`,"important"),J.style.setProperty("top",`${Math.round(X)}px`,"important")}#SJ(){if(this.#AJ()){this.#GJ();return}let J=this.#Z,Q=this.#L;if(!J||!Q){this.#Q?.();return}let Z=this.#s(),$=Z.find((R)=>this.#D(R)===this.value)||Z[0];if(!$){this.#Q?.();return}this.#Q?.();let X=J.getBoundingClientRect(),Y=this.#w(),j=this.#n($);if(!X.width||!X.height||!Y.width||!j)return;let K=j.left-X.left,W=j.top-X.top,L=T(this,"full")?this.getBoundingClientRect().left:Y.left-K,z=Y.top-W,O=this.#x();if(typeof J.clampToViewport==="function")({left:L,top:z}=J.clampToViewport({left:L,top:z},X,O));else{let{left:R,top:_}=O,k=window.innerWidth-X.width-O.right,V=window.innerHeight-X.height-O.bottom;L=Math.min(Math.max(L,R),Math.max(R,k)),z=Math.min(Math.max(z,_),Math.max(_,V))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(L)}px`,"important"),J.style.setProperty("top",`${Math.round(z)}px`,"important");let f=this.#A(),H=this.#n($);if(H&&f&&f.scrollHeight>f.clientHeight+1){let R=H.top-Y.top;if(Math.abs(R)>0.5)f.scrollTop+=R;f.syncOverflow?.()}if(this.#$||this.open)this.#QJ()}#HJ(){this.#K?.addEventListener("click",this.#v),this.#K?.addEventListener("keydown",this.#R),this.addEventListener("click",this.#q),this.addEventListener("pointerover",this.#H),this.#Z?.addEventListener("keydown",this.#R),this.#Z?.addEventListener("close",this.#_),this.#z?.addEventListener("slotchange",this.#C)}#IJ(){this.#K?.removeEventListener("click",this.#v),this.#K?.removeEventListener("keydown",this.#R),this.removeEventListener("click",this.#q),this.removeEventListener("pointerover",this.#H),this.#Z?.removeEventListener("keydown",this.#R),this.#Z?.removeEventListener("close",this.#_),this.#z?.removeEventListener("slotchange",this.#C)}#y(){this.#m(),this.#P()}#xJ(){if(this.#B)return;this.#B=new MutationObserver((J)=>{if(this.#Y||this.#M)return;let Q=!1;for(let Z of J){if(Z.type==="childList"){if([...Z.addedNodes].some(($)=>this.#I($))||[...Z.removedNodes].some(($)=>this.#I($))||Z.target?.closest?.("fig-select-option"))Q=!0}if(Z.type==="attributes"&&Z.target?.tagName==="FIG-SELECT-OPTION"){if(Z.attributeName==="value"||Z.attributeName==="disabled"||Z.attributeName==="label")Q=!0;else if(Z.attributeName==="selected"){if(T(Z.target,"selected")){let $=this.#D(Z.target);if((this.getAttribute("value")??"")!==$)this.setAttribute("value",$),Q=!0}else if(this.#D(Z.target)===(this.getAttribute("value")??""))Q=!0}}if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#P()}),this.#B.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#s({enabledOnly:J=!1}={}){let Q=this.#A(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!T($,"disabled"))}#D(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Q=J.getAttribute?.("value");if(Q!=null)return Q;return(J.textContent||"").trim()}#ZJ(J){if(!J)return"";let Q=J.getAttribute?.("label");if(Q!=null&&Q!=="")return Q.trim();let Z=[];for(let $ of J.childNodes){if($.nodeType===Node.TEXT_NODE){let j=$.textContent?.trim();if(j)Z.push(j);continue}if(!($ instanceof Element))continue;let X=$.getAttribute("slot");if(X==="prepend"||X==="append")continue;let Y=$.textContent?.trim();if(Y)Z.push(Y)}if(Z.length)return Z.join(" ").trim();return(J.textContent||"").trim()}#u(J){if(!this.#j||!this.#W||!this.#J||!this.#F)return;let Q=this.querySelector(':scope > [slot="trigger"]'),Z=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),$=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),X=J?.querySelector?.(':scope > [slot="prepend"]');if(this.#F.hidden=!Q,this.#L.hidden=Boolean(Q),this.#j.hidden=Boolean(Q),Q){Z?.remove(),this.#j.classList.remove("has-content"),this.#W.hidden=!0,this.#J.replaceChildren();return}if(!$&&X?.childNodes.length){let j=Z||document.createElement("span");if(j.setAttribute("slot","prepend-trigger"),j.setAttribute("data-fig-select-generated",""),j.replaceChildren(...Array.from(X.childNodes,(K)=>K.cloneNode(!0))),j.parentElement!==this)this.append(j);$=j}else if($)Z?.remove();else Z?.remove();let Y=Boolean($);if(this.#j.classList.toggle("has-content",Y),this.#W.hidden=!$,this.#J.hidden=Boolean($),$){this.#J.replaceChildren();return}this.#J.replaceChildren()}#BJ(){if(!this.#Z)return;this.#Z.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#Z.setAttribute("offset",J);else this.#Z.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#Z.setAttribute("closedby",Q);else this.#Z.removeAttribute("closedby")}#RJ(){let J=T(this,"disabled");if(this.#K)if(J)this.#K.setAttribute("disabled","");else this.#K.removeAttribute("disabled");if(J&&this.open)this.open=!1}#_J(J){if(!J.length)return null;let Q=J.find((Z)=>T(Z,"selected"));if(Q&&!T(Q,"disabled"))return Q;return J.find((Z)=>!T(Z,"disabled"))||J[0]||null}#V(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#P(){if(this.#Y)return;this.#Y=!0;try{let J=this.#s(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((K)=>this.#D(K)===Z):null,X=!1;if(!$){if(Q){if(!J.length){if(this.#L)this.#L.textContent=Z||this.getAttribute("label")||"";return}if($=this.#_J(J),$){let K=this.#D($);if(Z!==K)this.setAttribute("value",K),X=!0}else this.removeAttribute("value"),X=!0}else if($=J.find((K)=>T(K,"selected")),$)this.setAttribute("value",this.#D($)),X=!0}for(let K of J){let W=K===$;if(K.setAttribute("aria-selected",W?"true":"false"),W)K.setAttribute("selected","");else K.removeAttribute("selected")}let Y=$&&this.#ZJ($)||this.getAttribute("label")||"";if(this.#L)this.#L.textContent=Y;this.#u($);let j=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#K?.setAttribute("aria-label",j),this.#A()?.syncOverflow?.(),X)this.#V(this.getAttribute("value")??"")}finally{this.#Y=!1}}#$J(J){if(T(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=!this.open;if(Q)this.#E();this.open=Q}#wJ(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(T(Z,"disabled"))return;this.#MJ(Z)}#TJ(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(T(Z,"disabled"))return;if(J.relatedTarget instanceof Node&&Z.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#D(Z),bubbles:!0,composed:!0}))}#kJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#Z?.matches?.(":open")??!1))){if(this.#K?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#E(),this.open=!0,requestAnimationFrame(()=>{let X=this.#s({enabledOnly:!0}).findIndex((Y)=>this.#D(Y)===this.value);this.#d(X>=0?X:0)});return}let Z=this.#s({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#LJ(),this.#d(this.#G+1,!0);break;case"ArrowUp":J.preventDefault(),this.#LJ(),this.#d(this.#G-1,!0);break;case"Home":J.preventDefault(),this.#d(0,!0);break;case"End":J.preventDefault(),this.#d(Z.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#K?.focus();break;case"Enter":case" ":{this.#LJ();let $=Z[this.#G];if(!$)return;J.preventDefault(),this.#MJ($);break}}}#t(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#K?.setAttribute("aria-expanded","false"),this.#K?.focus(),this.#G=-1}#MJ(J){let Q=this.#D(J);this.setAttribute("value",Q),this.#P(),this.#V(Q),this.open=!1}#i(){return this.#s({enabledOnly:!0})}#LJ(){let J=this.#i();if(!J.length){this.#G=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#G=Z>=0?Z:this.#G}#d(J,Q=!1){let Z=this.#i();if(!Z.length)return;let $=(J%Z.length+Z.length)%Z.length,X=Z[$],Y=document.activeElement!==X;if(this.#G=$,X?.focus(),Q&&Y)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#D(X),bubbles:!0,composed:!0}))}#NJ(){if(!this.#Z||!this.#K)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#K.getBoundingClientRect().width),Z=Math.max(J,Q,96),$=window.visualViewport?.width??window.innerWidth,X=window.visualViewport?.height??window.innerHeight,Y=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,j=Math.max(0,Math.min(Math.floor(20*Y),Math.floor($-16))),K=Math.max(0,Math.floor(X-16));this.#Z.style.setProperty("box-sizing","border-box","important"),this.#Z.style.setProperty("padding","0","important"),this.#Z.style.setProperty("border","0","important"),this.#Z.style.setProperty("margin","0","important"),this.#Z.style.setProperty("width",`min(max-content, ${j}px)`,"important"),this.#Z.style.setProperty("min-width",`${Z}px`,"important"),this.#Z.style.setProperty("max-width",`${j}px`,"important"),this.#Z.style.setProperty("max-height",`${K}px`,"important"),this.#Z.style.setProperty("height","auto","important"),this.#Z.style.setProperty("overflow","hidden","important");let W=this.#Z.getBoundingClientRect();if(W.height>K)this.#Z.style.setProperty("height",`${K}px`,"important");if(W.width>j)this.#Z.style.setProperty("width",`${j}px`,"important")}#b(){if(!this.#Z||T(this,"disabled"))return;this.#E(),this.#r(),this.#$=!1,this.#N=null,this.#k=null,this.#P(),this.#NJ(),this.#Z.open=!0,document.addEventListener("keydown",this.#R,!0),this.#K?.setAttribute("aria-expanded","true"),this.#G=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#NJ(),this.#OJ(),this.#NJ(),this.#GJ();let J=this.#A(),Z=this.#i().findIndex(($)=>this.#D($)===this.value);if(Z>=0)this.#d(Z);else if(this.#K?.hasAttribute("data-focus-visible")||this.#K?.matches?.(":focus-visible"))this.#d(0);if(J?.syncOverflow?.(),!this.#qJ())this.#$=!0,this.#QJ()})})}#S(){if(!this.#Z)return;this.#$=!1,this.#N=null,this.#k=null,document.removeEventListener("keydown",this.#R,!0),this.#Z.open=!1,this.#K?.setAttribute("aria-expanded","false")}}A("fig-select",c);var ZJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],$J=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function N(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase();if(!ZJ.includes(Z))Z="srgb";Q.interpolationSpace=Z;let $=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=$J.includes($)?$:"shorter",Q}function S(J){let Q=N(J);return Q.interpolationSpace="srgb",delete Q.hueInterpolation,Q}function P(J){let Q=S(J),Z={...Q,interpolationSpace:Q.interpolationSpace};if(E.has(Q.interpolationSpace))Z.hueInterpolation=Q.hueInterpolation;else delete Z.hueInterpolation;return Z}function XJ(J){let Q=N(J);if(Q.interpolationSpace==="srgb")return"";if(E.has(Q.interpolationSpace))return`in ${Q.interpolationSpace} ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}function g(J){let Q=N(J);if(E.has(Q.interpolationSpace))return`${Q.interpolationSpace}-${Q.hueInterpolation||"shorter"}`;return Q.interpolationSpace}function F(J){let Q=String(J??"");for(let Z of E){let $=`${Z}-`;if(Q.startsWith($))return{interpolationSpace:Z,hueInterpolation:Q.slice($.length)||"shorter"}}return{interpolationSpace:Q||"srgb",hueInterpolation:"shorter"}}var YJ=0;class y extends HTMLElement{static#K=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#Z(J){let Q=y.#K,Z=Q.find((K)=>K.value===J);if(Z)return Z;let $=F(J),X=Q.find((K)=>K.space===$.interpolationSpace),Y=X?.subtitle.split(" ")[0]??$.interpolationSpace.toUpperCase(),j=$.hueInterpolation;return{value:J,space:$.interpolationSpace,title:X?.title??"Custom",subtitle:E.has($.interpolationSpace)?`${Y} ${j.charAt(0).toUpperCase()}${j.slice(1)}`:Y}}#j=null;#W=null;#J=null;#F=`fig-fill-picker-dialog-${++YJ}`;#L="solid";anchorElement=null;#z="solid";#B="srgb";#X={h:0,s:0,v:85,a:1};#G="hex";#Y={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#U={url:null,scaleMode:"fill",scale:50};#Q={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#$={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#N=null;#k=!1;#M=null;#f={};#v={};#q=null;#H=null;#R=null;#_=null;#C=!1;#T=!1;#I=null;#m=null;#A=null;#c=null;#zJ=null;#p=0;#JJ=null;#r=null;#n=new Set;#x=new Set;#o=null;#E=null;constructor(){super();this.#JJ=this.#BJ.bind(this),this.#r=this.#RJ.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#y(()=>{this.#D(),this.#_J(),this.#V(),this.#oJ()})}disconnectedCallback(){if(this.#TJ({stopWebcam:!0}),this.#xJ(),this.#s(),this.#W)this.#W.removeAttribute("selected");if(this.#j)this.#j.removeEventListener("click",this.#JJ),this.#j.removeEventListener("keydown",this.#r);this.#j=null,this.#W=null}#w(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#a(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#UJ(){return this.#z==="webcam"&&this.#a()==="live"&&this.#$.live!==!1}#CJ(){return{live:this.#a()==="live"&&this.#$.live!==!1,snapshot:this.#$.snapshot??null,deviceId:this.#$.deviceId??null,scaleMode:this.#$.scaleMode||"fill",scale:this.#$.scale??50,opacity:this.#$.opacity??1}}#EJ(){let J=this.#Q.url??null;return{url:J,poster:this.#Q.poster??null,scaleMode:this.#Q.scaleMode||"fill",scale:this.#Q.scale??50,opacity:this.#Q.opacity??1,...J?{}:{missing:!0}}}#AJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Q,snapshot:Z,...$}=J.webcam;if(Object.assign(this.#$,$),typeof Z==="string"&&Z)this.#$.snapshot=Z;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#$.snapshot=J.image.url;if(J.image.scaleMode)this.#$.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#$.scale=J.image.scale}}#QJ(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#$.stream,deviceId:this.#$.deviceId??null}}))}get webcamStream(){return this.#$.stream}releaseWebcam(){this.#t()}#qJ(J){if(!J)return null;if(this.#$.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#$.snapshot),this.#x.delete(this.#$.snapshot);return this.#$.snapshot=URL.createObjectURL(J),this.#x.add(this.#$.snapshot),this.#$.snapshot}#PJ(J,Q,Z){if(typeof J.getImageData!=="function")return!1;let $;try{$=J.getImageData(0,0,Q,Z).data}catch{return!1}let X=Math.max(1,Math.floor(Q*Z/256)),Y=0,j=0,K=0;for(let W=0;W<$.length;W+=X*4){let U=Math.max($[W],$[W+1],$[W+2]);if(Y=Math.max(Y,U),K+=1,U>24)j+=1}if(!K)return!0;return Y<=40||j/K<0.04}async#OJ(J){let Q=[],Z=this.#$.stream?.getVideoTracks?.()?.[0];if(Z&&typeof ImageCapture==="function")try{if(this.#M?.track!==Z)this.#M=new ImageCapture(Z);Q.push(await this.#M.grabFrame())}catch{this.#M=null}if(typeof createImageBitmap==="function")try{Q.push(await createImageBitmap(J))}catch{}return Q.push(J),Q.filter(Boolean)}async#GJ(J,Q,Z,$){let X=await this.#OJ(Q);for(let Y of X){try{J.drawImage(Y,0,0,Z,$)}catch{continue}finally{Y.close?.()}if(!this.#PJ(J,Z,$))return!0}return!1}#SJ(J){return new Promise((Q)=>{if(typeof J.requestVideoFrameCallback==="function"){let Z=setTimeout(()=>Q(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout(Z),Q(!0)});return}setTimeout(()=>Q(!1),200)})}async#HJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Q=document.createElement("canvas");Q.width=J.videoWidth,Q.height=J.videoHeight;let Z=Q.getContext("2d",{willReadFrequently:!0});if(!Z)return null;if(!await this.#GJ(Z,J,Q.width,Q.height))return null;let X=await new Promise((Y)=>Q.toBlob(Y,"image/png"));return this.#qJ(X)}#IJ(J){if(this.#z!=="webcam")return;let Q=this.#$.stream;if(!Q)return;if(this.#N===Q&&this.#$.snapshot){this.#V();return}if(this.#k)return;this.#k=!0;let Z=(X)=>{if(this.#k=!1,!X||this.#z!=="webcam"||this.#$.stream!==Q)return;this.#N=Q,this.#V()},$=async()=>{let X=await this.#HJ(J);if(X){Z(X);return}if(this.#z!=="webcam"||this.#$.stream!==Q){this.#k=!1;return}return await this.#SJ(J),$()};$()}#y(J){let Q=requestAnimationFrame(()=>{if(this.#n.delete(Q),this.isConnected)J()});return this.#n.add(Q),Q}#xJ(){this.#n.forEach((J)=>cancelAnimationFrame(J)),this.#n.clear()}#s(){let J=new Set([this.#$.snapshot,this.#Q.poster,this.#U.url].filter((Q)=>typeof Q==="string"&&Q.startsWith("blob:")));this.#x.forEach((Q)=>{if(!J.has(Q))URL.revokeObjectURL(Q)}),this.#x.clear(),J.forEach((Q)=>this.#x.add(Q))}#D(){let J=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#W=document.createElement("fig-swatch"),this.#W.setAttribute("background","#D9D9D9"),this.appendChild(this.#W),this.#j=this.#W;else if(J.matches("fig-swatch, fig-chit"))this.#W=J,this.#j=J;else this.#j=J,this.#W=null;if(this.#u(),this.#j.removeEventListener("click",this.#JJ),this.#j.addEventListener("click",this.#JJ),this.#j.removeEventListener("keydown",this.#r),this.#j.addEventListener("keydown",this.#r),this.#W)this.#y(()=>{let Q=this.#W.querySelector('input[type="color"]');if(Q)Q.remove();this.#u()})}#ZJ(){return this.getAttribute("aria-label")||"Fill picker"}#u(){if(!this.#j)return;let J=this.#w(),Q=this.getAttribute("aria-labelledby");if(!this.#j.hasAttribute("role"))this.#j.setAttribute("role","button");if(this.#j.setAttribute("tabindex",J?"-1":"0"),this.#j.setAttribute("aria-disabled",J?"true":"false"),this.#j.setAttribute("aria-haspopup","dialog"),this.#j.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#j.setAttribute("aria-controls",this.#F),this.#j.removeAttribute("aria-hidden"),Q)this.#j.setAttribute("aria-labelledby",Q),this.#j.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#ZJ()}`),this.#j.removeAttribute("aria-labelledby");else if(this.#j.removeAttribute("aria-labelledby"),!this.#j.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#ZJ()}`);let Z=this.getAttribute("aria-describedby");if(Z)this.#j.setAttribute("aria-describedby",Z);else this.#j.removeAttribute("aria-describedby")}#BJ(J){if(this.#w())return;J.stopPropagation(),J.preventDefault(),this.#$J()}#RJ(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#w())return;J.preventDefault(),J.stopPropagation(),this.#$J()}#_J(){let J=this.getAttribute("value");if(!J)return;let Q=["solid","gradient","image","video","webcam"];try{let Z=JSON.parse(J);if(Z.type)this.#z=Z.type;if(Z.color){if(typeof Z.color==="string")this.#X=this.#WJ(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#X=Z.color}let $=Z.alpha!==void 0?Number(Z.alpha):Z.opacity!==void 0?Number(Z.opacity)/100:void 0;if(Number.isFinite($))this.#X.a=Math.max(0,Math.min(1,$));if(this.#B="srgb",Z.gradient)this.#Y=S({...this.#Y,...Z.gradient});if(Z.image)this.#U={...this.#U,...Z.image};if(Z.video){let X=this.#Q.url;if(this.#Q={...this.#Q,...Z.video},this.#Q.missing=!this.#Q.url,Z.video.poster!=null&&Z.video.poster!=="")this.#E=this.#Q.url;else if(this.#Q.url!==X)this.#jJ();else this.#yJ()}if(this.#AJ(Z),Z.type&&!Q.includes(Z.type)){let{type:X,...Y}=Z;this.#v[Z.type]=Y}}catch(Z){if(J.startsWith("#")){this.#z="solid",this.#X=this.#WJ(J);return}if(d(J)){let $=this.#Q.url;if(this.#z="video",this.#Q.url=J.trim(),this.#Q.missing=!1,this.#Q.url!==$)this.#jJ();else this.#yJ()}}}#V(){if(!this.#W)return;let J,Q="cover",Z="center";switch(this.#z){case"solid":J=this.#l(this.#X);break;case"gradient":J=this.#nJ();break;case"image":if(this.#U.url){J=I(this.#U.url);let $=this.#P(this.#U.scaleMode,this.#U.scale);Q=$.size,Z=$.position}else J="";break;case"video":if(this.#Q.poster){J=I(this.#Q.poster);let $=this.#P(this.#Q.scaleMode,this.#Q.scale);Q=$.size,Z=$.position}else J="";break;case"webcam":if(this.#$.snapshot){J=I(this.#$.snapshot);let $=this.#P(this.#$.scaleMode,this.#$.scale);Q=$.size,Z=$.position}else J="";break;default:{J=(this.#f[this.#z]?.element||this.querySelector(`[slot="mode-${this.#z}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#W.setAttribute("background",J),this.#W.style.setProperty("--swatch-bg-size",Q),this.#W.style.setProperty("--swatch-bg-position",Z),this.#z==="solid")this.#W.setAttribute("alpha",this.#X.a);else this.#W.removeAttribute("alpha")}#P(J,Q){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#$J(){if(this.#w())return;if(!this.#J)this.#MJ();else this.#J.anchor=this.anchorElement||this.#j;if(this.#i(this.#z,{emit:!1}),this.#A=JSON.stringify(this.value),this.#c=this.#A,this.#W)this.#W.setAttribute("selected","true");this.#J.open=!0,this.#u(),this.#y(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#y(()=>{this.#b(),this.#S()})})}open(){this.#$J()}close(){if(this.#J)this.#J.open=!1,this.#u()}#wJ(){if(!this.#J)return;for(let[J,{element:Q}]of Object.entries(this.#f)){let Z=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find(($)=>$.dataset.tab===J);if(!Z)continue;while(Z.firstChild)Q.appendChild(Z.firstChild)}}#TJ({stopWebcam:J=!1}={}){if(this.#I)this.#I(),this.#I=null;if(this.#m?.disconnect(),this.#m=null,!J&&this.#UJ())this.#kJ();else this.#t();if(!this.#J)return;this.#wJ(),this.#J.remove(),this.#J=null,this.#zJ=null,this.#A=null,this.#c=null,this.#q=null,this.#H=null,this.#R=null,this.#_=null,this.#T=!1,this.#u()}#kJ(){this.#p+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#t({emit:J=!0}={}){this.#p+=1;let Q=Boolean(this.#$.stream);if(this.#$.stream)this.#$.stream.getTracks().forEach(($)=>$.stop()),this.#$.stream=null;this.#N=null,this.#k=!1,this.#M=null;let Z=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(Z)Z.srcObject=null;if(Q&&J)this.#QJ()}#MJ(){this.#f={},this.querySelectorAll('[slot^="mode-"]').forEach((O)=>{let f=O.getAttribute("slot").slice(5);this.#f[f]={element:O,label:O.getAttribute("label")||f.charAt(0).toUpperCase()+f.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#F,this.#J.setAttribute("aria-label",this.#ZJ()),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#j;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},$=this.getAttribute("mode"),X;if($){if(X=$.split(",").map((f)=>f.trim().toLowerCase()).filter((f)=>Q.includes(f)||this.#f[f]),X.length===0)X=[...Q]}else X=[...Q];let Y={...Z};for(let[O,{label:f}]of Object.entries(this.#f))Y[O]=f;if(!X.includes(this.#z))this.#z=X[0],this.#L=X[0];let j;if(X.length===1)j=G("h3",{className:"fig-fill-picker-type-label"},Y[X[0]]);else{let O=G("fig-select-options",{},X.map((f)=>G("fig-select-option",{value:f},Y[f])));j=G("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#z},O)}let K=X.map((O)=>G("div",{className:"fig-fill-picker-tab","data-tab":O})),W=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},C("close"));this.#J.replaceChildren(G("fig-header",{},[j,W]),G("fig-content",{},K)),document.body.appendChild(this.#J);for(let[O,{element:f}]of Object.entries(this.#f)){let H=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((R)=>R.dataset.tab===O);if(!H)continue;while(f.firstChild)H.appendChild(f.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:O,container:H}}))}let U=this.#J.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(O)=>{let f=typeof O.detail==="string"?O.detail:O.target?.value;if(f)this.#i(f)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let L=()=>{if(this.#W)this.#W.removeAttribute("selected");if(this.#UJ())this.#kJ();else this.#t();let O=JSON.stringify(this.value);if(this.#c!==null&&this.#c!==O)this.#h();this.#A=null,this.#c=null,this.#u();let f=this.#j;this.#y(()=>{if(f?.isConnected)HTMLElement.prototype.focus.call(f)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",L);let z={solid:()=>this.#d(),gradient:()=>this.#ZQ(),image:()=>this.#UQ(),video:()=>this.#GQ(),webcam:()=>this.#qQ()};for(let[O,f]of Object.entries(z))if(!this.#f[O]&&X.includes(O))f();for(let O of Object.keys(this.#f)){if(Q.includes(O))continue;let f=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((H)=>H.dataset.tab===O);if(!f)continue;f.addEventListener("input",(H)=>{if(H.target===this)return;if(H.stopPropagation(),H.detail)this.#v[O]=H.detail;this.#O()}),f.addEventListener("change",(H)=>{if(H.target===this)return;if(H.stopPropagation(),H.detail)this.#v[O]=H.detail;this.#h()})}}#i(J,{emit:Q=!0}={}){let Z=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!Z)return;let $=this.#L;if(this.#L=J,this.#z=J,$==="webcam"&&J!=="webcam")this.#t();let X=this.#J.querySelector(".fig-fill-picker-type");if(X&&X.value!==J)X.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((K)=>{if(K.dataset.tab===J)K.style.display="block";else K.style.display="none"});let j=this.#J.querySelector("fig-content");if(j)j.style.padding=this.#f[J]?"0":"";if(J==="gradient")this.#y(()=>{this.#g();let K=Z.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#y(()=>{K?.refreshLayout?.()})});if(J==="video")this.#DJ({emit:!1});if(J==="webcam")this.#$.live=this.#a()==="live",this.#zJ?.(this.#$.deviceId);if(this.#V(),Q)this.#O()}#LJ(){if(!this.#J?.open)return;if(this.#i(this.#z,{emit:!1}),this.#b(),this.#S(),this.#XJ(),this.#R)this.#R.setAttribute("value",this.#X.h);if(this.#_)this.#_.setAttribute("value",this.#X.a*100),this.#_.setAttribute("color",this.#l(this.#X));this.#g();let J=this.#J.querySelector('[data-tab="image"]'),Q=J?.querySelector(".fig-fill-picker-scale-mode"),Z=J?.querySelector(".fig-fill-picker-scale"),$=J?.querySelector(".fig-fill-picker-image-preview");if(Q)Q.value=this.#U.scaleMode;if(Z)Z.setAttribute("value",this.#U.scale),Z.style.display=this.#U.scaleMode==="tile"?"block":"none";if($)this.#e($);let X=this.#J.querySelector('[data-tab="video"]'),Y=X?.querySelector(".fig-fill-picker-scale-mode"),j=X?.querySelector(".fig-fill-picker-video-preview");if(Y)Y.value=this.#Q.scaleMode;if(j)this.#YJ(j)}#d(){let J=this.#J.querySelector('[data-tab="solid"]'),Q=this.getAttribute("alpha")!=="false",Z=G("canvas",{width:"200",height:"200"}),$=G("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#l({...this.#X,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),X=G("fig-preview",{className:"fig-fill-picker-color-area"},[Z,$]),Y=G("fig-tooltip",{text:"Sample color"},G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},C("eyedropper"))),j=G("div",{className:`fig-fill-picker-sliders${Q?"":" is-hue-only"}`},[Y,G("fig-slider",{type:"hue",variant:"classic",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#X.h}),Q?G("fig-slider",{type:"opacity",variant:"classic",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#X.a*100,color:this.#l(this.#X)}):null]),K=G("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([z,O])=>G("fig-select-option",{value:z},O))),W=G("fig-field",{className:"fig-fill-picker-inputs"},[G("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#G},K),G("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(X,j,W),this.#q=J.querySelector("canvas"),this.#H=J.querySelector("fig-handle"),this.#uJ(),this.#b(),this.#S(),this.#dJ(),this.#R=J.querySelector('fig-slider[type="hue"]'),this.#R.addEventListener("input",(z)=>{this.#X.h=parseFloat(z.target.value),this.#b(),this.#S(),this.#XJ(),this.#O()}),this.#R.addEventListener("change",()=>{this.#h()}),Q)this.#_=J.querySelector('fig-slider[type="opacity"]'),this.#_.addEventListener("input",(z)=>{this.#X.a=parseFloat(z.target.value)/100,this.#XJ(),this.#O()}),this.#_.addEventListener("change",()=>{this.#h()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(!O)return;this.#G=O,this.#sJ()}),this.#sJ();let L=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)L.addEventListener("click",async()=>{try{let O=await new EyeDropper().open();this.#X={...this.#WJ(O.sRGBHex),a:this.#X.a},this.#b(),this.#S(),this.#XJ(),this.#O()}catch(z){}});else L.setAttribute("disabled",""),L.title="EyeDropper not supported in this browser"}#NJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Q=J.querySelector("canvas");if(Q){let Z=document.createElement("canvas");Z.width=Q.width,Z.height=Q.height,Q.replaceWith(Z),this.#q=Z,this.#dJ()}this.#b(),this.#S()}this.#fJ(),this.#O()}#b(){if(!this.#q&&this.#J)this.#q=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#q)return;let J=this.#B==="display-p3"?"display-p3":"srgb",Q=this.#q.getContext("2d",{colorSpace:J});if(!Q)return;let Z=this.#q.width,$=this.#q.height;Q.clearRect(0,0,Z,$);let X=this.#X.h,Y=this.#B==="display-p3",j=Q.createLinearGradient(0,0,Z,0);if(Y){j.addColorStop(0,"color(display-p3 1 1 1)");let[W,U,L]=hslToP3(X,100,50);j.addColorStop(1,`color(display-p3 ${W} ${U} ${L})`)}else j.addColorStop(0,"#FFFFFF"),j.addColorStop(1,`hsl(${X}, 100%, 50%)`);Q.fillStyle=j,Q.fillRect(0,0,Z,$);let K=Q.createLinearGradient(0,0,0,$);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=K,Q.fillRect(0,0,Z,$)}#S(J=0){if(!this.#H||!this.#q)return;this.#uJ();let Q=this.#q.getBoundingClientRect();if((Q.width===0||Q.height===0)&&J<5){this.#y(()=>this.#S(J+1));return}let Z=Math.max(0,Math.min(100,this.#X.s)),$=Math.max(0,Math.min(100,100-this.#X.v));this.#H.setAttribute("value",`${Z}% ${$}%`),this.#H.setAttribute("color",this.#l({...this.#X,a:1}))}#uJ(){if(!this.#H)return;this.#H.setAttribute("aria-valuenow",String(Math.round(this.#X.v))),this.#H.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#X.s)}%, brightness ${Math.round(this.#X.v)}%`),this.#H.removeAttribute("aria-pressed")}#bJ(J,Q,Z={}){let{updateHandle:$=!0,emitInput:X=!0,emitChange:Y=!1}=Z;if(this.#X.s=Math.max(0,Math.min(100,J*100)),this.#X.v=Math.max(0,Math.min(100,(1-Q)*100)),this.#H)this.#H.setAttribute("color",this.#l({...this.#X,a:1})),this.#uJ();if($)this.#S();if(this.#XJ(),X)this.#O();if(Y)this.#h()}#dJ(){if(this.#I)this.#I(),this.#I=null;if(!this.#q||!this.#H)return;let J=this.#q.parentElement||this.#q,Q=this.#H,Z=!1,$=(U,L={})=>{let z=J.getBoundingClientRect();if(z.width===0||z.height===0)return;let O=Math.max(0,Math.min(U.clientX-z.left,z.width)),f=Math.max(0,Math.min(U.clientY-z.top,z.height));this.#bJ(O/z.width,f/z.height,L)},X=(U)=>{if(U.button!==0)return;if(U.target===Q||Q.contains(U.target))return;Z=!0,this.#C=!0,J.setPointerCapture(U.pointerId),$(U,{updateHandle:!0,emitInput:!0})},Y=(U)=>{if(!Z)return;if(U.buttons===0){j();return}$(U,{updateHandle:!0,emitInput:!0})},j=()=>{if(!Z)return;Z=!1,this.#C=!1,this.#h()},K=(U)=>{this.#C=!0;let L=U.detail?.px,z=U.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(z))return;Q.setAttribute("value",`${L*100}% ${z*100}%`),this.#bJ(L,z,{updateHandle:!1,emitInput:!0})},W=(U)=>{let L=U.detail?.px,z=U.detail?.py;if(Number.isFinite(L)&&Number.isFinite(z))Q.setAttribute("value",`${L*100}% ${z*100}%`),this.#bJ(L,z,{updateHandle:!1,emitInput:!1});this.#C=!1,this.#h()};J.addEventListener("pointerdown",X),J.addEventListener("pointermove",Y),J.addEventListener("pointerup",j),J.addEventListener("pointercancel",j),J.addEventListener("lostpointercapture",j),Q.addEventListener("input",K),Q.addEventListener("change",W),this.#I=()=>{J.removeEventListener("pointerdown",X),J.removeEventListener("pointermove",Y),J.removeEventListener("pointerup",j),J.removeEventListener("pointercancel",j),J.removeEventListener("lostpointercapture",j),Q.removeEventListener("input",K),Q.removeEventListener("change",W),this.#C=!1}}#sJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=(K,W)=>G("fig-tooltip",{text:K},W),Z=(K,W,U,L,z,O)=>G("fig-input-number",{className:K,"aria-label":W,min:U,max:L,step:z,units:O}),$=this.getAttribute("alpha")!=="false",X=()=>$?Q("Alpha",Z("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Y=(K,W="")=>G("div",{className:["input-combo",W].filter(Boolean).join(" ")},K),j;switch(this.#G){case"rgb":j=Y([Q("Red",Z("fig-fill-picker-ci-r","Red",0,255)),Q("Green",Z("fig-fill-picker-ci-g","Green",0,255)),Q("Blue",Z("fig-fill-picker-ci-b","Blue",0,255)),X()]);break;case"hsl":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Lightness",Z("fig-fill-picker-ci-l","Lightness",0,100)),X()]);break;case"hsb":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Brightness",Z("fig-fill-picker-ci-v","Brightness",0,100)),X()]);break;case"lab":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Green-Red axis",Z("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Q("Blue-Yellow axis",Z("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),X()]);break;case"lch":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Chroma",Z("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Q("Hue",Z("fig-fill-picker-ci-okh","Hue",0,360)),X()]);break;case"css":j=G("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=G("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});j=$?Y([K,X()],"fig-fill-picker-ci-hex-row"):K}break}J.replaceChildren(j),this.#eJ(),this.#y(()=>this.#XJ())}#eJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=()=>{if(this.#C)return;let X=this.#QQ();if(!X)return;let Y=Number.isFinite(X.a)?X.a:this.#X.a;if(this.#X={...X,a:Y},this.#b(),this.#S(),this.#R)this.#R.setAttribute("value",this.#X.h);if(this.#_&&Number.isFinite(X.a))this.#_.setAttribute("value",this.#X.a*100);this.#O()},Z=()=>this.#h();J.querySelectorAll("fig-input-number, fig-input-text").forEach((X)=>{X.addEventListener("input",Q),X.addEventListener("change",Z)})}#JQ(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Q=parseFloat(J.value);if(!Number.isFinite(Q))return;return Math.max(0,Math.min(1,Q/100))}#QQ(){let J=($)=>this.#J?.querySelector(`.${$}`),Q=($)=>parseFloat(J($)?.value??0),Z=($)=>{if(!$)return null;let X=this.#JQ();return{...$,a:X??$.a??this.#X.a}};switch(this.#G){case"rgb":return Z(this.#KJ({r:Q("fig-fill-picker-ci-r"),g:Q("fig-fill-picker-ci-g"),b:Q("fig-fill-picker-ci-b")}));case"hsl":{let $=this.#NQ({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),l:Q("fig-fill-picker-ci-l")});return Z(this.#KJ($))}case"hsb":return Z({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),v:Q("fig-fill-picker-ci-v")});case"lab":{let $=this.#tJ({l:Q("fig-fill-picker-ci-okl")/100,a:Q("fig-fill-picker-ci-oka"),b:Q("fig-fill-picker-ci-okb")});return Z(this.#KJ($))}case"lch":{let $=this.#DQ({l:Q("fig-fill-picker-ci-okl")/100,c:Q("fig-fill-picker-ci-okc"),h:Q("fig-fill-picker-ci-okh")});return Z(this.#KJ($))}case"css":{let $=J("fig-fill-picker-ci-css");if(!$)return null;return this.#TQ($.value)}default:{let $=J("fig-fill-picker-ci-hex");if(!$)return null;let X=$.value.replace(/^#/,"");if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];if(X.length===8){let Y=parseInt(X.slice(6,8),16)/255;if(X=X.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(X))return null;return{...this.#WJ(`#${X}`),a:Y}}if(X.length!==6||!/^[0-9a-fA-F]{6}$/.test(X))return null;return Z(this.#WJ(`#${X}`))}}}#XJ(){if(!this.#J)return;let J=this.#l(this.#X),Q=this.#pJ(this.#X),Z=(X)=>this.#J.querySelector(`.${X}`),$=(X,Y)=>{let j=Z(X);if(j)j.setAttribute("value",Y)};switch(this.#G){case"rgb":$("fig-fill-picker-ci-r",Q.r),$("fig-fill-picker-ci-g",Q.g),$("fig-fill-picker-ci-b",Q.b);break;case"hsl":{let X=this.#MQ(Q);$("fig-fill-picker-ci-h",Math.round(X.h)),$("fig-fill-picker-ci-s",Math.round(X.s)),$("fig-fill-picker-ci-l",Math.round(X.l));break}case"hsb":$("fig-fill-picker-ci-h",Math.round(this.#X.h)),$("fig-fill-picker-ci-s",Math.round(this.#X.s)),$("fig-fill-picker-ci-v",Math.round(this.#X.v));break;case"lab":{let X=this.#aJ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-oka",+X.a.toFixed(3)),$("fig-fill-picker-ci-okb",+X.b.toFixed(3));break}case"lch":{let X=this.#yQ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-okc",+X.c.toFixed(3)),$("fig-fill-picker-ci-okh",Math.round(X.h));break}case"css":$("fig-fill-picker-ci-css",this.#_Q(this.#X));break;default:$("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#G!=="css"){let X=Math.round(this.#X.a*1000)/10;$("fig-fill-picker-ci-a",Number.isInteger(X)?X:+X.toFixed(1))}if(this.#_)this.#_.setAttribute("color",J);this.#V()}#ZQ(){let J=this.#J.querySelector('[data-tab="gradient"]'),Q=G("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#Y.type,variant:"ghost"},G("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,L])=>G("fig-select-option",{value:U},L)))),Z=(U,L,z)=>G("fig-tooltip",{text:U},G("fig-button",{icon:!0,variant:"ghost",className:L,"aria-label":U},C(z))),$=G("div",{className:"fig-fill-picker-gradient-actions"},[Z("Flip gradient","fig-fill-picker-gradient-flip","swap"),Z("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),X=G("fig-field",{className:"fig-fill-picker-gradient-header"},[Q,$]),Y=G("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:P(this.#Y)})}),j=G("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),K=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},C("add")),W=G("div",{className:"fig-fill-picker-gradient-stops"},[G("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[G("h3",{},"Stops"),K]),G("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(X,j,W),this.#g(),this.#$Q(J)}#FQ(){let J=({value:$,title:X,subtitle:Y,advanced:j=!1})=>G("fig-select-option",{value:$,label:`${X} — ${Y}`,className:j?"fig-fill-picker-gradient-interpolation-advanced":null},[G("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),G("span",{className:"fig-fill-picker-gradient-interpolation-label"},[G("span",{className:"fig-fill-picker-gradient-interpolation-title"},X),G("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Y)])]),Q=G("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),Z=y.#K;return[...Z.filter(($)=>!$.advanced).map(J),Q,...Z.filter(($)=>$.advanced).map(J)]}#$Q(J){let Q=(V)=>typeof V.detail==="string"?V.detail:V.target?.value,Z=J.querySelector(".fig-fill-picker-gradient-bar-input"),$=(V)=>{if(!Z)return;this.#T=!0;try{Z.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(V)}))}finally{this.#T=!1}},X=()=>{$(this.#Y)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(V)=>{let q=Q(V);if(!q)return;this.#Y.type=q,this.#g(),this.#O()});let j=J.querySelector(".fig-fill-picker-gradient-space"),K=j?.querySelector("fig-select-options"),W="fig-fill-picker-gradient-interpolation-collapsed",U=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),L=()=>Boolean(K?.classList.contains(W)),z=(V)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",V?"Show all color interpolation options":"Scroll down")},O=()=>{if(!K)return;K.classList.remove(W),K.style.removeProperty("max-height"),z(!1),K.syncOverflow?.()},f=()=>{if(!K||!U)return;K.style.removeProperty("max-height"),K.classList.add(W),K.scrollTop=0;let V=K.getBoundingClientRect().top,q=U.getBoundingClientRect().top,M=K.querySelector(".fig-overflow-end")?.offsetHeight||0,D=q-V;if(D>0)K.style.maxHeight=`${Math.round(D+M)}px`;z(!0),K.syncOverflow?.()},H=(V)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${V}"]`)),R=()=>{if(H(g(this.#Y)))O();else f()};if(K?.addEventListener("click",(V)=>{if(!L())return;if(!V.target?.closest?.(".fig-overflow-end"))return;V.preventDefault(),V.stopPropagation(),O()},!0),K?.addEventListener("focusin",(V)=>{if(!L())return;if(V.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))O()}),K?.addEventListener("scroll",()=>{if(L()&&K.scrollTop!==0)K.scrollTop=0}),j?.querySelectorAll("fig-select-option").forEach((V)=>{let q=()=>{let M=F(V.getAttribute("value")||"srgb");$(N({...this.#Y,...M}))};V.addEventListener("pointerenter",q),V.addEventListener("pointerleave",()=>{if(document.activeElement!==V)X()}),V.addEventListener("focus",q),V.addEventListener("blur",()=>{if(!V.matches(":hover"))X()})}),this.#m?.disconnect(),j)this.#m=new MutationObserver(()=>{if(!j.hasAttribute("open"))X();else this.#y(R)}),this.#m.observe(j,{attributes:!0,attributeFilter:["open"]});let _=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(_?.addEventListener("change",(V)=>{let q=typeof V.detail==="string"?V.detail:V.target?.value;if(!q)return;let M=F(q);this.#Y=N({...this.#Y,...M}),this.#g(),this.#O()}),_?.querySelectorAll("fig-segment").forEach((V)=>{let q=()=>{$(N({...this.#Y,...F(V.getAttribute("value")||"srgb")}))};V.addEventListener("pointerenter",q),V.addEventListener("pointerleave",X)}),j?.addEventListener("change",(V)=>{let q=Q(V);if(!q)return;let M=F(q);this.#Y=N({...this.#Y,...M}),this.#g(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#Y.angle=(Number(this.#Y.angle)+90)%360,this.#g(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#Y.stops.forEach((V)=>{V.position=100-V.position}),this.#Y.stops.sort((V,q)=>V.position-q.position),this.#g(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#Y.stops.push({position:50,color:"#888888",opacity:100}),this.#Y.stops.sort((q,M)=>q.position-M.position),this.#g(),this.#O()}),Z){let V=(q)=>{if(q.stopPropagation(),this.#T)return;let M=q.detail;if(!M?.gradient)return;this.#Y=S({...this.#Y,...M.gradient}),this.#V(),this.#VJ(),this.#iJ()};Z.addEventListener("input",(q)=>{V(q),this.#O()}),Z.addEventListener("change",(q)=>{V(q),this.#h()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(V)=>{this.#KQ(V)})}#gJ(J){let Q=String(J.color||"#888888").replace(/^#/,"").slice(0,6),Z=J.opacity??100;if(Z>=100)return`#${Q}`;let $=Math.round(Z/100*255).toString(16).padStart(2,"0");return`#${Q}${$}`}#XQ(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#hJ(J.hexOpaque);let Q=J.value;if(typeof Q==="string"&&Q.startsWith("#"))return this.#hJ(Q.length>7?Q.slice(0,7):Q);let Z=J.querySelector('fig-input-text:not([type="number"])'),$=String(Z?.value??Z?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test($))return`#${$.toUpperCase()}`;let X=J.getAttribute("value");if(typeof X==="string"&&X.startsWith("#"))return this.#hJ(X.length>7?X.slice(0,7):X);return"#888888"}#hJ(J){let Q=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Q))return"#888888";return`#${Q.toUpperCase()}`}#YQ(J){let Q=J.querySelector(".fig-fill-picker-stop-position"),Z=J.querySelector(".fig-fill-picker-stop-color"),$=parseFloat(Q?.value??Q?.getAttribute("value")??"0")||0,X=this.#XQ(Z),Y=100;if(Z instanceof HTMLElement&&Z.rgba?.a!==void 0)Y=Math.round(Z.rgba.a*100);else{let j=parseInt(J.dataset.index,10);if(!isNaN(j)&&this.#Y.stops[j])Y=this.#Y.stops[j].opacity??100}return{position:$,color:X,opacity:Y}}#vJ(J){let Q=parseInt(J.dataset.index,10);if(isNaN(Q)||Q<0||Q>=this.#Y.stops.length)return;let Z={...this.#Y.stops[Q],...this.#YQ(J)};this.#Y.stops[Q]=Z,this.#jQ(J,Z)}#jQ(J,Q){let Z=J.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",String(Q.position));let $=J.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#gJ(Q))}#KQ(J){let{oldIndex:Q,newIndex:Z}=J.detail??{};if(Q==null||Z==null||Q===Z||Q<0||Z<0||Q>=this.#Y.stops.length||Z>=this.#Y.stops.length)return;let X=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");X.forEach((j)=>this.#vJ(j));let[Y]=this.#Y.stops.splice(Q,1);this.#Y.stops.splice(Z,0,Y),X.forEach((j,K)=>{j.dataset.index=String(K)}),this.#T=!0;try{this.#VJ(),this.#fJ(),this.#O()}finally{this.#T=!1}}#g(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#Y=S(this.#Y);let Q=g(this.#Y),Z=J.querySelector(".fig-fill-picker-gradient-space");if(Z)Z.value=Q;let $=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if($){let X=y.#Z(Q),Y=$.querySelector(`fig-segment[value="${Q}"]`)||$.querySelector(`fig-segment[data-space="${X.space}"]`);if(Y){let j=`${X.title} — ${X.subtitle}`;Y.setAttribute("value",Q),Y.setAttribute("aria-label",j);let K=Y.closest("fig-tooltip");if(K)K.setAttribute("text",j);$.value=Q}}this.#VJ(),this.#fJ(),this.#iJ()}#WQ(){let J=Array.isArray(this.#Y.stops)?[...this.#Y.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Q)=>({color:String(Q.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q.position??0}))}#VJ(){if(!this.#J)return;let J=this.#WQ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Q)=>{let Z=Q.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",$=F(Z),X={type:"linear",stops:J,interpolationSpace:$.interpolationSpace};if(E.has($.interpolationSpace))X.hueInterpolation=$.hueInterpolation;Q.value={type:"gradient",gradient:X}})}#fJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#T=!0,J.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(this.#Y)})),this.#T=!1;this.#V()}#iJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Q=J?.querySelector("fig-reorder");if(!J||!Q)return;let Z=Q.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Z.length===this.#Y.stops.length){this.#Y.stops.forEach(($,X)=>{let Y=Z[X];Y.dataset.index=X;let j=Y.querySelector(".fig-fill-picker-stop-position");if(j)j.setAttribute("value",$.position);let K=Y.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#gJ($));let W=Y.querySelector(".fig-fill-picker-stop-remove");if(W)if(this.#Y.stops.length<=2)W.setAttribute("disabled","");else W.removeAttribute("disabled")});return}this.#zQ(J)}#zQ(J){let Q=J.querySelector("fig-reorder");if(!Q)return;let Z=this.#Y.stops.map(($,X)=>G("fig-field",{className:"fig-fill-picker-gradient-stop-row","data-index":X},[G("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:$.position,units:"%"}),G("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#gJ($)}),G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-stop-remove",disabled:this.#Y.stops.length<=2,"aria-label":"Remove gradient stop"},C("minus"))]));Q.replaceChildren(...Z),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#vJ($),this.#VJ(),this.#fJ(),this.#O()});let X=$.querySelector(".fig-fill-picker-stop-color"),Y=X.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J;else this.#y(()=>{let K=X.querySelector("fig-fill-picker");if(K)K.anchorElement=this.#J});let j=()=>{this.#vJ($),this.#T=!0;try{this.#VJ(),this.#fJ(),this.#O()}finally{this.#T=!1}};X.addEventListener("input",j),X.addEventListener("change",j),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let K=parseInt($.dataset.index,10);if(this.#Y.stops.length>2)this.#Y.stops.splice(K,1),this.#g(),this.#O()})})}#mJ(J,Q=!0){let Z=N({...this.#Y,interpolationSpace:J??this.#Y.interpolationSpace}),$=this.#B==="display-p3",X=Z.stops.map((K)=>{let W=(K.opacity??100)/100;return`${$?this.#kQ(K.color,W):this.#BQ(K.color,W)} ${K.position}%`}).join(", "),Y=XJ(Z),j=Q&&Y?` ${Y}`:"";switch(Z.type){case"linear":return`linear-gradient(${Z.angle}deg${j}, ${X})`;case"radial":return`radial-gradient(circle at ${Z.centerX}% ${Z.centerY}%${j}, ${X})`;case"angular":return`conic-gradient(from ${Z.angle}deg${j}, ${X})`;default:return`linear-gradient(${Z.angle}deg${j}, ${X})`}}static#lJ=new Map;#rJ(J){let Q=y.#lJ.get(J);if(Q!==void 0)return Q;let Z=document.createElement("div");Z.style.background=J;let $=!!Z.style.background;return y.#lJ.set(J,$),$}#nJ(){let J=this.#mJ(void 0,!0);if(this.#rJ(J))return J;let Q=this.#mJ("oklab",!0);if(this.#rJ(Q))return Q;return this.#mJ("oklab",!1)}#UQ(){let J=this.#J.querySelector('[data-tab="image"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#U.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Y,j])=>G("fig-select-option",{value:Y},j)))),Z=G("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#U.scale,units:"%"});if(this.#U.scaleMode!=="tile")Z.style.display="none";let $=G("fig-field",{className:"fig-fill-picker-media-header"},[Q,Z]),X=G("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});J.replaceChildren($,X),this.#OQ(J)}#OQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-scale"),$=J.querySelector(".fig-fill-picker-image-preview");Q.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#U.scaleMode=Y,Z.style.display=Y==="tile"?"block":"none",this.#e($),this.#V(),this.#O()}),Z.addEventListener("input",(X)=>{this.#U.scale=parseFloat(X.target.value)||100,this.#e($),this.#V(),this.#O()}),$.addEventListener("loaded",(X)=>{let Y=X.detail?.src||$.src;if(!Y)return;let j=Y!==this.#U.url;if(this.#U.url=Y,this.#e($),this.#V(),j)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),$.addEventListener("change",()=>{if($.src)return;this.#U.url=null,this.#e($),this.#V(),this.#O()}),this.#e($)}#e(J){if(!this.#U.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#U.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#U.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#U.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#U.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#YJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#Q.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#Q.url),this.#Q.poster)J.setAttribute("poster",this.#Q.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#Q.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#Q.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#GQ(){let J=this.#J.querySelector('[data-tab="video"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#Q.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([X,Y])=>G("fig-select-option",{value:X},Y)))),Z=G("fig-field",{className:"fig-fill-picker-media-header"},Q),$=G("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});J.replaceChildren(Z,$),this.#fQ(J),this.#DJ({emit:!1})}#jJ(){if(this.#Q.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#Q.poster),this.#x.delete(this.#Q.poster);this.#Q.poster=null,this.#E=null}#yJ(){if(!this.#Q.poster)return;if(this.#E&&this.#E===this.#Q.url)return;this.#jJ()}#cJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#YJ(J)}#DJ({emit:J=!1}={}){if(this.#Q.url){if(this.#Q.missing=!1,this.#yJ(),!this.#Q.poster)this.#FJ(this.#Q.url);else this.#cJ();return}let Q=this.getAttribute("default-video");if(!Q){this.#Q.missing=!0;return}if(this.#Q.url=Q,this.#Q.missing=!1,this.#cJ(),this.#FJ(Q),J)this.#O()}#oJ(){if(this.#z!=="video")return;let J=this.#Q.url;if(!J)return;if(this.#yJ(),this.#Q.poster)return;this.#FJ(J)}async#LQ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Q)=>J.requestVideoFrameCallback(()=>Q())),new Promise((Q)=>setTimeout(Q,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#VQ(J){let Q=await this.#LQ(J),Z=Q?.width||J.videoWidth,$=Q?.height||J.videoHeight;if(!Z||!$)return Q?.close?.(),null;let X=typeof OffscreenCanvas==="function"?new OffscreenCanvas(Z,$):Object.assign(document.createElement("canvas"),{width:Z,height:$}),Y=X.getContext("2d");if(!Y)return Q?.close?.(),null;try{Y.drawImage(Q||J,0,0,Z,$)}finally{Q?.close?.()}return X.convertToBlob?X.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((j)=>X.toBlob(j,"image/jpeg",0.85))}async#FJ(J,{emit:Q=!1}={}){if(!J||this.#o===J)return;this.#o=J;let Z=document.createElement("video");Z.muted=!0,Z.playsInline=!0,Z.preload="auto",Z.crossOrigin="anonymous";try{if(await new Promise((X,Y)=>{let j=()=>Y(Error("video poster failed"));Z.addEventListener("error",j,{once:!0}),Z.addEventListener("loadeddata",X,{once:!0}),Z.src=J}),!Z.videoWidth||!Z.videoHeight)return;let $=await this.#VQ(Z);if(!$||this.#Q.url!==J)return;if(this.#jJ(),this.#Q.poster=URL.createObjectURL($),this.#E=J,this.#x.add(this.#Q.poster),this.#V(),this.#cJ(),Q)this.#O()}catch{}finally{if(Z.removeAttribute("src"),Z.load(),this.#o===J)this.#o=null}}#fQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-video-preview");Q.addEventListener("change",($)=>{let X=typeof $.detail==="string"?$.detail:$.target?.value;if(!X)return;this.#Q.scaleMode=X,this.#YJ(Z),this.#V(),this.#O()}),Z.addEventListener("loaded",($)=>{let X=$.detail?.src||Z.src;if(!X)return;let Y=X!==this.#Q.url;if(Y)this.#jJ();if(this.#Q.url=X,this.#Q.missing=!1,this.#YJ(Z),this.#FJ(X),this.#V(),Y)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:$.detail??{src:X}}))}),Z.addEventListener("change",()=>{if(Z.src)return;this.#Q.url=null,this.#jJ(),this.#DJ(),this.#YJ(Z),this.#V(),this.#O()}),this.#YJ(Z)}#qQ(){let J=this.#J.querySelector('[data-tab="webcam"]'),Q=G("fig-field",{className:"fig-fill-picker-webcam-camera"},G("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Q.style.display="none";let Z=G("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});Z.muted=!0;let $=G("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},G("span",{},"Camera access required")),X=G("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[Z,$]),Y=G("div",{className:"fig-fill-picker-webcam-controls"},G("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Q,X,Y),this.#HQ(J)}#HQ(J){let Q=J.querySelector(".fig-fill-picker-webcam-video"),Z=J.querySelector(".fig-fill-picker-webcam-status"),$=J.querySelector(".fig-fill-picker-webcam-capture"),X=J.querySelector(".fig-fill-picker-webcam-camera"),Y=J.querySelector(".fig-fill-picker-camera-select"),j=(z)=>{if(z)$.removeAttribute("disabled");else $.setAttribute("disabled","")},K=()=>{let z=!!this.#$.stream&&Q.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Q.videoWidth>0&&Q.videoHeight>0;if(j(z),z)Z.querySelector("span").textContent="Camera ready",Z.style.display="none",this.#IJ(Q)};Q.addEventListener("loadedmetadata",K),Q.addEventListener("canplay",K),Q.addEventListener("playing",K);let W=(z)=>{this.#$.stream=z,Q.srcObject=z,Q.muted=!0,Q.playsInline=!0,Q.style.display="block";let O=Q.play?.();if(O?.catch)O.catch(()=>{});K()},U=async(z,O)=>{let f=await navigator.mediaDevices.enumerateDevices();if(z!=null&&z!==this.#p)return;let H=f.filter((R)=>R.kind==="videoinput");if(H.length>1){X.style.display="";let R=Y.querySelector(":scope > fig-select-options");if(!R)R=document.createElement("fig-select-options"),Y.append(R);if(R.replaceChildren(),H.forEach((_,k)=>{let V=document.createElement("fig-select-option");V.value=_.deviceId;let q=_.label||(H.length>1?`Camera ${k+1}`:"Camera");V.textContent=q.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(M,D)=>{return` ${/^\d+$/.test(D)?Number.parseInt(D,10).toString():D.replace(/^0+/,"")||"0"}`}),R.append(V)}),O)Y.value=O}else X.style.display="none",Y.querySelector(":scope > fig-select-options")?.replaceChildren()},L=async(z=null)=>{let O=z||this.#$.deviceId||null,f=this.#$.stream,H=f?.getTracks?.().filter((_)=>_.readyState!=="ended")??[];if(f&&H.length){let _=f.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#$.deviceId||null;if(!O||O===_){W(f),this.#QJ(),U(null,O||_);return}}this.#t({emit:Boolean(f)});let R=this.#p;j(!1),Z.querySelector("span").textContent="Starting camera",Z.style.display="flex";try{let _={video:O?{deviceId:{exact:O}}:!0},k=await navigator.mediaDevices.getUserMedia(_);if(R!==this.#p||!this.isConnected||this.#L!=="webcam"){k.getTracks().forEach((q)=>q.stop());return}let V=k.getVideoTracks?.()?.[0];this.#$.deviceId=O||V?.getSettings?.()?.deviceId||null,this.#$.live=this.#a()==="live",W(k),this.#QJ(),await U(R,O)}catch(_){if(R!==this.#p)return;console.error("Webcam error:",_.name,_.message);let k="Camera access denied";if(_.name==="NotAllowedError")k="Camera permission denied";else if(_.name==="NotFoundError")k="No camera found";else if(_.name==="NotReadableError")k="Camera in use by another app";else if(_.name==="OverconstrainedError")k="Camera constraints not supported";else if(!window.isSecureContext)k="Camera requires secure context";Z.replaceChildren();let V=document.createElement("span");V.textContent=k,Z.appendChild(V),Z.style.display="flex",Q.style.display="none",j(!1)}};this.#zJ=L,Y.addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(!O||O===this.#$.deviceId)return;L(O)}),$.addEventListener("click",async()=>{if(!this.#$.stream)return;let z=await this.#HJ(Q);if(!z)return;this.#U.url=z,this.#$.live=!1;let O=this.#J.querySelector(".fig-fill-picker-image-preview");if(O)this.#e(O);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((H)=>H.dataset.tab==="image"))this.#i("image");else this.#V(),this.#O();this.#h()})}#pJ(J){let Q=J.h/360,Z=J.s/100,$=J.v/100,X,Y,j,K=Math.floor(Q*6),W=Q*6-K,U=$*(1-Z),L=$*(1-W*Z),z=$*(1-(1-W)*Z);switch(K%6){case 0:X=$,Y=z,j=U;break;case 1:X=L,Y=$,j=U;break;case 2:X=U,Y=$,j=z;break;case 3:X=U,Y=L,j=$;break;case 4:X=z,Y=U,j=$;break;case 5:X=$,Y=U,j=L;break}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#KJ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j=X-Y,K=0,W=X===0?0:j/X,U=X;if(X!==Y){switch(X){case Q:K=(Z-$)/j+(Z<$?6:0);break;case Z:K=($-Q)/j+2;break;case $:K=(Q-Z)/j+4;break}K/=6}return{h:K*360,s:W*100,v:U*100,a:1}}#l(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Q=this.#pJ(J),Z=($)=>{return(isNaN($)?217:Math.max(0,Math.min(255,Math.round($)))).toString(16).padStart(2,"0")};return`#${Z(Q.r)}${Z(Q.g)}${Z(Q.b)}`}#WJ(J){let Q=parseInt(J.slice(1,3),16),Z=parseInt(J.slice(3,5),16),$=parseInt(J.slice(5,7),16);return this.#KJ({r:Q,g:Z,b:$})}#BQ(J,Q=1){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return`rgba(${Z}, ${$}, ${X}, ${Q})`}#RQ(J){let Q=Math.max(0,Math.min(1,Number(J)||0)),Z=Math.round(Q*1000)/1000;return String(Z)}#_Q(J=this.#X){let Q=this.#pJ(J);return`rgba(${Q.r}, ${Q.g}, ${Q.b}, ${this.#RQ(J.a)})`}#TQ(J){let Q=String(J??"").trim();if(!Q)return null;let Z=Q.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(Z){let X=Z[1];if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];let Y=1;if(X.length===8)Y=parseInt(X.slice(6,8),16)/255,X=X.slice(0,6);return{...this.#WJ(`#${X}`),a:Y}}let $=Q.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if($){let X=Math.max(0,Math.min(255,Math.round(parseFloat($[1])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat($[2])))),j=Math.max(0,Math.min(255,Math.round(parseFloat($[3])))),K=$[4]!==void 0?Math.max(0,Math.min(1,parseFloat($[4]))):1;if(![X,Y,j,K].every(Number.isFinite))return null;return{...this.#KJ({r:X,g:Y,b:j}),a:K}}return null}#kQ(J,Q=1){let Z=+(parseInt(J.slice(1,3),16)/255).toFixed(4),$=+(parseInt(J.slice(3,5),16)/255).toFixed(4),X=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${Z} ${$} ${X} / ${Q})`}#MQ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j,K,W=(X+Y)/2;if(X===Y)j=K=0;else{let U=X-Y;switch(K=W>0.5?U/(2-X-Y):U/(X+Y),X){case Q:j=((Z-$)/U+(Z<$?6:0))/6;break;case Z:j=(($-Q)/U+2)/6;break;case $:j=((Q-Z)/U+4)/6;break}}return{h:j*360,s:K*100,l:W*100}}#NQ(J){let Q=J.h/360,Z=J.s/100,$=J.l/100,X,Y,j;if(Z===0)X=Y=j=$;else{let K=(L,z,O)=>{if(O<0)O+=1;if(O>1)O-=1;if(O<0.16666666666666666)return L+(z-L)*6*O;if(O<0.5)return z;if(O<0.6666666666666666)return L+(z-L)*(0.6666666666666666-O)*6;return L},W=$<0.5?$*(1+Z):$+Z-$*Z,U=2*$-W;X=K(U,W,Q+0.3333333333333333),Y=K(U,W,Q),j=K(U,W,Q-0.3333333333333333)}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#aJ(J){let Q=(z)=>{return z=z/255,z<=0.04045?z/12.92:Math.pow((z+0.055)/1.055,2.4)},Z=Q(J.r),$=Q(J.g),X=Q(J.b),Y=0.4122214708*Z+0.5363325363*$+0.0514459929*X,j=0.2119034982*Z+0.6806995451*$+0.1073969566*X,K=0.0883024619*Z+0.2817188376*$+0.6299787005*X,W=Math.cbrt(Y),U=Math.cbrt(j),L=Math.cbrt(K);return{l:0.2104542553*W+0.793617785*U-0.0040720468*L,a:1.9779984951*W-2.428592205*U+0.4505937099*L,b:0.0259040371*W+0.7827717662*U-0.808675766*L}}#yQ(J){let Q=this.#aJ(J);return{l:Q.l,c:Math.sqrt(Q.a*Q.a+Q.b*Q.b),h:(Math.atan2(Q.b,Q.a)*180/Math.PI+360)%360}}#tJ(J){let Q=J.l+0.3963377774*J.a+0.2158037573*J.b,Z=J.l-0.1055613458*J.a-0.0638541728*J.b,$=J.l-0.0894841775*J.a-1.291485548*J.b,X=Q*Q*Q,Y=Z*Z*Z,j=$*$*$,K=(W)=>{let U=W<=0.0031308?12.92*W:1.055*Math.pow(W,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,U))*255)};return{r:K(4.0767416621*X-3.3077115913*Y+0.2309699292*j),g:K(-1.2684380046*X+2.6097574011*Y-0.3413193965*j),b:K(-0.0041960863*X-0.7034186147*Y+1.707614701*j)}}#DQ(J){let Q=J.h*Math.PI/180;return this.#tJ({l:J.l,a:J.c*Math.cos(Q),b:J.c*Math.sin(Q)})}#O(){if(this.#w())return;this.#V(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#h(){if(this.#w())return;this.#c=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#z,colorSpace:this.#B};switch(this.#z){case"solid":return{...J,color:this.#l(this.#X),alpha:this.#X.a,hsv:{...this.#X}};case"gradient":return{...J,gradient:P(this.#Y),css:this.#nJ()};case"image":return{...J,image:{...this.#U}};case"video":return{...J,video:this.#EJ()};case"webcam":return{...J,webcam:this.#CJ()};default:return{...J,...this.#v[this.#z]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":if(this.#_J(),this.#V(),this.#oJ(),this.#J?.open&&!this.#C)this.#LJ(),this.#c=JSON.stringify(this.value);break;case"disabled":if(this.#u(),this.#w()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let $=this.#J.open;if(this.#TJ(),$&&this.isConnected)this.#$J();break}case"webcam-mode":if(this.#z==="webcam")this.#V();break;case"default-video":if(this.#z==="video")this.#DJ({emit:!1}),this.#V();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#ZJ());case"aria-labelledby":case"aria-describedby":this.#u();break}}}A("fig-fill-picker",y);class B extends HTMLElement{static#K=new Set(["oklch","hsl"]);static#Z=10;static#j=10;static#W=8;static#J=3;static#F=210;static#L={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#z=!1;#B=null;#X=null;#G={...B.#L};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#G}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#Y(),this.#U(),this.#C(),this.#T()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J!=="value")return;if(this.#U(),this.#z)this.#T()}#Y(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#U(){let J=this.getAttribute("value");if(!J){this.#G={...B.#L,stops:B.#L.stops.map((Q)=>({...Q}))};return}try{let Q=JSON.parse(J),Z=Q?.type==="gradient"&&Q.gradient?Q.gradient:Q?.gradient?Q.gradient:Q;if(!Z||typeof Z!=="object")return;this.#G=this.#Q({...B.#L,...Z})}catch{}}#Q(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase(),$=String(Q.hueInterpolation??"shorter").toLowerCase(),X=Array.isArray(Q.stops)?Q.stops.map((Y)=>({color:String(Y?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Y?.position??0,opacity:Y?.opacity??100})):B.#L.stops.map((Y)=>({...Y}));if(X.length<2)return{...B.#L,stops:B.#L.stops.map((Y)=>({...Y}))};return{type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):135,interpolationSpace:Z,hueInterpolation:$,stops:X}}#$(){return B.#K.has(this.#G.interpolationSpace||"srgb")}#N(J){let{r:Q,g:Z,b:$}=l(J);if(this.#G.interpolationSpace==="hsl")return r(Q,Z,$).h;let X=n(Q,Z,$);return(o(X.l,X.a,X.b).h%360+360)%360}#k(){let J=this.#H(),Q=this.#N(J[0]?.color||"#FF0000"),Z=this.#N(J[J.length-1]?.color||"#4F9EFF"),$=B.#F-Q,Y=((B.#F-Z-$)%360+360)%360,j=Y===0?0:Y-360,K=this.#G.hueInterpolation||"shorter",W;if(K==="increasing")W=j;else if(K==="decreasing")W=Y;else if(K==="longer")W=Y<180?j:Y;else W=Y<=180?Y:j;let U=Math.sign(W),L=Math.asin(B.#J/2/B.#W)*180/Math.PI,z=Math.min(L,Math.max(0,(Math.abs(W)-0.01)/2));return{startDeg:$+U*z,sweepDeg:W-U*z*2}}#M(J){let Q=J*Math.PI/180;return{x:B.#Z+B.#W*Math.cos(Q),y:B.#j+B.#W*Math.sin(Q)}}#f(J,Q){let Z=J+Q,$=this.#M(J),X=this.#M(Z),Y=Math.abs(Q)>180?1:0,j=Q>=0?1:0;return`M ${$.x} ${$.y} A ${B.#W} ${B.#W} 0 ${Y} ${j} ${X.x} ${X.y}`}#v(){let J=this.#M(180),Q=this.#M(0);return`M ${J.x} ${J.y} L ${Q.x} ${Q.y}`}#q(J){let Q=B.#J,Z=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Q}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(Z)}")`}#H(){return[...this.#G.stops].sort((J,Q)=>(J.position??0)-(Q.position??0))}#R(){let J=this.#G.interpolationSpace||"srgb";if(J==="srgb")return"";if(B.#K.has(J))return` in ${J} ${this.#G.hueInterpolation||"shorter"} hue`;return` in ${J}`}#_(){let J=this.#H(),Q=this.#R();if(this.#$()){let $=(B.#F+90)%360,X=this.#G.interpolationSpace,Y=(K)=>X==="oklch"?`oklch(65% 0.25 ${K})`:`hsl(${K} 100% 50%)`,j=[0,300,240,180,120,60,0].map(Y).join(", ");return`conic-gradient(from ${$}deg in ${X} decreasing hue, ${j})`}let Z=J.map(($)=>`${$.color} ${$.position??0}%`).join(", ");return`linear-gradient(90deg${Q}, ${Z})`}#C(){if(this.#z)return;let J=B.#J,Q=u("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},u("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),Z=G("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Q,Z),this.#B=Q,this.#X=Z,this.#z=!0}#T(){if(!this.#X)return;let J=this.#$();if(this.#B)this.#B.style.display=J?"":"none";let Q=J?(()=>{let{startDeg:$,sweepDeg:X}=this.#k();return this.#f($,X)})():this.#v(),Z=this.#q(Q);this.#X.style.setProperty("-webkit-mask-image",Z),this.#X.style.maskImage=Z,this.#X.style.background=this.#_()}}A("fig-interpolation-swatch",B);
+    `,J.appendChild(Q);let Z=document.createElement("fig-button");Z.className="fig-select-trigger",Z.setAttribute("part","trigger"),Z.setAttribute("variant","ghost"),Z.setAttribute("aria-haspopup","listbox"),Z.setAttribute("aria-expanded","false");let $=document.createElement("span");$.className="fig-select-prepend",$.setAttribute("part","prepend"),$.setAttribute("aria-hidden","true");let X=document.createElement("slot");X.setAttribute("name","prepend-trigger"),X.hidden=!0;let Y=document.createElement("span");Y.className="fig-select-prepend-fallback",$.append(X,Y);let j=document.createElement("span");j.className="fig-select-label",j.setAttribute("part","label");let K=document.createElement("slot");K.setAttribute("name","trigger"),K.hidden=!0,Z.append($,j,K);let W=document.createElement("dialog",{is:"fig-popup"});if(W.setAttribute("is","fig-popup"),W.setAttribute("part","listbox"),W.setAttribute("theme","menu"),W.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)W.setAttribute("popover","manual");W.id=p(),Z.setAttribute("aria-controls",W.id);let z=document.createElement("slot");if(z.setAttribute("name","panel"),W.appendChild(z),J.append(Z,W),this.#K=Z,this.#j=$,this.#W=X,this.#J=Y,this.#C=K,this.#L=j,this.#Q=W,this.#z=z,this.#i(),this.#p(),this.#n(),!this.hasAttribute("value")){let L=this.#l().find((U)=>k(U,"selected"));if(L)this.setAttribute("value",L.value)}}#n(){if(!this.#Q||this.#U)return;if(typeof this.#Q.positionPopup!=="function")return;this.#Z=this.#Q.positionPopup.bind(this.#Q),this.#Q.positionPopup=()=>{if(!this.open){this.#Z?.();return}this.#$J()},this.#U=!0}#o(J){if(!J)return null;let Q=document.createRange();Q.selectNodeContents(J);let Z=[...Q.getClientRects()].filter(($)=>$.width>0&&$.height>0);if(Z.length)return Z[0];return J.getBoundingClientRect()}#P(){if(typeof this.#Q?.parseViewportMargins==="function")return this.#Q.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#S(){if(this.#f?.isConnected)return this.#f;let J=this.getAttribute("menu-anchor");if(J)try{let Q=this.parentElement?.querySelector(J);if(Q&&Q!==this&&!this.contains(Q))return Q;let $=this.getRootNode()?.querySelector?.(J);if($&&$!==this&&!this.contains($))return $}catch{}return null}#a(){return this.#S()||this.#K}#u(){return Boolean(this.#S())}#t(){return!this.#VJ()&&this.#u()}#i(){if(!this.#Q)return;if(this.#Q.anchor=this.#a(),this.#h(),!this.open)return;this.#$=!1,this.#y=null,this.#M=null,this.#Q.setupObservers?.(),this.#Q.queueReposition?.()}#RJ(){let J=this.#L?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Q=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Q?.width&&Q?.height)return Q;return this.#j?.getBoundingClientRect()??null}#_J(){let Q=(this.#t()?this.#S():null)?.getBoundingClientRect()??this.#RJ();if(!Q)return null;return{x:Q.x,y:Q.y,width:Q.width,height:Q.height}}#TJ(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#LJ(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.x-Q.x)>Z||Math.abs(J.y-Q.y)>Z||Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z}#CJ(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z||Math.abs(J.offsetLeft-Q.offsetLeft)>Z||Math.abs(J.offsetTop-Q.offsetTop)>Z}#EJ(){if(!this.#$)return!1;let J=this.#LJ(this.#y,this.#_J()),Q=this.#CJ(this.#M,this.#TJ());return!J&&!Q}#kJ(){this.#y=this.#_J(),this.#M=this.#TJ()}#VJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#AJ(){if(!this.#Q)return;this.#Q.style.removeProperty("left"),this.#Q.style.removeProperty("top"),this.#Q.style.removeProperty("right"),this.#Q.style.removeProperty("bottom")}#$J(){if(this.#VJ()){if(this.#$=!1,this.#y=null,this.#M=null,this.#h(),this.#AJ(),this.#PJ())return;this.#Z?.(),this.#k();return}this.#SJ()}#PJ(){let J=this.#Q,Q=this.#S();if(!J||!Q||typeof J.parsePosition!=="function"||typeof J.parseOffset!=="function"||typeof J.computeCoords!=="function")return!1;let Z=J.getBoundingClientRect(),$=Q.getBoundingClientRect();if(!Z.width||!Z.height)return!1;let{vertical:X,horizontal:Y,shorthand:j}=J.parsePosition(),K=J.parseOffset(),{left:W,top:z}=J.computeCoords($,Z,X,Y,K,j),L=this.#P();if(typeof J.clampToViewport==="function")({left:W,top:z}=J.clampToViewport({left:W,top:z},Z,L));return J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(W)}px`,"important"),J.style.setProperty("top",`${Math.round(z)}px`,"important"),!0}#k(){let J=this.#Q;if(!J||typeof J.clampToViewport!=="function")return;let Q=J.getBoundingClientRect();if(!Q.width||!Q.height)return;let Z=this.#P(),{left:$,top:X}=J.clampToViewport({left:Q.left,top:Q.top},Q,Z);J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round($)}px`,"important"),J.style.setProperty("top",`${Math.round(X)}px`,"important")}#SJ(){if(this.#EJ()){this.#k();return}let J=this.#Q,Q=this.#L;if(!J||!Q){this.#Z?.();return}let Z=this.#l(),$=Z.find((q)=>this.#D(q)===this.value)||Z[0];if(!$){this.#Z?.();return}let X=this.#t()?this.#S():null;if(X)this.#h();this.#Z?.();let Y=J.getBoundingClientRect(),j=$.getBoundingClientRect();if(!Y.width||!Y.height||!j.height)return;let K,W,z;if(X){let q=X.getBoundingClientRect();z=q,K=q.left+(q.width-Y.width)/2,W=q.top+(q.height-j.height)/2-(j.top-Y.top)}else{let q=this.#RJ(),_=this.#o($);if(!q?.width||!_)return;z=q;let R=_.left-Y.left,T=_.top-Y.top;K=k(this,"full")?this.getBoundingClientRect().left:q.left-R,W=q.top-T}let L=this.#P();if(typeof J.clampToViewport==="function")({left:K,top:W}=J.clampToViewport({left:K,top:W},Y,L));else{let{left:q,top:_}=L,R=window.innerWidth-Y.width-L.right,T=window.innerHeight-Y.height-L.bottom;K=Math.min(Math.max(K,q),Math.max(q,R)),W=Math.min(Math.max(W,_),Math.max(_,T))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(K)}px`,"important"),J.style.setProperty("top",`${Math.round(W)}px`,"important");let U=this.#A(),O=$.getBoundingClientRect(),f=X?null:this.#o($);if(U&&U.scrollHeight>U.clientHeight+1){let q=X?O.top+O.height/2-(z.top+z.height/2):f?f.top-z.top:0;if(Math.abs(q)>0.5)U.scrollTop+=q;U.syncOverflow?.()}if(this.#$||this.open)this.#kJ()}#IJ(){this.#K?.addEventListener("click",this.#c),this.#K?.addEventListener("keydown",this.#R),this.addEventListener("click",this.#q),this.addEventListener("pointerover",this.#H),this.#Q?.addEventListener("keydown",this.#R),this.#Q?.addEventListener("close",this.#_),this.#z?.addEventListener("slotchange",this.#E)}#xJ(){this.#K?.removeEventListener("click",this.#c),this.#K?.removeEventListener("keydown",this.#R),this.removeEventListener("click",this.#q),this.removeEventListener("pointerover",this.#H),this.#Q?.removeEventListener("keydown",this.#R),this.#Q?.removeEventListener("close",this.#_),this.#z?.removeEventListener("slotchange",this.#E)}#XJ(){this.#p(),this.#g()}#b(){if(this.#B)return;this.#B=new MutationObserver((J)=>{if(this.#Y||this.#N)return;let Q=!1;for(let Z of J){if(Z.type==="childList"){if([...Z.addedNodes].some(($)=>this.#w($))||[...Z.removedNodes].some(($)=>this.#w($))||Z.target?.closest?.("fig-select-option"))Q=!0}if(Z.type==="attributes"&&Z.target?.tagName==="FIG-SELECT-OPTION"){if(Z.attributeName==="value"||Z.attributeName==="disabled"||Z.attributeName==="label")Q=!0;else if(Z.attributeName==="selected"){if(k(Z.target,"selected")){let $=this.#D(Z.target);if((this.getAttribute("value")??"")!==$)this.setAttribute("value",$),Q=!0}else if(this.#D(Z.target)===(this.getAttribute("value")??""))Q=!0}}if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#g()}),this.#B.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#l({enabledOnly:J=!1}={}){let Q=this.#A(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!k($,"disabled"))}#D(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Q=J.getAttribute?.("value");if(Q!=null)return Q;return(J.textContent||"").trim()}#MJ(J){if(!J)return"";let Q=J.getAttribute?.("label");if(Q!=null&&Q!=="")return Q.trim();let Z=[];for(let $ of J.childNodes){if($.nodeType===Node.TEXT_NODE){let j=$.textContent?.trim();if(j)Z.push(j);continue}if(!($ instanceof Element))continue;let X=$.getAttribute("slot");if(X==="prepend"||X==="append")continue;let Y=$.textContent?.trim();if(Y)Z.push(Y)}if(Z.length)return Z.join(" ").trim();return(J.textContent||"").trim()}#V(J){if(!this.#j||!this.#W||!this.#J||!this.#C)return;let Q=this.querySelector(':scope > [slot="trigger"]'),Z=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),$=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),X=J?.querySelector?.(':scope > [slot="prepend"]');if(this.#C.hidden=!Q,this.#L.hidden=Boolean(Q),this.#j.hidden=Boolean(Q),Q){Z?.remove(),this.#j.classList.remove("has-content"),this.#W.hidden=!0,this.#J.replaceChildren();return}if(!$&&X?.childNodes.length){let j=Z||document.createElement("span");if(j.setAttribute("slot","prepend-trigger"),j.setAttribute("data-fig-select-generated",""),j.replaceChildren(...Array.from(X.childNodes,(K)=>K.cloneNode(!0))),j.parentElement!==this)this.append(j);$=j}else if($)Z?.remove();else Z?.remove();let Y=Boolean($);if(this.#j.classList.toggle("has-content",Y),this.#W.hidden=!$,this.#J.hidden=Boolean($),$){this.#J.replaceChildren();return}this.#J.replaceChildren()}#YJ(){if(!this.#Q)return;this.#Q.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#Q.setAttribute("offset",J);else this.#Q.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#Q.setAttribute("closedby",Q);else this.#Q.removeAttribute("closedby")}#e(){let J=k(this,"disabled");if(this.#K)if(J)this.#K.setAttribute("disabled","");else this.#K.removeAttribute("disabled");if(J&&this.open)this.open=!1}#wJ(J){if(!J.length)return null;let Q=J.find((Z)=>k(Z,"selected"));if(Q&&!k(Q,"disabled"))return Q;return J.find((Z)=>!k(Z,"disabled"))||J[0]||null}#fJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#g(){if(this.#Y)return;this.#Y=!0;try{let J=this.#l(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((K)=>this.#D(K)===Z):null,X=!1;if(!$){if(Q){if(!J.length){if(this.#L)this.#L.textContent=Z||this.getAttribute("label")||"";return}if($=this.#wJ(J),$){let K=this.#D($);if(Z!==K)this.setAttribute("value",K),X=!0}else this.removeAttribute("value"),X=!0}else if($=J.find((K)=>k(K,"selected")),$)this.setAttribute("value",this.#D($)),X=!0}for(let K of J){let W=K===$;if(K.setAttribute("aria-selected",W?"true":"false"),W)K.setAttribute("selected","");else K.removeAttribute("selected")}let Y=$&&this.#MJ($)||this.getAttribute("label")||"";if(this.#L)this.#L.textContent=Y;this.#V($);let j=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#K?.setAttribute("aria-label",j),this.#A()?.syncOverflow?.(),X)this.#fJ(this.getAttribute("value")??"")}finally{this.#Y=!1}}#JJ(J){if(k(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=!this.open;if(Q)this.#i();this.open=Q}#uJ(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(k(Z,"disabled"))return;this.#hJ(Z)}#jJ(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(k(Z,"disabled"))return;if(J.relatedTarget instanceof Node&&Z.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#D(Z),bubbles:!0,composed:!0}))}#bJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#Q?.matches?.(":open")??!1))){if(this.#K?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#i(),this.open=!0,requestAnimationFrame(()=>{let X=this.#l({enabledOnly:!0}).findIndex((Y)=>this.#D(Y)===this.value);this.#x(X>=0?X:0)});return}let Z=this.#l({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#F(),this.#x(this.#G+1,!0);break;case"ArrowUp":J.preventDefault(),this.#F(),this.#x(this.#G-1,!0);break;case"Home":J.preventDefault(),this.#x(0,!0);break;case"End":J.preventDefault(),this.#x(Z.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#K?.focus();break;case"Enter":case" ":{this.#F();let $=Z[this.#G];if(!$)return;J.preventDefault(),this.#hJ($);break}}}#gJ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#K?.setAttribute("aria-expanded","false"),this.#K?.focus(),this.#G=-1}#hJ(J){let Q=this.#D(J);this.setAttribute("value",Q),this.#g(),this.#fJ(Q),this.open=!1}#I(){return this.#l({enabledOnly:!0})}#F(){let J=this.#I();if(!J.length){this.#G=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#G=Z>=0?Z:this.#G}#x(J,Q=!1){let Z=this.#I();if(!Z.length)return;let $=(J%Z.length+Z.length)%Z.length,X=Z[$],Y=document.activeElement!==X;if(this.#G=$,X?.focus(),Q&&Y)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#D(X),bubbles:!0,composed:!0}))}#h(){if(!this.#Q||!this.#K)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#K.getBoundingClientRect().width),Z=Math.max(J,Q,96),$=this.#u()?this.#S():null,X=window.visualViewport?.width??window.innerWidth,Y=window.visualViewport?.height??window.innerHeight,j=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,K=Math.max(0,Math.min(Math.floor(20*j),Math.floor(X-16))),W=Math.max(0,Math.floor(Y-16));if(this.#Q.style.setProperty("box-sizing","border-box","important"),this.#Q.style.setProperty("padding","0","important"),this.#Q.style.setProperty("border","0","important"),this.#Q.style.setProperty("margin","0","important"),$){let L=$.getBoundingClientRect().width;this.#Q.style.setProperty("width","max-content","important"),this.#Q.style.setProperty("min-width","0","important"),this.#Q.style.setProperty("max-width",`${K}px`,"important");let U=this.#Q.getBoundingClientRect().width,O=Math.min(K,Math.max(Z,U)),f=Math.max(L,O);this.#Q.style.setProperty("width",`${f}px`,"important"),this.#Q.style.setProperty("min-width",`${f}px`,"important"),this.#Q.style.setProperty("max-width",`${f}px`,"important")}else this.#Q.style.setProperty("width","max-content","important"),this.#Q.style.setProperty("min-width",`${Z}px`,"important"),this.#Q.style.setProperty("max-width",`${K}px`,"important");this.#Q.style.setProperty("max-height",`${W}px`,"important"),this.#Q.style.setProperty("height","max-content","important"),this.#Q.style.setProperty("overflow","hidden","important");let z=this.#Q.getBoundingClientRect();if(z.height>W)this.#Q.style.setProperty("height",`${W}px`,"important");if(!$&&z.width>K)this.#Q.style.setProperty("width",`${K}px`,"important")}#qJ(){if(!this.#Q||k(this,"disabled"))return;this.#i(),this.#n(),this.#$=!1,this.#y=null,this.#M=null,this.#g(),this.#h(),this.#Q.open=!0,document.addEventListener("keydown",this.#R,!0),this.#K?.setAttribute("aria-expanded","true"),this.#G=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#h(),this.#$J(),this.#h(),this.#k();let J=this.#A(),Z=this.#I().findIndex(($)=>this.#D($)===this.value);if(Z>=0)this.#x(Z);else if(this.#K?.hasAttribute("data-focus-visible")||this.#K?.matches?.(":focus-visible"))this.#x(0);if(J?.syncOverflow?.(),!this.#VJ())this.#$=!0,this.#kJ()})})}#NJ(){if(!this.#Q)return;this.#$=!1,this.#y=null,this.#M=null,document.removeEventListener("keydown",this.#R,!0),this.#Q.open=!1,this.#K?.setAttribute("aria-expanded","false")}}A("fig-select",c);var ZJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],$J=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function N(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase();if(!ZJ.includes(Z))Z="srgb";Q.interpolationSpace=Z;let $=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=$J.includes($)?$:"shorter",Q}function S(J){let Q=N(J);return Q.interpolationSpace="srgb",delete Q.hueInterpolation,Q}function P(J){let Q=S(J),Z={...Q,interpolationSpace:Q.interpolationSpace};if(E.has(Q.interpolationSpace))Z.hueInterpolation=Q.hueInterpolation;else delete Z.hueInterpolation;return Z}function XJ(J){let Q=N(J);if(Q.interpolationSpace==="srgb")return"";if(E.has(Q.interpolationSpace))return`in ${Q.interpolationSpace} ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}function g(J){let Q=N(J);if(E.has(Q.interpolationSpace))return`${Q.interpolationSpace}-${Q.hueInterpolation||"shorter"}`;return Q.interpolationSpace}function F(J){let Q=String(J??"");for(let Z of E){let $=`${Z}-`;if(Q.startsWith($))return{interpolationSpace:Z,hueInterpolation:Q.slice($.length)||"shorter"}}return{interpolationSpace:Q||"srgb",hueInterpolation:"shorter"}}var YJ=0;class y extends HTMLElement{static#K=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#Q(J){let Q=y.#K,Z=Q.find((K)=>K.value===J);if(Z)return Z;let $=F(J),X=Q.find((K)=>K.space===$.interpolationSpace),Y=X?.subtitle.split(" ")[0]??$.interpolationSpace.toUpperCase(),j=$.hueInterpolation;return{value:J,space:$.interpolationSpace,title:X?.title??"Custom",subtitle:E.has($.interpolationSpace)?`${Y} ${j.charAt(0).toUpperCase()}${j.slice(1)}`:Y}}#j=null;#W=null;#J=null;#C=`fig-fill-picker-dialog-${++YJ}`;#L="solid";anchorElement=null;#z="solid";#B="srgb";#X={h:0,s:0,v:85,a:1};#G="hex";#Y={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#U={url:null,scaleMode:"fill",scale:50};#Z={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#$={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#y=null;#M=!1;#N=null;#f={};#c={};#q=null;#H=null;#R=null;#_=null;#E=!1;#T=!1;#w=null;#p=null;#A=null;#d=null;#GJ=null;#s=0;#ZJ=null;#n=null;#o=new Set;#P=new Set;#S=null;#a=null;constructor(){super();this.#ZJ=this.#l.bind(this),this.#n=this.#D.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#k(()=>{this.#xJ(),this.#MJ(),this.#V(),this.#oJ()})}disconnectedCallback(){if(this.#fJ({stopWebcam:!0}),this.#SJ(),this.#IJ(),this.#W)this.#W.removeAttribute("selected");if(this.#j)this.#j.removeEventListener("click",this.#ZJ),this.#j.removeEventListener("keydown",this.#n);this.#j=null,this.#W=null}#u(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#t(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#i(){return this.#z==="webcam"&&this.#t()==="live"&&this.#$.live!==!1}#RJ(){return{live:this.#t()==="live"&&this.#$.live!==!1,snapshot:this.#$.snapshot??null,deviceId:this.#$.deviceId??null,scaleMode:this.#$.scaleMode||"fill",scale:this.#$.scale??50,opacity:this.#$.opacity??1}}#_J(){let J=this.#Z.url??null;return{url:J,poster:this.#Z.poster??null,scaleMode:this.#Z.scaleMode||"fill",scale:this.#Z.scale??50,opacity:this.#Z.opacity??1,...J?{}:{missing:!0}}}#TJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Q,snapshot:Z,...$}=J.webcam;if(Object.assign(this.#$,$),typeof Z==="string"&&Z)this.#$.snapshot=Z;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#$.snapshot=J.image.url;if(J.image.scaleMode)this.#$.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#$.scale=J.image.scale}}#LJ(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#$.stream,deviceId:this.#$.deviceId??null}}))}get webcamStream(){return this.#$.stream}releaseWebcam(){this.#JJ()}#CJ(J){if(!J)return null;if(this.#$.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#$.snapshot),this.#P.delete(this.#$.snapshot);return this.#$.snapshot=URL.createObjectURL(J),this.#P.add(this.#$.snapshot),this.#$.snapshot}#EJ(J,Q,Z){if(typeof J.getImageData!=="function")return!1;let $;try{$=J.getImageData(0,0,Q,Z).data}catch{return!1}let X=Math.max(1,Math.floor(Q*Z/256)),Y=0,j=0,K=0;for(let W=0;W<$.length;W+=X*4){let z=Math.max($[W],$[W+1],$[W+2]);if(Y=Math.max(Y,z),K+=1,z>24)j+=1}if(!K)return!0;return Y<=40||j/K<0.04}async#kJ(J){let Q=[],Z=this.#$.stream?.getVideoTracks?.()?.[0];if(Z&&typeof ImageCapture==="function")try{if(this.#N?.track!==Z)this.#N=new ImageCapture(Z);Q.push(await this.#N.grabFrame())}catch{this.#N=null}if(typeof createImageBitmap==="function")try{Q.push(await createImageBitmap(J))}catch{}return Q.push(J),Q.filter(Boolean)}async#VJ(J,Q,Z,$){let X=await this.#kJ(Q);for(let Y of X){try{J.drawImage(Y,0,0,Z,$)}catch{continue}finally{Y.close?.()}if(!this.#EJ(J,Z,$))return!0}return!1}#AJ(J){return new Promise((Q)=>{if(typeof J.requestVideoFrameCallback==="function"){let Z=setTimeout(()=>Q(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout(Z),Q(!0)});return}setTimeout(()=>Q(!1),200)})}async#$J(J){if(!J?.videoWidth||!J.videoHeight)return null;let Q=document.createElement("canvas");Q.width=J.videoWidth,Q.height=J.videoHeight;let Z=Q.getContext("2d",{willReadFrequently:!0});if(!Z)return null;if(!await this.#VJ(Z,J,Q.width,Q.height))return null;let X=await new Promise((Y)=>Q.toBlob(Y,"image/png"));return this.#CJ(X)}#PJ(J){if(this.#z!=="webcam")return;let Q=this.#$.stream;if(!Q)return;if(this.#y===Q&&this.#$.snapshot){this.#V();return}if(this.#M)return;this.#M=!0;let Z=(X)=>{if(this.#M=!1,!X||this.#z!=="webcam"||this.#$.stream!==Q)return;this.#y=Q,this.#V()},$=async()=>{let X=await this.#$J(J);if(X){Z(X);return}if(this.#z!=="webcam"||this.#$.stream!==Q){this.#M=!1;return}return await this.#AJ(J),$()};$()}#k(J){let Q=requestAnimationFrame(()=>{if(this.#o.delete(Q),this.isConnected)J()});return this.#o.add(Q),Q}#SJ(){this.#o.forEach((J)=>cancelAnimationFrame(J)),this.#o.clear()}#IJ(){let J=new Set([this.#$.snapshot,this.#Z.poster,this.#U.url].filter((Q)=>typeof Q==="string"&&Q.startsWith("blob:")));this.#P.forEach((Q)=>{if(!J.has(Q))URL.revokeObjectURL(Q)}),this.#P.clear(),J.forEach((Q)=>this.#P.add(Q))}#xJ(){let J=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#W=document.createElement("fig-swatch"),this.#W.setAttribute("background","#D9D9D9"),this.appendChild(this.#W),this.#j=this.#W;else if(J.matches("fig-swatch, fig-chit"))this.#W=J,this.#j=J;else this.#j=J,this.#W=null;if(this.#b(),this.#j.removeEventListener("click",this.#ZJ),this.#j.addEventListener("click",this.#ZJ),this.#j.removeEventListener("keydown",this.#n),this.#j.addEventListener("keydown",this.#n),this.#W)this.#k(()=>{let Q=this.#W.querySelector('input[type="color"]');if(Q)Q.remove();this.#b()})}#XJ(){return this.getAttribute("aria-label")||"Fill picker"}#b(){if(!this.#j)return;let J=this.#u(),Q=this.getAttribute("aria-labelledby");if(!this.#j.hasAttribute("role"))this.#j.setAttribute("role","button");if(this.#j.setAttribute("tabindex",J?"-1":"0"),this.#j.setAttribute("aria-disabled",J?"true":"false"),this.#j.setAttribute("aria-haspopup","dialog"),this.#j.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#j.setAttribute("aria-controls",this.#C),this.#j.removeAttribute("aria-hidden"),Q)this.#j.setAttribute("aria-labelledby",Q),this.#j.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#XJ()}`),this.#j.removeAttribute("aria-labelledby");else if(this.#j.removeAttribute("aria-labelledby"),!this.#j.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#XJ()}`);let Z=this.getAttribute("aria-describedby");if(Z)this.#j.setAttribute("aria-describedby",Z);else this.#j.removeAttribute("aria-describedby")}#l(J){if(this.#u())return;J.stopPropagation(),J.preventDefault(),this.#e()}#D(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#u())return;J.preventDefault(),J.stopPropagation(),this.#e()}#MJ(){let J=this.getAttribute("value");if(!J)return;let Q=["solid","gradient","image","video","webcam"];try{let Z=JSON.parse(J);if(Z.type)this.#z=Z.type;if(Z.color){if(typeof Z.color==="string")this.#X=this.#OJ(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#X=Z.color}let $=Z.alpha!==void 0?Number(Z.alpha):Z.opacity!==void 0?Number(Z.opacity)/100:void 0;if(Number.isFinite($))this.#X.a=Math.max(0,Math.min(1,$));if(this.#B="srgb",Z.gradient)this.#Y=S({...this.#Y,...Z.gradient});if(Z.image)this.#U={...this.#U,...Z.image};if(Z.video){let X=this.#Z.url;if(this.#Z={...this.#Z,...Z.video},this.#Z.missing=!this.#Z.url,Z.video.poster!=null&&Z.video.poster!=="")this.#a=this.#Z.url;else if(this.#Z.url!==X)this.#zJ();else this.#yJ()}if(this.#TJ(Z),Z.type&&!Q.includes(Z.type)){let{type:X,...Y}=Z;this.#c[Z.type]=Y}}catch(Z){if(J.startsWith("#")){this.#z="solid",this.#X=this.#OJ(J);return}if(d(J)){let $=this.#Z.url;if(this.#z="video",this.#Z.url=J.trim(),this.#Z.missing=!1,this.#Z.url!==$)this.#zJ();else this.#yJ()}}}#V(){if(!this.#W)return;let J,Q="cover",Z="center";switch(this.#z){case"solid":J=this.#r(this.#X);break;case"gradient":J=this.#nJ();break;case"image":if(this.#U.url){J=I(this.#U.url);let $=this.#YJ(this.#U.scaleMode,this.#U.scale);Q=$.size,Z=$.position}else J="";break;case"video":if(this.#Z.poster){J=I(this.#Z.poster);let $=this.#YJ(this.#Z.scaleMode,this.#Z.scale);Q=$.size,Z=$.position}else J="";break;case"webcam":if(this.#$.snapshot){J=I(this.#$.snapshot);let $=this.#YJ(this.#$.scaleMode,this.#$.scale);Q=$.size,Z=$.position}else J="";break;default:{J=(this.#f[this.#z]?.element||this.querySelector(`[slot="mode-${this.#z}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#W.setAttribute("background",J),this.#W.style.setProperty("--swatch-bg-size",Q),this.#W.style.setProperty("--swatch-bg-position",Z),this.#z==="solid")this.#W.setAttribute("alpha",this.#X.a);else this.#W.removeAttribute("alpha")}#YJ(J,Q){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#e(){if(this.#u())return;if(!this.#J)this.#uJ();else this.#J.anchor=this.anchorElement||this.#j;if(this.#jJ(this.#z,{emit:!1}),this.#A=JSON.stringify(this.value),this.#d=this.#A,this.#W)this.#W.setAttribute("selected","true");this.#J.open=!0,this.#b(),this.#k(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#k(()=>{this.#I(),this.#F()})})}open(){this.#e()}close(){if(this.#J)this.#J.open=!1,this.#b()}#wJ(){if(!this.#J)return;for(let[J,{element:Q}]of Object.entries(this.#f)){let Z=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find(($)=>$.dataset.tab===J);if(!Z)continue;while(Z.firstChild)Q.appendChild(Z.firstChild)}}#fJ({stopWebcam:J=!1}={}){if(this.#w)this.#w(),this.#w=null;if(this.#p?.disconnect(),this.#p=null,!J&&this.#i())this.#g();else this.#JJ();if(!this.#J)return;this.#wJ(),this.#J.remove(),this.#J=null,this.#GJ=null,this.#A=null,this.#d=null,this.#q=null,this.#H=null,this.#R=null,this.#_=null,this.#T=!1,this.#b()}#g(){this.#s+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#JJ({emit:J=!0}={}){this.#s+=1;let Q=Boolean(this.#$.stream);if(this.#$.stream)this.#$.stream.getTracks().forEach(($)=>$.stop()),this.#$.stream=null;this.#y=null,this.#M=!1,this.#N=null;let Z=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(Z)Z.srcObject=null;if(Q&&J)this.#LJ()}#uJ(){this.#f={},this.querySelectorAll('[slot^="mode-"]').forEach((O)=>{let f=O.getAttribute("slot").slice(5);this.#f[f]={element:O,label:O.getAttribute("label")||f.charAt(0).toUpperCase()+f.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#C,this.#J.setAttribute("aria-label",this.#XJ()),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#j;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},$=this.getAttribute("mode"),X;if($){if(X=$.split(",").map((f)=>f.trim().toLowerCase()).filter((f)=>Q.includes(f)||this.#f[f]),X.length===0)X=[...Q]}else X=[...Q];let Y={...Z};for(let[O,{label:f}]of Object.entries(this.#f))Y[O]=f;if(!X.includes(this.#z))this.#z=X[0],this.#L=X[0];let j;if(X.length===1)j=G("h3",{className:"fig-fill-picker-type-label"},Y[X[0]]);else{let O=G("fig-select-options",{},X.map((f)=>G("fig-select-option",{value:f},Y[f])));j=G("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#z},O)}let K=X.map((O)=>G("div",{className:"fig-fill-picker-tab","data-tab":O})),W=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},C("close"));this.#J.replaceChildren(G("fig-header",{},[j,W]),G("fig-content",{},K)),document.body.appendChild(this.#J);for(let[O,{element:f}]of Object.entries(this.#f)){let q=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((_)=>_.dataset.tab===O);if(!q)continue;while(f.firstChild)q.appendChild(f.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:O,container:q}}))}let z=this.#J.querySelector(".fig-fill-picker-type");if(z)z.addEventListener("change",(O)=>{let f=typeof O.detail==="string"?O.detail:O.target?.value;if(f)this.#jJ(f)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let L=()=>{if(this.#W)this.#W.removeAttribute("selected");if(this.#i())this.#g();else this.#JJ();let O=JSON.stringify(this.value);if(this.#d!==null&&this.#d!==O)this.#m();this.#A=null,this.#d=null,this.#b();let f=this.#j;this.#k(()=>{if(f?.isConnected)HTMLElement.prototype.focus.call(f)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",L);let U={solid:()=>this.#gJ(),gradient:()=>this.#ZQ(),image:()=>this.#UQ(),video:()=>this.#GQ(),webcam:()=>this.#qQ()};for(let[O,f]of Object.entries(U))if(!this.#f[O]&&X.includes(O))f();for(let O of Object.keys(this.#f)){if(Q.includes(O))continue;let f=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((q)=>q.dataset.tab===O);if(!f)continue;f.addEventListener("input",(q)=>{if(q.target===this)return;if(q.stopPropagation(),q.detail)this.#c[O]=q.detail;this.#O()}),f.addEventListener("change",(q)=>{if(q.target===this)return;if(q.stopPropagation(),q.detail)this.#c[O]=q.detail;this.#m()})}}#jJ(J,{emit:Q=!0}={}){let Z=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!Z)return;let $=this.#L;if(this.#L=J,this.#z=J,$==="webcam"&&J!=="webcam")this.#JJ();let X=this.#J.querySelector(".fig-fill-picker-type");if(X&&X.value!==J)X.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((K)=>{if(K.dataset.tab===J)K.style.display="block";else K.style.display="none"});let j=this.#J.querySelector("fig-content");if(j)j.style.padding=this.#f[J]?"0":"";if(J==="gradient")this.#k(()=>{this.#v();let K=Z.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#k(()=>{K?.refreshLayout?.()})});if(J==="video")this.#DJ({emit:!1});if(J==="webcam")this.#$.live=this.#t()==="live",this.#GJ?.(this.#$.deviceId);if(this.#V(),Q)this.#O()}#bJ(){if(!this.#J?.open)return;if(this.#jJ(this.#z,{emit:!1}),this.#I(),this.#F(),this.#KJ(),this.#R)this.#R.setAttribute("value",this.#X.h);if(this.#_)this.#_.setAttribute("value",this.#X.a*100),this.#_.setAttribute("color",this.#r(this.#X));this.#v();let J=this.#J.querySelector('[data-tab="image"]'),Q=J?.querySelector(".fig-fill-picker-scale-mode"),Z=J?.querySelector(".fig-fill-picker-scale"),$=J?.querySelector(".fig-fill-picker-image-preview");if(Q)Q.value=this.#U.scaleMode;if(Z)Z.setAttribute("value",this.#U.scale),Z.style.display=this.#U.scaleMode==="tile"?"block":"none";if($)this.#QJ($);let X=this.#J.querySelector('[data-tab="video"]'),Y=X?.querySelector(".fig-fill-picker-scale-mode"),j=X?.querySelector(".fig-fill-picker-video-preview");if(Y)Y.value=this.#Z.scaleMode;if(j)this.#WJ(j)}#gJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Q=this.getAttribute("alpha")!=="false",Z=G("canvas",{width:"200",height:"200"}),$=G("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#r({...this.#X,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),X=G("fig-preview",{className:"fig-fill-picker-color-area"},[Z,$]),Y=G("fig-tooltip",{text:"Sample color"},G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},C("eyedropper"))),j=G("div",{className:`fig-fill-picker-sliders${Q?"":" is-hue-only"}`},[Y,G("fig-slider",{type:"hue",variant:"classic",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#X.h}),Q?G("fig-slider",{type:"opacity",variant:"classic",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#X.a*100,color:this.#r(this.#X)}):null]),K=G("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([U,O])=>G("fig-select-option",{value:U},O))),W=G("fig-field",{className:"fig-fill-picker-inputs"},[G("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#G},K),G("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(X,j,W),this.#q=J.querySelector("canvas"),this.#H=J.querySelector("fig-handle"),this.#x(),this.#I(),this.#F(),this.#qJ(),this.#R=J.querySelector('fig-slider[type="hue"]'),this.#R.addEventListener("input",(U)=>{this.#X.h=parseFloat(U.target.value),this.#I(),this.#F(),this.#KJ(),this.#O()}),this.#R.addEventListener("change",()=>{this.#m()}),Q)this.#_=J.querySelector('fig-slider[type="opacity"]'),this.#_.addEventListener("input",(U)=>{this.#X.a=parseFloat(U.target.value)/100,this.#KJ(),this.#O()}),this.#_.addEventListener("change",()=>{this.#m()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(U)=>{let O=typeof U.detail==="string"?U.detail:U.target?.value;if(!O)return;this.#G=O,this.#NJ()}),this.#NJ();let L=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)L.addEventListener("click",async()=>{try{let O=await new EyeDropper().open();this.#X={...this.#OJ(O.sRGBHex),a:this.#X.a},this.#I(),this.#F(),this.#KJ(),this.#O()}catch(U){}});else L.setAttribute("disabled",""),L.title="EyeDropper not supported in this browser"}#hJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Q=J.querySelector("canvas");if(Q){let Z=document.createElement("canvas");Z.width=Q.width,Z.height=Q.height,Q.replaceWith(Z),this.#q=Z,this.#qJ()}this.#I(),this.#F()}this.#BJ(),this.#O()}#I(){if(!this.#q&&this.#J)this.#q=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#q)return;let J=this.#B==="display-p3"?"display-p3":"srgb",Q=this.#q.getContext("2d",{colorSpace:J});if(!Q)return;let Z=this.#q.width,$=this.#q.height;Q.clearRect(0,0,Z,$);let X=this.#X.h,Y=this.#B==="display-p3",j=Q.createLinearGradient(0,0,Z,0);if(Y){j.addColorStop(0,"color(display-p3 1 1 1)");let[W,z,L]=hslToP3(X,100,50);j.addColorStop(1,`color(display-p3 ${W} ${z} ${L})`)}else j.addColorStop(0,"#FFFFFF"),j.addColorStop(1,`hsl(${X}, 100%, 50%)`);Q.fillStyle=j,Q.fillRect(0,0,Z,$);let K=Q.createLinearGradient(0,0,0,$);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=K,Q.fillRect(0,0,Z,$)}#F(J=0){if(!this.#H||!this.#q)return;this.#x();let Q=this.#q.getBoundingClientRect();if((Q.width===0||Q.height===0)&&J<5){this.#k(()=>this.#F(J+1));return}let Z=Math.max(0,Math.min(100,this.#X.s)),$=Math.max(0,Math.min(100,100-this.#X.v));this.#H.setAttribute("value",`${Z}% ${$}%`),this.#H.setAttribute("color",this.#r({...this.#X,a:1}))}#x(){if(!this.#H)return;this.#H.setAttribute("aria-valuenow",String(Math.round(this.#X.v))),this.#H.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#X.s)}%, brightness ${Math.round(this.#X.v)}%`),this.#H.removeAttribute("aria-pressed")}#h(J,Q,Z={}){let{updateHandle:$=!0,emitInput:X=!0,emitChange:Y=!1}=Z;if(this.#X.s=Math.max(0,Math.min(100,J*100)),this.#X.v=Math.max(0,Math.min(100,(1-Q)*100)),this.#H)this.#H.setAttribute("color",this.#r({...this.#X,a:1})),this.#x();if($)this.#F();if(this.#KJ(),X)this.#O();if(Y)this.#m()}#qJ(){if(this.#w)this.#w(),this.#w=null;if(!this.#q||!this.#H)return;let J=this.#q.parentElement||this.#q,Q=this.#H,Z=!1,$=(z,L={})=>{let U=J.getBoundingClientRect();if(U.width===0||U.height===0)return;let O=Math.max(0,Math.min(z.clientX-U.left,U.width)),f=Math.max(0,Math.min(z.clientY-U.top,U.height));this.#h(O/U.width,f/U.height,L)},X=(z)=>{if(z.button!==0)return;if(z.target===Q||Q.contains(z.target))return;Z=!0,this.#E=!0,J.setPointerCapture(z.pointerId),$(z,{updateHandle:!0,emitInput:!0})},Y=(z)=>{if(!Z)return;if(z.buttons===0){j();return}$(z,{updateHandle:!0,emitInput:!0})},j=()=>{if(!Z)return;Z=!1,this.#E=!1,this.#m()},K=(z)=>{this.#E=!0;let L=z.detail?.px,U=z.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(U))return;Q.setAttribute("value",`${L*100}% ${U*100}%`),this.#h(L,U,{updateHandle:!1,emitInput:!0})},W=(z)=>{let L=z.detail?.px,U=z.detail?.py;if(Number.isFinite(L)&&Number.isFinite(U))Q.setAttribute("value",`${L*100}% ${U*100}%`),this.#h(L,U,{updateHandle:!1,emitInput:!1});this.#E=!1,this.#m()};J.addEventListener("pointerdown",X),J.addEventListener("pointermove",Y),J.addEventListener("pointerup",j),J.addEventListener("pointercancel",j),J.addEventListener("lostpointercapture",j),Q.addEventListener("input",K),Q.addEventListener("change",W),this.#w=()=>{J.removeEventListener("pointerdown",X),J.removeEventListener("pointermove",Y),J.removeEventListener("pointerup",j),J.removeEventListener("pointercancel",j),J.removeEventListener("lostpointercapture",j),Q.removeEventListener("input",K),Q.removeEventListener("change",W),this.#E=!1}}#NJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=(K,W)=>G("fig-tooltip",{text:K},W),Z=(K,W,z,L,U,O)=>G("fig-input-number",{className:K,"aria-label":W,min:z,max:L,step:U,units:O}),$=this.getAttribute("alpha")!=="false",X=()=>$?Q("Alpha",Z("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Y=(K,W="")=>G("div",{className:["input-combo",W].filter(Boolean).join(" ")},K),j;switch(this.#G){case"rgb":j=Y([Q("Red",Z("fig-fill-picker-ci-r","Red",0,255)),Q("Green",Z("fig-fill-picker-ci-g","Green",0,255)),Q("Blue",Z("fig-fill-picker-ci-b","Blue",0,255)),X()]);break;case"hsl":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Lightness",Z("fig-fill-picker-ci-l","Lightness",0,100)),X()]);break;case"hsb":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Brightness",Z("fig-fill-picker-ci-v","Brightness",0,100)),X()]);break;case"lab":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Green-Red axis",Z("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Q("Blue-Yellow axis",Z("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),X()]);break;case"lch":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Chroma",Z("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Q("Hue",Z("fig-fill-picker-ci-okh","Hue",0,360)),X()]);break;case"css":j=G("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=G("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});j=$?Y([K,X()],"fig-fill-picker-ci-hex-row"):K}break}J.replaceChildren(j),this.#eJ(),this.#k(()=>this.#KJ())}#eJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=()=>{if(this.#E)return;let X=this.#QQ();if(!X)return;let Y=Number.isFinite(X.a)?X.a:this.#X.a;if(this.#X={...X,a:Y},this.#I(),this.#F(),this.#R)this.#R.setAttribute("value",this.#X.h);if(this.#_&&Number.isFinite(X.a))this.#_.setAttribute("value",this.#X.a*100);this.#O()},Z=()=>this.#m();J.querySelectorAll("fig-input-number, fig-input-text").forEach((X)=>{X.addEventListener("input",Q),X.addEventListener("change",Z)})}#JQ(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Q=parseFloat(J.value);if(!Number.isFinite(Q))return;return Math.max(0,Math.min(1,Q/100))}#QQ(){let J=($)=>this.#J?.querySelector(`.${$}`),Q=($)=>parseFloat(J($)?.value??0),Z=($)=>{if(!$)return null;let X=this.#JQ();return{...$,a:X??$.a??this.#X.a}};switch(this.#G){case"rgb":return Z(this.#UJ({r:Q("fig-fill-picker-ci-r"),g:Q("fig-fill-picker-ci-g"),b:Q("fig-fill-picker-ci-b")}));case"hsl":{let $=this.#NQ({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),l:Q("fig-fill-picker-ci-l")});return Z(this.#UJ($))}case"hsb":return Z({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),v:Q("fig-fill-picker-ci-v")});case"lab":{let $=this.#tJ({l:Q("fig-fill-picker-ci-okl")/100,a:Q("fig-fill-picker-ci-oka"),b:Q("fig-fill-picker-ci-okb")});return Z(this.#UJ($))}case"lch":{let $=this.#DQ({l:Q("fig-fill-picker-ci-okl")/100,c:Q("fig-fill-picker-ci-okc"),h:Q("fig-fill-picker-ci-okh")});return Z(this.#UJ($))}case"css":{let $=J("fig-fill-picker-ci-css");if(!$)return null;return this.#TQ($.value)}default:{let $=J("fig-fill-picker-ci-hex");if(!$)return null;let X=$.value.replace(/^#/,"");if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];if(X.length===8){let Y=parseInt(X.slice(6,8),16)/255;if(X=X.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(X))return null;return{...this.#OJ(`#${X}`),a:Y}}if(X.length!==6||!/^[0-9a-fA-F]{6}$/.test(X))return null;return Z(this.#OJ(`#${X}`))}}}#KJ(){if(!this.#J)return;let J=this.#r(this.#X),Q=this.#sJ(this.#X),Z=(X)=>this.#J.querySelector(`.${X}`),$=(X,Y)=>{let j=Z(X);if(j)j.setAttribute("value",Y)};switch(this.#G){case"rgb":$("fig-fill-picker-ci-r",Q.r),$("fig-fill-picker-ci-g",Q.g),$("fig-fill-picker-ci-b",Q.b);break;case"hsl":{let X=this.#MQ(Q);$("fig-fill-picker-ci-h",Math.round(X.h)),$("fig-fill-picker-ci-s",Math.round(X.s)),$("fig-fill-picker-ci-l",Math.round(X.l));break}case"hsb":$("fig-fill-picker-ci-h",Math.round(this.#X.h)),$("fig-fill-picker-ci-s",Math.round(this.#X.s)),$("fig-fill-picker-ci-v",Math.round(this.#X.v));break;case"lab":{let X=this.#aJ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-oka",+X.a.toFixed(3)),$("fig-fill-picker-ci-okb",+X.b.toFixed(3));break}case"lch":{let X=this.#yQ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-okc",+X.c.toFixed(3)),$("fig-fill-picker-ci-okh",Math.round(X.h));break}case"css":$("fig-fill-picker-ci-css",this.#_Q(this.#X));break;default:$("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#G!=="css"){let X=Math.round(this.#X.a*1000)/10;$("fig-fill-picker-ci-a",Number.isInteger(X)?X:+X.toFixed(1))}if(this.#_)this.#_.setAttribute("color",J);this.#V()}#ZQ(){let J=this.#J.querySelector('[data-tab="gradient"]'),Q=G("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#Y.type,variant:"ghost"},G("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([z,L])=>G("fig-select-option",{value:z},L)))),Z=(z,L,U)=>G("fig-tooltip",{text:z},G("fig-button",{icon:!0,variant:"ghost",className:L,"aria-label":z},C(U))),$=G("div",{className:"fig-fill-picker-gradient-actions"},[Z("Flip gradient","fig-fill-picker-gradient-flip","swap"),Z("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),X=G("fig-field",{className:"fig-fill-picker-gradient-header"},[Q,$]),Y=G("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:P(this.#Y)})}),j=G("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),K=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},C("add")),W=G("div",{className:"fig-fill-picker-gradient-stops"},[G("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[G("h3",{},"Stops"),K]),G("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(X,j,W),this.#v(),this.#$Q(J)}#FQ(){let J=({value:$,title:X,subtitle:Y,advanced:j=!1})=>G("fig-select-option",{value:$,label:`${X} — ${Y}`,className:j?"fig-fill-picker-gradient-interpolation-advanced":null},[G("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),G("span",{className:"fig-fill-picker-gradient-interpolation-label"},[G("span",{className:"fig-fill-picker-gradient-interpolation-title"},X),G("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Y)])]),Q=G("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),Z=y.#K;return[...Z.filter(($)=>!$.advanced).map(J),Q,...Z.filter(($)=>$.advanced).map(J)]}#$Q(J){let Q=(V)=>typeof V.detail==="string"?V.detail:V.target?.value,Z=J.querySelector(".fig-fill-picker-gradient-bar-input"),$=(V)=>{if(!Z)return;this.#T=!0;try{Z.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(V)}))}finally{this.#T=!1}},X=()=>{$(this.#Y)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(V)=>{let H=Q(V);if(!H)return;this.#Y.type=H,this.#v(),this.#O()});let j=J.querySelector(".fig-fill-picker-gradient-space"),K=j?.querySelector("fig-select-options"),W="fig-fill-picker-gradient-interpolation-collapsed",z=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),L=()=>Boolean(K?.classList.contains(W)),U=(V)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",V?"Show all color interpolation options":"Scroll down")},O=()=>{if(!K)return;K.classList.remove(W),K.style.removeProperty("max-height"),U(!1),K.syncOverflow?.()},f=()=>{if(!K||!z)return;K.style.removeProperty("max-height"),K.classList.add(W),K.scrollTop=0;let V=K.getBoundingClientRect().top,H=z.getBoundingClientRect().top,M=K.querySelector(".fig-overflow-end")?.offsetHeight||0,D=H-V;if(D>0)K.style.maxHeight=`${Math.round(D+M)}px`;U(!0),K.syncOverflow?.()},q=(V)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${V}"]`)),_=()=>{if(q(g(this.#Y)))O();else f()};if(K?.addEventListener("click",(V)=>{if(!L())return;if(!V.target?.closest?.(".fig-overflow-end"))return;V.preventDefault(),V.stopPropagation(),O()},!0),K?.addEventListener("focusin",(V)=>{if(!L())return;if(V.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))O()}),K?.addEventListener("scroll",()=>{if(L()&&K.scrollTop!==0)K.scrollTop=0}),j?.querySelectorAll("fig-select-option").forEach((V)=>{let H=()=>{let M=F(V.getAttribute("value")||"srgb");$(N({...this.#Y,...M}))};V.addEventListener("pointerenter",H),V.addEventListener("pointerleave",()=>{if(document.activeElement!==V)X()}),V.addEventListener("focus",H),V.addEventListener("blur",()=>{if(!V.matches(":hover"))X()})}),this.#p?.disconnect(),j)this.#p=new MutationObserver(()=>{if(!j.hasAttribute("open"))X();else this.#k(_)}),this.#p.observe(j,{attributes:!0,attributeFilter:["open"]});let R=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(R?.addEventListener("change",(V)=>{let H=typeof V.detail==="string"?V.detail:V.target?.value;if(!H)return;let M=F(H);this.#Y=N({...this.#Y,...M}),this.#v(),this.#O()}),R?.querySelectorAll("fig-segment").forEach((V)=>{let H=()=>{$(N({...this.#Y,...F(V.getAttribute("value")||"srgb")}))};V.addEventListener("pointerenter",H),V.addEventListener("pointerleave",X)}),j?.addEventListener("change",(V)=>{let H=Q(V);if(!H)return;let M=F(H);this.#Y=N({...this.#Y,...M}),this.#v(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#Y.angle=(Number(this.#Y.angle)+90)%360,this.#v(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#Y.stops.forEach((V)=>{V.position=100-V.position}),this.#Y.stops.sort((V,H)=>V.position-H.position),this.#v(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#Y.stops.push({position:50,color:"#888888",opacity:100}),this.#Y.stops.sort((H,M)=>H.position-M.position),this.#v(),this.#O()}),Z){let V=(H)=>{if(H.stopPropagation(),this.#T)return;let M=H.detail;if(!M?.gradient)return;this.#Y=S({...this.#Y,...M.gradient}),this.#V(),this.#HJ(),this.#iJ()};Z.addEventListener("input",(H)=>{V(H),this.#O()}),Z.addEventListener("change",(H)=>{V(H),this.#m()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(V)=>{this.#KQ(V)})}#vJ(J){let Q=String(J.color||"#888888").replace(/^#/,"").slice(0,6),Z=J.opacity??100;if(Z>=100)return`#${Q}`;let $=Math.round(Z/100*255).toString(16).padStart(2,"0");return`#${Q}${$}`}#XQ(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#mJ(J.hexOpaque);let Q=J.value;if(typeof Q==="string"&&Q.startsWith("#"))return this.#mJ(Q.length>7?Q.slice(0,7):Q);let Z=J.querySelector('fig-input-text:not([type="number"])'),$=String(Z?.value??Z?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test($))return`#${$.toUpperCase()}`;let X=J.getAttribute("value");if(typeof X==="string"&&X.startsWith("#"))return this.#mJ(X.length>7?X.slice(0,7):X);return"#888888"}#mJ(J){let Q=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Q))return"#888888";return`#${Q.toUpperCase()}`}#YQ(J){let Q=J.querySelector(".fig-fill-picker-stop-position"),Z=J.querySelector(".fig-fill-picker-stop-color"),$=parseFloat(Q?.value??Q?.getAttribute("value")??"0")||0,X=this.#XQ(Z),Y=100;if(Z instanceof HTMLElement&&Z.rgba?.a!==void 0)Y=Math.round(Z.rgba.a*100);else{let j=parseInt(J.dataset.index,10);if(!isNaN(j)&&this.#Y.stops[j])Y=this.#Y.stops[j].opacity??100}return{position:$,color:X,opacity:Y}}#cJ(J){let Q=parseInt(J.dataset.index,10);if(isNaN(Q)||Q<0||Q>=this.#Y.stops.length)return;let Z={...this.#Y.stops[Q],...this.#YQ(J)};this.#Y.stops[Q]=Z,this.#jQ(J,Z)}#jQ(J,Q){let Z=J.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",String(Q.position));let $=J.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#vJ(Q))}#KQ(J){let{oldIndex:Q,newIndex:Z}=J.detail??{};if(Q==null||Z==null||Q===Z||Q<0||Z<0||Q>=this.#Y.stops.length||Z>=this.#Y.stops.length)return;let X=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");X.forEach((j)=>this.#cJ(j));let[Y]=this.#Y.stops.splice(Q,1);this.#Y.stops.splice(Z,0,Y),X.forEach((j,K)=>{j.dataset.index=String(K)}),this.#T=!0;try{this.#HJ(),this.#BJ(),this.#O()}finally{this.#T=!1}}#v(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#Y=S(this.#Y);let Q=g(this.#Y),Z=J.querySelector(".fig-fill-picker-gradient-space");if(Z)Z.value=Q;let $=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if($){let X=y.#Q(Q),Y=$.querySelector(`fig-segment[value="${Q}"]`)||$.querySelector(`fig-segment[data-space="${X.space}"]`);if(Y){let j=`${X.title} — ${X.subtitle}`;Y.setAttribute("value",Q),Y.setAttribute("aria-label",j);let K=Y.closest("fig-tooltip");if(K)K.setAttribute("text",j);$.value=Q}}this.#HJ(),this.#BJ(),this.#iJ()}#WQ(){let J=Array.isArray(this.#Y.stops)?[...this.#Y.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Q)=>({color:String(Q.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q.position??0}))}#HJ(){if(!this.#J)return;let J=this.#WQ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Q)=>{let Z=Q.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",$=F(Z),X={type:"linear",stops:J,interpolationSpace:$.interpolationSpace};if(E.has($.interpolationSpace))X.hueInterpolation=$.hueInterpolation;Q.value={type:"gradient",gradient:X}})}#BJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#T=!0,J.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(this.#Y)})),this.#T=!1;this.#V()}#iJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Q=J?.querySelector("fig-reorder");if(!J||!Q)return;let Z=Q.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Z.length===this.#Y.stops.length){this.#Y.stops.forEach(($,X)=>{let Y=Z[X];Y.dataset.index=X;let j=Y.querySelector(".fig-fill-picker-stop-position");if(j)j.setAttribute("value",$.position);let K=Y.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#vJ($));let W=Y.querySelector(".fig-fill-picker-stop-remove");if(W)if(this.#Y.stops.length<=2)W.setAttribute("disabled","");else W.removeAttribute("disabled")});return}this.#zQ(J)}#zQ(J){let Q=J.querySelector("fig-reorder");if(!Q)return;let Z=this.#Y.stops.map(($,X)=>G("fig-field",{className:"fig-fill-picker-gradient-stop-row","data-index":X},[G("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:$.position,units:"%"}),G("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#vJ($)}),G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-stop-remove",disabled:this.#Y.stops.length<=2,"aria-label":"Remove gradient stop"},C("minus"))]));Q.replaceChildren(...Z),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#cJ($),this.#HJ(),this.#BJ(),this.#O()});let X=$.querySelector(".fig-fill-picker-stop-color"),Y=X.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J;else this.#k(()=>{let K=X.querySelector("fig-fill-picker");if(K)K.anchorElement=this.#J});let j=()=>{this.#cJ($),this.#T=!0;try{this.#HJ(),this.#BJ(),this.#O()}finally{this.#T=!1}};X.addEventListener("input",j),X.addEventListener("change",j),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let K=parseInt($.dataset.index,10);if(this.#Y.stops.length>2)this.#Y.stops.splice(K,1),this.#v(),this.#O()})})}#pJ(J,Q=!0){let Z=N({...this.#Y,interpolationSpace:J??this.#Y.interpolationSpace}),$=this.#B==="display-p3",X=Z.stops.map((K)=>{let W=(K.opacity??100)/100;return`${$?this.#kQ(K.color,W):this.#BQ(K.color,W)} ${K.position}%`}).join(", "),Y=XJ(Z),j=Q&&Y?` ${Y}`:"";switch(Z.type){case"linear":return`linear-gradient(${Z.angle}deg${j}, ${X})`;case"radial":return`radial-gradient(circle at ${Z.centerX}% ${Z.centerY}%${j}, ${X})`;case"angular":return`conic-gradient(from ${Z.angle}deg${j}, ${X})`;default:return`linear-gradient(${Z.angle}deg${j}, ${X})`}}static#lJ=new Map;#rJ(J){let Q=y.#lJ.get(J);if(Q!==void 0)return Q;let Z=document.createElement("div");Z.style.background=J;let $=!!Z.style.background;return y.#lJ.set(J,$),$}#nJ(){let J=this.#pJ(void 0,!0);if(this.#rJ(J))return J;let Q=this.#pJ("oklab",!0);if(this.#rJ(Q))return Q;return this.#pJ("oklab",!1)}#UQ(){let J=this.#J.querySelector('[data-tab="image"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#U.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Y,j])=>G("fig-select-option",{value:Y},j)))),Z=G("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#U.scale,units:"%"});if(this.#U.scaleMode!=="tile")Z.style.display="none";let $=G("fig-field",{className:"fig-fill-picker-media-header"},[Q,Z]),X=G("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});J.replaceChildren($,X),this.#OQ(J)}#OQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-scale"),$=J.querySelector(".fig-fill-picker-image-preview");Q.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#U.scaleMode=Y,Z.style.display=Y==="tile"?"block":"none",this.#QJ($),this.#V(),this.#O()}),Z.addEventListener("input",(X)=>{this.#U.scale=parseFloat(X.target.value)||100,this.#QJ($),this.#V(),this.#O()}),$.addEventListener("loaded",(X)=>{let Y=X.detail?.src||$.src;if(!Y)return;let j=Y!==this.#U.url;if(this.#U.url=Y,this.#QJ($),this.#V(),j)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),$.addEventListener("change",()=>{if($.src)return;this.#U.url=null,this.#QJ($),this.#V(),this.#O()}),this.#QJ($)}#QJ(J){if(!this.#U.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#U.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#U.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#U.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#U.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#WJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#Z.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#Z.url),this.#Z.poster)J.setAttribute("poster",this.#Z.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#Z.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#Z.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#GQ(){let J=this.#J.querySelector('[data-tab="video"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#Z.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([X,Y])=>G("fig-select-option",{value:X},Y)))),Z=G("fig-field",{className:"fig-fill-picker-media-header"},Q),$=G("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});J.replaceChildren(Z,$),this.#fQ(J),this.#DJ({emit:!1})}#zJ(){if(this.#Z.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#Z.poster),this.#P.delete(this.#Z.poster);this.#Z.poster=null,this.#a=null}#yJ(){if(!this.#Z.poster)return;if(this.#a&&this.#a===this.#Z.url)return;this.#zJ()}#dJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#WJ(J)}#DJ({emit:J=!1}={}){if(this.#Z.url){if(this.#Z.missing=!1,this.#yJ(),!this.#Z.poster)this.#FJ(this.#Z.url);else this.#dJ();return}let Q=this.getAttribute("default-video");if(!Q){this.#Z.missing=!0;return}if(this.#Z.url=Q,this.#Z.missing=!1,this.#dJ(),this.#FJ(Q),J)this.#O()}#oJ(){if(this.#z!=="video")return;let J=this.#Z.url;if(!J)return;if(this.#yJ(),this.#Z.poster)return;this.#FJ(J)}async#LQ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Q)=>J.requestVideoFrameCallback(()=>Q())),new Promise((Q)=>setTimeout(Q,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#VQ(J){let Q=await this.#LQ(J),Z=Q?.width||J.videoWidth,$=Q?.height||J.videoHeight;if(!Z||!$)return Q?.close?.(),null;let X=typeof OffscreenCanvas==="function"?new OffscreenCanvas(Z,$):Object.assign(document.createElement("canvas"),{width:Z,height:$}),Y=X.getContext("2d");if(!Y)return Q?.close?.(),null;try{Y.drawImage(Q||J,0,0,Z,$)}finally{Q?.close?.()}return X.convertToBlob?X.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((j)=>X.toBlob(j,"image/jpeg",0.85))}async#FJ(J,{emit:Q=!1}={}){if(!J||this.#S===J)return;this.#S=J;let Z=document.createElement("video");Z.muted=!0,Z.playsInline=!0,Z.preload="auto",Z.crossOrigin="anonymous";try{if(await new Promise((X,Y)=>{let j=()=>Y(Error("video poster failed"));Z.addEventListener("error",j,{once:!0}),Z.addEventListener("loadeddata",X,{once:!0}),Z.src=J}),!Z.videoWidth||!Z.videoHeight)return;let $=await this.#VQ(Z);if(!$||this.#Z.url!==J)return;if(this.#zJ(),this.#Z.poster=URL.createObjectURL($),this.#a=J,this.#P.add(this.#Z.poster),this.#V(),this.#dJ(),Q)this.#O()}catch{}finally{if(Z.removeAttribute("src"),Z.load(),this.#S===J)this.#S=null}}#fQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-video-preview");Q.addEventListener("change",($)=>{let X=typeof $.detail==="string"?$.detail:$.target?.value;if(!X)return;this.#Z.scaleMode=X,this.#WJ(Z),this.#V(),this.#O()}),Z.addEventListener("loaded",($)=>{let X=$.detail?.src||Z.src;if(!X)return;let Y=X!==this.#Z.url;if(Y)this.#zJ();if(this.#Z.url=X,this.#Z.missing=!1,this.#WJ(Z),this.#FJ(X),this.#V(),Y)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:$.detail??{src:X}}))}),Z.addEventListener("change",()=>{if(Z.src)return;this.#Z.url=null,this.#zJ(),this.#DJ(),this.#WJ(Z),this.#V(),this.#O()}),this.#WJ(Z)}#qQ(){let J=this.#J.querySelector('[data-tab="webcam"]'),Q=G("fig-field",{className:"fig-fill-picker-webcam-camera"},G("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Q.style.display="none";let Z=G("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});Z.muted=!0;let $=G("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},G("span",{},"Camera access required")),X=G("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[Z,$]),Y=G("div",{className:"fig-fill-picker-webcam-controls"},G("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Q,X,Y),this.#HQ(J)}#HQ(J){let Q=J.querySelector(".fig-fill-picker-webcam-video"),Z=J.querySelector(".fig-fill-picker-webcam-status"),$=J.querySelector(".fig-fill-picker-webcam-capture"),X=J.querySelector(".fig-fill-picker-webcam-camera"),Y=J.querySelector(".fig-fill-picker-camera-select"),j=(U)=>{if(U)$.removeAttribute("disabled");else $.setAttribute("disabled","")},K=()=>{let U=!!this.#$.stream&&Q.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Q.videoWidth>0&&Q.videoHeight>0;if(j(U),U)Z.querySelector("span").textContent="Camera ready",Z.style.display="none",this.#PJ(Q)};Q.addEventListener("loadedmetadata",K),Q.addEventListener("canplay",K),Q.addEventListener("playing",K);let W=(U)=>{this.#$.stream=U,Q.srcObject=U,Q.muted=!0,Q.playsInline=!0,Q.style.display="block";let O=Q.play?.();if(O?.catch)O.catch(()=>{});K()},z=async(U,O)=>{let f=await navigator.mediaDevices.enumerateDevices();if(U!=null&&U!==this.#s)return;let q=f.filter((_)=>_.kind==="videoinput");if(q.length>1){X.style.display="";let _=Y.querySelector(":scope > fig-select-options");if(!_)_=document.createElement("fig-select-options"),Y.append(_);if(_.replaceChildren(),q.forEach((R,T)=>{let V=document.createElement("fig-select-option");V.value=R.deviceId;let H=R.label||(q.length>1?`Camera ${T+1}`:"Camera");V.textContent=H.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(M,D)=>{return` ${/^\d+$/.test(D)?Number.parseInt(D,10).toString():D.replace(/^0+/,"")||"0"}`}),_.append(V)}),O)Y.value=O}else X.style.display="none",Y.querySelector(":scope > fig-select-options")?.replaceChildren()},L=async(U=null)=>{let O=U||this.#$.deviceId||null,f=this.#$.stream,q=f?.getTracks?.().filter((R)=>R.readyState!=="ended")??[];if(f&&q.length){let R=f.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#$.deviceId||null;if(!O||O===R){W(f),this.#LJ(),z(null,O||R);return}}this.#JJ({emit:Boolean(f)});let _=this.#s;j(!1),Z.querySelector("span").textContent="Starting camera",Z.style.display="flex";try{let R={video:O?{deviceId:{exact:O}}:!0},T=await navigator.mediaDevices.getUserMedia(R);if(_!==this.#s||!this.isConnected||this.#L!=="webcam"){T.getTracks().forEach((H)=>H.stop());return}let V=T.getVideoTracks?.()?.[0];this.#$.deviceId=O||V?.getSettings?.()?.deviceId||null,this.#$.live=this.#t()==="live",W(T),this.#LJ(),await z(_,O)}catch(R){if(_!==this.#s)return;console.error("Webcam error:",R.name,R.message);let T="Camera access denied";if(R.name==="NotAllowedError")T="Camera permission denied";else if(R.name==="NotFoundError")T="No camera found";else if(R.name==="NotReadableError")T="Camera in use by another app";else if(R.name==="OverconstrainedError")T="Camera constraints not supported";else if(!window.isSecureContext)T="Camera requires secure context";Z.replaceChildren();let V=document.createElement("span");V.textContent=T,Z.appendChild(V),Z.style.display="flex",Q.style.display="none",j(!1)}};this.#GJ=L,Y.addEventListener("change",(U)=>{let O=typeof U.detail==="string"?U.detail:U.target?.value;if(!O||O===this.#$.deviceId)return;L(O)}),$.addEventListener("click",async()=>{if(!this.#$.stream)return;let U=await this.#$J(Q);if(!U)return;this.#U.url=U,this.#$.live=!1;let O=this.#J.querySelector(".fig-fill-picker-image-preview");if(O)this.#QJ(O);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((q)=>q.dataset.tab==="image"))this.#jJ("image");else this.#V(),this.#O();this.#m()})}#sJ(J){let Q=J.h/360,Z=J.s/100,$=J.v/100,X,Y,j,K=Math.floor(Q*6),W=Q*6-K,z=$*(1-Z),L=$*(1-W*Z),U=$*(1-(1-W)*Z);switch(K%6){case 0:X=$,Y=U,j=z;break;case 1:X=L,Y=$,j=z;break;case 2:X=z,Y=$,j=U;break;case 3:X=z,Y=L,j=$;break;case 4:X=U,Y=z,j=$;break;case 5:X=$,Y=z,j=L;break}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#UJ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j=X-Y,K=0,W=X===0?0:j/X,z=X;if(X!==Y){switch(X){case Q:K=(Z-$)/j+(Z<$?6:0);break;case Z:K=($-Q)/j+2;break;case $:K=(Q-Z)/j+4;break}K/=6}return{h:K*360,s:W*100,v:z*100,a:1}}#r(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Q=this.#sJ(J),Z=($)=>{return(isNaN($)?217:Math.max(0,Math.min(255,Math.round($)))).toString(16).padStart(2,"0")};return`#${Z(Q.r)}${Z(Q.g)}${Z(Q.b)}`}#OJ(J){let Q=parseInt(J.slice(1,3),16),Z=parseInt(J.slice(3,5),16),$=parseInt(J.slice(5,7),16);return this.#UJ({r:Q,g:Z,b:$})}#BQ(J,Q=1){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return`rgba(${Z}, ${$}, ${X}, ${Q})`}#RQ(J){let Q=Math.max(0,Math.min(1,Number(J)||0)),Z=Math.round(Q*1000)/1000;return String(Z)}#_Q(J=this.#X){let Q=this.#sJ(J);return`rgba(${Q.r}, ${Q.g}, ${Q.b}, ${this.#RQ(J.a)})`}#TQ(J){let Q=String(J??"").trim();if(!Q)return null;let Z=Q.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(Z){let X=Z[1];if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];let Y=1;if(X.length===8)Y=parseInt(X.slice(6,8),16)/255,X=X.slice(0,6);return{...this.#OJ(`#${X}`),a:Y}}let $=Q.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if($){let X=Math.max(0,Math.min(255,Math.round(parseFloat($[1])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat($[2])))),j=Math.max(0,Math.min(255,Math.round(parseFloat($[3])))),K=$[4]!==void 0?Math.max(0,Math.min(1,parseFloat($[4]))):1;if(![X,Y,j,K].every(Number.isFinite))return null;return{...this.#UJ({r:X,g:Y,b:j}),a:K}}return null}#kQ(J,Q=1){let Z=+(parseInt(J.slice(1,3),16)/255).toFixed(4),$=+(parseInt(J.slice(3,5),16)/255).toFixed(4),X=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${Z} ${$} ${X} / ${Q})`}#MQ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j,K,W=(X+Y)/2;if(X===Y)j=K=0;else{let z=X-Y;switch(K=W>0.5?z/(2-X-Y):z/(X+Y),X){case Q:j=((Z-$)/z+(Z<$?6:0))/6;break;case Z:j=(($-Q)/z+2)/6;break;case $:j=((Q-Z)/z+4)/6;break}}return{h:j*360,s:K*100,l:W*100}}#NQ(J){let Q=J.h/360,Z=J.s/100,$=J.l/100,X,Y,j;if(Z===0)X=Y=j=$;else{let K=(L,U,O)=>{if(O<0)O+=1;if(O>1)O-=1;if(O<0.16666666666666666)return L+(U-L)*6*O;if(O<0.5)return U;if(O<0.6666666666666666)return L+(U-L)*(0.6666666666666666-O)*6;return L},W=$<0.5?$*(1+Z):$+Z-$*Z,z=2*$-W;X=K(z,W,Q+0.3333333333333333),Y=K(z,W,Q),j=K(z,W,Q-0.3333333333333333)}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#aJ(J){let Q=(U)=>{return U=U/255,U<=0.04045?U/12.92:Math.pow((U+0.055)/1.055,2.4)},Z=Q(J.r),$=Q(J.g),X=Q(J.b),Y=0.4122214708*Z+0.5363325363*$+0.0514459929*X,j=0.2119034982*Z+0.6806995451*$+0.1073969566*X,K=0.0883024619*Z+0.2817188376*$+0.6299787005*X,W=Math.cbrt(Y),z=Math.cbrt(j),L=Math.cbrt(K);return{l:0.2104542553*W+0.793617785*z-0.0040720468*L,a:1.9779984951*W-2.428592205*z+0.4505937099*L,b:0.0259040371*W+0.7827717662*z-0.808675766*L}}#yQ(J){let Q=this.#aJ(J);return{l:Q.l,c:Math.sqrt(Q.a*Q.a+Q.b*Q.b),h:(Math.atan2(Q.b,Q.a)*180/Math.PI+360)%360}}#tJ(J){let Q=J.l+0.3963377774*J.a+0.2158037573*J.b,Z=J.l-0.1055613458*J.a-0.0638541728*J.b,$=J.l-0.0894841775*J.a-1.291485548*J.b,X=Q*Q*Q,Y=Z*Z*Z,j=$*$*$,K=(W)=>{let z=W<=0.0031308?12.92*W:1.055*Math.pow(W,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,z))*255)};return{r:K(4.0767416621*X-3.3077115913*Y+0.2309699292*j),g:K(-1.2684380046*X+2.6097574011*Y-0.3413193965*j),b:K(-0.0041960863*X-0.7034186147*Y+1.707614701*j)}}#DQ(J){let Q=J.h*Math.PI/180;return this.#tJ({l:J.l,a:J.c*Math.cos(Q),b:J.c*Math.sin(Q)})}#O(){if(this.#u())return;this.#V(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#m(){if(this.#u())return;this.#d=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#z,colorSpace:this.#B};switch(this.#z){case"solid":return{...J,color:this.#r(this.#X),alpha:this.#X.a,hsv:{...this.#X}};case"gradient":return{...J,gradient:P(this.#Y),css:this.#nJ()};case"image":return{...J,image:{...this.#U}};case"video":return{...J,video:this.#_J()};case"webcam":return{...J,webcam:this.#RJ()};default:return{...J,...this.#c[this.#z]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":if(this.#MJ(),this.#V(),this.#oJ(),this.#J?.open&&!this.#E)this.#bJ(),this.#d=JSON.stringify(this.value);break;case"disabled":if(this.#b(),this.#u()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let $=this.#J.open;if(this.#fJ(),$&&this.isConnected)this.#e();break}case"webcam-mode":if(this.#z==="webcam")this.#V();break;case"default-video":if(this.#z==="video")this.#DJ({emit:!1}),this.#V();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#XJ());case"aria-labelledby":case"aria-describedby":this.#b();break}}}A("fig-fill-picker",y);class B extends HTMLElement{static#K=new Set(["oklch","hsl"]);static#Q=10;static#j=10;static#W=8;static#J=3;static#C=210;static#L={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#z=!1;#B=null;#X=null;#G={...B.#L};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#G}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#Y(),this.#U(),this.#E(),this.#T()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J!=="value")return;if(this.#U(),this.#z)this.#T()}#Y(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#U(){let J=this.getAttribute("value");if(!J){this.#G={...B.#L,stops:B.#L.stops.map((Q)=>({...Q}))};return}try{let Q=JSON.parse(J),Z=Q?.type==="gradient"&&Q.gradient?Q.gradient:Q?.gradient?Q.gradient:Q;if(!Z||typeof Z!=="object")return;this.#G=this.#Z({...B.#L,...Z})}catch{}}#Z(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase(),$=String(Q.hueInterpolation??"shorter").toLowerCase(),X=Array.isArray(Q.stops)?Q.stops.map((Y)=>({color:String(Y?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Y?.position??0,opacity:Y?.opacity??100})):B.#L.stops.map((Y)=>({...Y}));if(X.length<2)return{...B.#L,stops:B.#L.stops.map((Y)=>({...Y}))};return{type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):135,interpolationSpace:Z,hueInterpolation:$,stops:X}}#$(){return B.#K.has(this.#G.interpolationSpace||"srgb")}#y(J){let{r:Q,g:Z,b:$}=l(J);if(this.#G.interpolationSpace==="hsl")return r(Q,Z,$).h;let X=n(Q,Z,$);return(o(X.l,X.a,X.b).h%360+360)%360}#M(){let J=this.#H(),Q=this.#y(J[0]?.color||"#FF0000"),Z=this.#y(J[J.length-1]?.color||"#4F9EFF"),$=B.#C-Q,Y=((B.#C-Z-$)%360+360)%360,j=Y===0?0:Y-360,K=this.#G.hueInterpolation||"shorter",W;if(K==="increasing")W=j;else if(K==="decreasing")W=Y;else if(K==="longer")W=Y<180?j:Y;else W=Y<=180?Y:j;let z=Math.sign(W),L=Math.asin(B.#J/2/B.#W)*180/Math.PI,U=Math.min(L,Math.max(0,(Math.abs(W)-0.01)/2));return{startDeg:$+z*U,sweepDeg:W-z*U*2}}#N(J){let Q=J*Math.PI/180;return{x:B.#Q+B.#W*Math.cos(Q),y:B.#j+B.#W*Math.sin(Q)}}#f(J,Q){let Z=J+Q,$=this.#N(J),X=this.#N(Z),Y=Math.abs(Q)>180?1:0,j=Q>=0?1:0;return`M ${$.x} ${$.y} A ${B.#W} ${B.#W} 0 ${Y} ${j} ${X.x} ${X.y}`}#c(){let J=this.#N(180),Q=this.#N(0);return`M ${J.x} ${J.y} L ${Q.x} ${Q.y}`}#q(J){let Q=B.#J,Z=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Q}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(Z)}")`}#H(){return[...this.#G.stops].sort((J,Q)=>(J.position??0)-(Q.position??0))}#R(){let J=this.#G.interpolationSpace||"srgb";if(J==="srgb")return"";if(B.#K.has(J))return` in ${J} ${this.#G.hueInterpolation||"shorter"} hue`;return` in ${J}`}#_(){let J=this.#H(),Q=this.#R();if(this.#$()){let $=(B.#C+90)%360,X=this.#G.interpolationSpace,Y=(K)=>X==="oklch"?`oklch(65% 0.25 ${K})`:`hsl(${K} 100% 50%)`,j=[0,300,240,180,120,60,0].map(Y).join(", ");return`conic-gradient(from ${$}deg in ${X} decreasing hue, ${j})`}let Z=J.map(($)=>`${$.color} ${$.position??0}%`).join(", ");return`linear-gradient(90deg${Q}, ${Z})`}#E(){if(this.#z)return;let J=B.#J,Q=u("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},u("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),Z=G("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Q,Z),this.#B=Q,this.#X=Z,this.#z=!0}#T(){if(!this.#X)return;let J=this.#$();if(this.#B)this.#B.style.display=J?"":"none";let Q=J?(()=>{let{startDeg:$,sweepDeg:X}=this.#M();return this.#f($,X)})():this.#c(),Z=this.#q(Q);this.#X.style.setProperty("-webkit-mask-image",Z),this.#X.style.maskImage=Z,this.#X.style.background=this.#_()}}A("fig-interpolation-swatch",B);

package/dist/fig-lab.css

@@ -1 +1 @@
-fig-ai-prompt{--fig-ai-prompt-margin-inline:var(--spacer-3);box-sizing:border-box;width:calc(100% - var(--fig-ai-prompt-margin-inline) - var(--fig-ai-prompt-margin-inline));min-height:8rem;margin-inline:var(--fig-ai-prompt-margin-inline);border:1px solid var(--figma-color-border);border-radius:var(--radius-large);background:var(--figma-color-bg);color:var(--figma-color-text);flex-direction:column;display:flex;&:has(>fig-input-text:focus-within){outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&>fig-input-text{width:100%;min-width:0;box-shadow:none;font-size:var(--body-large-fontSize);background:0 0;border-radius:0;flex:auto;&:hover,&:has(textarea:focus){box-shadow:none;outline:0}&[disabled]:not([disabled=false]){box-shadow:none;background:0 0}&>textarea{box-sizing:border-box;width:100%;height:auto;min-height:var(--spacer-6);padding:var(--spacer-3);resize:none;font-size:inherit;align-self:stretch;padding-bottom:0}}&>fig-attachments{box-sizing:border-box;width:auto;margin:var(--spacer-2) var(--spacer-3) 0}&>fig-footer{box-shadow:none;border:none;justify-content:space-between}}fig-ai-context{--fig-ai-context-margin-inline:var(--spacer-3);gap:var(--spacer-2);box-sizing:border-box;width:calc(100% - var(--fig-ai-context-margin-inline) - var(--fig-ai-context-margin-inline));margin-inline:var(--fig-ai-context-margin-inline);padding:var(--spacer-2) var(--spacer-2-5);padding-bottom:var(--spacer-4);border:1px solid var(--figma-color-border);border-radius:var(--radius-large) var(--radius-large) 0 0;color:var(--figma-color-text);border-bottom:none;flex-direction:column;display:flex;&>fig-attachments{margin-inline:calc(-1 * var(--spacer-1))}}fig-attachments{align-items:flex-start;gap:var(--spacer-2);flex-wrap:wrap;width:100%;min-width:0;display:flex}fig-attachment{--fig-attachment-size:2.5rem;flex:0 0 var(--fig-attachment-size);width:var(--fig-attachment-size);height:var(--fig-attachment-size);min-width:0;display:block;position:relative;& fig-image{width:100%;display:flex}& .fig-attachment-fallback{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);color:var(--figma-color-text-secondary);font-size:var(--body-medium-fontSize);pointer-events:none;place-items:center;font-weight:500;line-height:1;display:none;position:absolute;inset:0}&[data-fallback]{& .fig-attachment-fallback{display:grid}}& .fig-attachment-remove{--spacer-2:0px;--spacer-4:1.25rem;z-index:3;top:var(--spacer-1);right:var(--spacer-1);opacity:0;pointer-events:none;width:1.25rem;min-width:1.25rem;height:1.25rem;padding:0;position:absolute}&:hover .fig-attachment-remove,&:focus-within .fig-attachment-remove{opacity:1;pointer-events:auto}&[disabled]:not([disabled=false]){opacity:.5;& .fig-attachment-remove{pointer-events:none}}}fig-chat-message{gap:var(--spacer-2-5);box-sizing:border-box;width:100%;max-width:100%;color:var(--figma-color-text);font-size:var(--body-large-fontSize);overflow-wrap:anywhere;white-space:pre-wrap;flex-direction:column;display:flex;&[from=user]{width:auto;padding:var(--spacer-2-5);border-radius:var(--radius-large);background:var(--figma-color-bg-secondary);margin-inline-start:var(--spacer-4)}&[from=user]:has(>fig-avatar){margin-inline-end:calc(var(--spacer-4) + var(--spacer-2));position:relative;&>fig-avatar{right:calc(-1 * (var(--spacer-4) + var(--spacer-2)));position:absolute;bottom:0}}&+fig-chat-message{margin-top:var(--spacer-3)}}fig-input-wheel{--fig-input-wheel-handle-drag-max:.5rem;--fig-input-wheel-handle-drag-offset:0px;--fig-input-wheel-handle-spring:.28s cubic-bezier(.34, 1.56, .64, 1);--fig-input-wheel-keyboard-handle-spring:.14s cubic-bezier(.34, 1.56, .64, 1);--fig-input-wheel-tick-width:.125rem;--fig-input-wheel-tick-width-min:1px;--fig-input-wheel-tick-height:calc(var(--fig-input-wheel-handle-height) - 4px);--fig-input-wheel-tick-height-min:8px;--fig-input-wheel-tick-fade:1rem;--fig-input-wheel-tick-opacity:.5;--fig-input-wheel-tick-opacity-min:.1;--fig-input-wheel-fast-tick-blur:2px;--fig-input-wheel-handle-width:var(--spacer-1);--fig-input-wheel-handle-height:calc(var(--control-height) - var(--spacer-2));--fig-input-wheel-handle-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));box-sizing:border-box;width:100%;height:var(--control-height);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);cursor:ew-resize;outline:none;display:block;position:relative;&:focus-visible{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.5}& .fig-input-wheel-svg{width:calc(100% - var(--spacer-3));height:100%;margin-inline:var(--spacer-2);color:var(--figma-color-icon-tertiary);mask-image:linear-gradient(to right, rgb(0 0 0/var(--fig-input-wheel-tick-opacity-min)) 0, rgb(0 0 0/var(--fig-input-wheel-tick-opacity)) var(--fig-input-wheel-tick-fade), rgb(0 0 0/var(--fig-input-wheel-tick-opacity)) calc(100% - var(--fig-input-wheel-tick-fade)), rgb(0 0 0/var(--fig-input-wheel-tick-opacity-min)) 100%);display:block;overflow:visible}& .fig-input-wheel-tick{fill:currentColor;stroke:none;transition:filter .12s ease-out}& .fig-input-wheel-handle{z-index:1;width:var(--fig-input-wheel-handle-width);height:var(--fig-input-wheel-handle-height);border-radius:calc(var(--fig-input-wheel-handle-width) / 2);pointer-events:none;transform:translate(calc(-50% + var(--fig-input-wheel-handle-drag-offset)), -50%);transition:transform var(--fig-input-wheel-handle-spring);box-shadow:inset 0 0 0 var(--fig-input-wheel-handle-height) var(--fig-input-wheel-handle-color);background:0 0;position:absolute;top:50%;left:50%}&[data-fig-input-wheel-active] .fig-input-wheel-handle{transition:none}&[data-fig-input-wheel-fast] .fig-input-wheel-tick{filter:blur(var(--fig-input-wheel-fast-tick-blur));transition:none}&[data-fig-input-wheel-keyboard-moving] .fig-input-wheel-handle{transition:none}&[data-fig-input-wheel-keyboard-settling] .fig-input-wheel-handle{transition:transform var(--fig-input-wheel-keyboard-handle-spring)}}body.fig-input-wheel-dragging,body.fig-input-wheel-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}@media (prefers-reduced-motion:reduce){fig-input-wheel .fig-input-wheel-tick,fig-input-wheel .fig-input-wheel-handle{transition:none}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}body.fig-lab-rotate-active,body.fig-lab-rotate-active *{cursor:var(--fig-lab-cursor-rotate)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff0;--fig-canvas-control-stroke-halo:var(--fig-canvas-control-radius-stroke-halo);--fig-canvas-control-stroke-halo-hover:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover,.fig-canvas-control-angle-line-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover);--fig-canvas-control-stroke-halo:var(--fig-canvas-control-stroke-halo-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle{&[type=color]{--width:.75rem;--height:.75rem;--fig-handle-padding:1px;--fig-handle-shadow:none;&:hover,&:focus-within,&[selected]:not([selected=false]){--width:1rem;--height:1rem;--fig-handle-outline-color:transparent}&.dragging,&:active{--fig-handle-padding:2px!important}&[selected]:not([selected=false]){--fig-handle-padding:2px}}}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}fig-reorder{display:contents}fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item],fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header *,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>label{cursor:grab}fig-reorder>.dragging{background-color:var(--figma-color-bg-selected)}[data-reorder-handle]{cursor:grab}fig-reorder[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}body.fig-reorder-dragging,body.fig-reorder-dragging *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.fig-reorder-indicator{pointer-events:none;z-index:1000000;background:var(--figma-color-border-strong);position:fixed}.fig-reorder-indicator[data-axis=vertical]{height:2px}.fig-reorder-indicator[data-axis=horizontal]{width:2px}
+fig-ai-prompt{--fig-ai-prompt-margin-inline:var(--spacer-3);box-sizing:border-box;width:calc(100% - var(--fig-ai-prompt-margin-inline) - var(--fig-ai-prompt-margin-inline));min-height:8rem;margin-inline:var(--fig-ai-prompt-margin-inline);border:1px solid var(--figma-color-border);border-radius:var(--radius-large);background:var(--figma-color-bg);color:var(--figma-color-text);flex-direction:column;display:flex;&:has(>fig-input-text:focus-within){outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&>fig-input-text{width:100%;min-width:0;box-shadow:none;font-size:var(--body-large-fontSize);background:0 0;border-radius:0;flex:auto;&:hover,&:has(textarea:focus){box-shadow:none;outline:0}&[disabled]:not([disabled=false]){box-shadow:none;background:0 0}&>textarea{box-sizing:border-box;width:100%;height:auto;min-height:var(--spacer-6);padding:var(--spacer-3);resize:none;font-size:inherit;align-self:stretch;padding-bottom:0}}&>fig-attachments{box-sizing:border-box;width:auto;margin:var(--spacer-2) var(--spacer-3) 0}&>fig-footer{box-shadow:none;border:none;justify-content:space-between}}fig-ai-context{--fig-ai-context-margin-inline:var(--spacer-3);gap:var(--spacer-2);box-sizing:border-box;width:calc(100% - var(--fig-ai-context-margin-inline) - var(--fig-ai-context-margin-inline));margin-inline:var(--fig-ai-context-margin-inline);padding:var(--spacer-2) var(--spacer-2-5);padding-bottom:var(--spacer-4);border:1px solid var(--figma-color-border);border-radius:var(--radius-large) var(--radius-large) 0 0;color:var(--figma-color-text);border-bottom:none;flex-direction:column;display:flex;&>fig-attachments{margin-inline:calc(-1 * var(--spacer-1))}}fig-ai-context:has(+fig-ai-prompt){margin-bottom:calc(-1 * var(--spacer-3))}fig-attachments{align-items:flex-start;gap:var(--spacer-2);flex-wrap:wrap;width:100%;min-width:0;display:flex}fig-attachment{--fig-attachment-size:2.5rem;flex:0 0 var(--fig-attachment-size);width:var(--fig-attachment-size);height:var(--fig-attachment-size);min-width:0;display:block;position:relative;& fig-image{width:100%;display:flex}& .fig-attachment-fallback{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);color:var(--figma-color-text-secondary);font-size:var(--body-medium-fontSize);pointer-events:none;place-items:center;font-weight:500;line-height:1;display:none;position:absolute;inset:0}&[data-fallback]{& .fig-attachment-fallback{display:grid}}& .fig-attachment-remove{--spacer-2:0px;--spacer-4:1.25rem;z-index:3;top:var(--spacer-1);right:var(--spacer-1);opacity:0;pointer-events:none;width:1.25rem;min-width:1.25rem;height:1.25rem;padding:0;position:absolute}&:hover .fig-attachment-remove,&:focus-within .fig-attachment-remove{opacity:1;pointer-events:auto}&[disabled]:not([disabled=false]){opacity:.5;& .fig-attachment-remove{pointer-events:none}}}fig-chat-message{gap:var(--spacer-2-5);box-sizing:border-box;width:100%;max-width:100%;color:var(--figma-color-text);font-size:var(--body-large-fontSize);overflow-wrap:anywhere;white-space:pre-wrap;flex-direction:column;display:flex;&[from=user]{width:auto;padding:var(--spacer-2-5);border-radius:var(--radius-large);background:var(--figma-color-bg-secondary);margin-inline-start:var(--spacer-4)}&[from=user]:has(>fig-avatar){margin-inline-end:calc(var(--spacer-4) + var(--spacer-2));position:relative;&>fig-avatar{right:calc(-1 * (var(--spacer-4) + var(--spacer-2)));position:absolute;bottom:0}}&+fig-chat-message{margin-top:var(--spacer-3)}}fig-input-wheel{--fig-input-wheel-handle-drag-max:.5rem;--fig-input-wheel-handle-drag-offset:0px;--fig-input-wheel-handle-spring:.28s cubic-bezier(.34, 1.56, .64, 1);--fig-input-wheel-keyboard-handle-spring:.14s cubic-bezier(.34, 1.56, .64, 1);--fig-input-wheel-tick-width:.125rem;--fig-input-wheel-tick-width-min:1px;--fig-input-wheel-tick-height:calc(var(--fig-input-wheel-handle-height) - 4px);--fig-input-wheel-tick-height-min:8px;--fig-input-wheel-tick-fade:1rem;--fig-input-wheel-tick-opacity:.5;--fig-input-wheel-tick-opacity-min:.1;--fig-input-wheel-fast-tick-blur:2px;--fig-input-wheel-handle-width:var(--spacer-1);--fig-input-wheel-handle-height:calc(var(--control-height) - var(--spacer-2));--fig-input-wheel-handle-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));box-sizing:border-box;width:100%;height:var(--control-height);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);cursor:ew-resize;outline:none;display:block;position:relative;&:focus-visible{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.5}& .fig-input-wheel-svg{width:calc(100% - var(--spacer-3));height:100%;margin-inline:var(--spacer-2);color:var(--figma-color-icon-tertiary);mask-image:linear-gradient(to right, rgb(0 0 0/var(--fig-input-wheel-tick-opacity-min)) 0, rgb(0 0 0/var(--fig-input-wheel-tick-opacity)) var(--fig-input-wheel-tick-fade), rgb(0 0 0/var(--fig-input-wheel-tick-opacity)) calc(100% - var(--fig-input-wheel-tick-fade)), rgb(0 0 0/var(--fig-input-wheel-tick-opacity-min)) 100%);display:block;overflow:visible}& .fig-input-wheel-tick{fill:currentColor;stroke:none;transition:filter .12s ease-out}& .fig-input-wheel-handle{z-index:1;width:var(--fig-input-wheel-handle-width);height:var(--fig-input-wheel-handle-height);border-radius:calc(var(--fig-input-wheel-handle-width) / 2);pointer-events:none;transform:translate(calc(-50% + var(--fig-input-wheel-handle-drag-offset)), -50%);transition:transform var(--fig-input-wheel-handle-spring);box-shadow:inset 0 0 0 var(--fig-input-wheel-handle-height) var(--fig-input-wheel-handle-color);background:0 0;position:absolute;top:50%;left:50%}&[data-fig-input-wheel-active] .fig-input-wheel-handle{transition:none}&[data-fig-input-wheel-fast] .fig-input-wheel-tick{filter:blur(var(--fig-input-wheel-fast-tick-blur));transition:none}&[data-fig-input-wheel-keyboard-moving] .fig-input-wheel-handle{transition:none}&[data-fig-input-wheel-keyboard-settling] .fig-input-wheel-handle{transition:transform var(--fig-input-wheel-keyboard-handle-spring)}}body.fig-input-wheel-dragging,body.fig-input-wheel-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}@media (prefers-reduced-motion:reduce){fig-input-wheel .fig-input-wheel-tick,fig-input-wheel .fig-input-wheel-handle{transition:none}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}body.fig-lab-rotate-active,body.fig-lab-rotate-active *{cursor:var(--fig-lab-cursor-rotate)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff0;--fig-canvas-control-stroke-halo:var(--fig-canvas-control-radius-stroke-halo);--fig-canvas-control-stroke-halo-hover:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover,.fig-canvas-control-angle-line-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover);--fig-canvas-control-stroke-halo:var(--fig-canvas-control-stroke-halo-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle{&[type=color]{--width:.75rem;--height:.75rem;--fig-handle-padding:1px;--fig-handle-shadow:none;&:hover,&:focus-within,&[selected]:not([selected=false]){--width:1rem;--height:1rem;--fig-handle-outline-color:transparent}&.dragging,&:active{--fig-handle-padding:2px!important}&[selected]:not([selected=false]){--fig-handle-padding:2px}}}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}fig-reorder{display:contents}fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item],fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header *,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>label{cursor:grab}fig-reorder>.dragging{background-color:var(--figma-color-bg-selected)}[data-reorder-handle]{cursor:grab}fig-reorder[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}body.fig-reorder-dragging,body.fig-reorder-dragging *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.fig-reorder-indicator{pointer-events:none;z-index:1000000;background:var(--figma-color-border-strong);position:fixed}.fig-reorder-indicator[data-axis=vertical]{height:2px}.fig-reorder-indicator[data-axis=horizontal]{width:2px}

package/fig-editor.js

@@ -950,7 +950,7 @@ class FigSelect extends HTMLElement {
     return { top: 8, right: 8, bottom: 8, left: 8 };
   }
 
-  #resolveMenuAnchor() {
+  #resolveExplicitMenuAnchor() {
     if (this.#menuAnchorRef?.isConnected) return this.#menuAnchorRef;
 
     const selector = this.getAttribute("menu-anchor");
@@ -977,26 +977,34 @@ class FigSelect extends HTMLElement {
       } catch {}
     }
 
-    return this.#button;
+    return null;
+  }
+
+  #resolveMenuAnchor() {
+    return this.#resolveExplicitMenuAnchor() || this.#button;
+  }
+
+  #hasMenuAnchor() {
+    return Boolean(this.#resolveExplicitMenuAnchor());
+  }
+
+  #usesMenuAnchorOverlayGeometry() {
+    return !this.#usesExplicitPosition() && this.#hasMenuAnchor();
   }
 
   #syncMenuAnchor() {
     if (!this.#popup) return;
     this.#popup.anchor = this.#resolveMenuAnchor();
+    this.#syncPopupWidth();
     if (!this.open) return;
     this.#freezeMenuPosition = false;
     this.#frozenLabelRect = null;
     this.#frozenViewport = null;
+    this.#popup.setupObservers?.();
     this.#popup.queueReposition?.();
   }
 
   #getTriggerAlignmentRect() {
-    const menuAnchor = this.#resolveMenuAnchor();
-    if (menuAnchor && menuAnchor !== this.#button) {
-      const anchorRect = menuAnchor.getBoundingClientRect();
-      if (anchorRect?.width && anchorRect?.height) return anchorRect;
-    }
-
     const labelRect = this.#labelEl?.getBoundingClientRect();
     if (labelRect?.width && labelRect?.height) return labelRect;
     const customTriggerRect = this.querySelector(
@@ -1009,7 +1017,11 @@ class FigSelect extends HTMLElement {
   }
 
   #readLabelRectSnapshot() {
-    const rect = this.#getTriggerAlignmentRect();
+    const anchor = this.#usesMenuAnchorOverlayGeometry()
+      ? this.#resolveExplicitMenuAnchor()
+      : null;
+    const rect = anchor?.getBoundingClientRect() ??
+      this.#getTriggerAlignmentRect();
     if (!rect) return null;
     return {
       x: rect.x,
@@ -1089,7 +1101,9 @@ class FigSelect extends HTMLElement {
       this.#freezeMenuPosition = false;
       this.#frozenLabelRect = null;
       this.#frozenViewport = null;
+      this.#syncPopupWidth();
       this.#clearOverlayPositionStyles();
+      if (this.#positionExplicitMenuAnchor()) return;
       this.#originalPositionPopup?.();
       this.#clampMenuToViewport();
       return;
@@ -1097,6 +1111,47 @@ class FigSelect extends HTMLElement {
     this.#positionPopupOverSelected();
   }
 
+  #positionExplicitMenuAnchor() {
+    const popup = this.#popup;
+    const menuAnchor = this.#resolveExplicitMenuAnchor();
+    if (
+      !popup ||
+      !menuAnchor ||
+      typeof popup.parsePosition !== "function" ||
+      typeof popup.parseOffset !== "function" ||
+      typeof popup.computeCoords !== "function"
+    ) {
+      return false;
+    }
+
+    const popupRect = popup.getBoundingClientRect();
+    const anchorRect = menuAnchor.getBoundingClientRect();
+    if (!popupRect.width || !popupRect.height) return false;
+    const { vertical, horizontal, shorthand } = popup.parsePosition();
+    const offset = popup.parseOffset();
+    let { left, top } = popup.computeCoords(
+      anchorRect,
+      popupRect,
+      vertical,
+      horizontal,
+      offset,
+      shorthand,
+    );
+    const margins = this.#getViewportMargins();
+    if (typeof popup.clampToViewport === "function") {
+      ({ left, top } = popup.clampToViewport(
+        { left, top },
+        popupRect,
+        margins,
+      ));
+    }
+    popup.style.setProperty("right", "auto", "important");
+    popup.style.setProperty("bottom", "auto", "important");
+    popup.style.setProperty("left", `${Math.round(left)}px`, "important");
+    popup.style.setProperty("top", `${Math.round(top)}px`, "important");
+    return true;
+  }
+
   #clampMenuToViewport() {
     const popup = this.#popup;
     if (!popup || typeof popup.clampToViewport !== "function") return;
@@ -1138,30 +1193,46 @@ class FigSelect extends HTMLElement {
       return;
     }
 
+    const menuAnchor = this.#usesMenuAnchorOverlayGeometry()
+      ? this.#resolveExplicitMenuAnchor()
+      : null;
+    if (menuAnchor) this.#syncPopupWidth();
+
     // Lay out with the default positioning first so option metrics are valid.
     this.#originalPositionPopup?.();
 
     const popupRect = popup.getBoundingClientRect();
-    const labelRect = this.#getTriggerAlignmentRect();
-    const optionTextRect = this.#getOptionTextRect(selected);
-    if (
-      !popupRect.width ||
-      !popupRect.height ||
-      !labelRect.width ||
-      !optionTextRect
-    ) {
+    const selectedOptionRect = selected.getBoundingClientRect();
+    if (!popupRect.width || !popupRect.height || !selectedOptionRect.height) {
       return;
     }
 
-    const selectedOffsetX = optionTextRect.left - popupRect.left;
-    const selectedOffsetY = optionTextRect.top - popupRect.top;
-    const full = figEditorBooleanAttribute(this, "full");
-    // [full]: pin menu to host width/edges. Otherwise overlay selected
-    // option text on the trigger label (blend-mode style).
-    let left = full
-      ? this.getBoundingClientRect().left
-      : labelRect.left - selectedOffsetX;
-    let top = labelRect.top - selectedOffsetY;
+    let left;
+    let top;
+    let alignmentRect;
+    if (menuAnchor) {
+      const anchorRect = menuAnchor.getBoundingClientRect();
+      alignmentRect = anchorRect;
+      left = anchorRect.left + (anchorRect.width - popupRect.width) / 2;
+      top =
+        anchorRect.top +
+        (anchorRect.height - selectedOptionRect.height) / 2 -
+        (selectedOptionRect.top - popupRect.top);
+    } else {
+      const labelRect = this.#getTriggerAlignmentRect();
+      const optionTextRect = this.#getOptionTextRect(selected);
+      if (!labelRect?.width || !optionTextRect) return;
+      alignmentRect = labelRect;
+      const selectedOffsetX = optionTextRect.left - popupRect.left;
+      const selectedOffsetY = optionTextRect.top - popupRect.top;
+      const full = figEditorBooleanAttribute(this, "full");
+      // [full]: pin menu to host width/edges. Otherwise overlay selected
+      // option text on the trigger label (blend-mode style).
+      left = full
+        ? this.getBoundingClientRect().left
+        : labelRect.left - selectedOffsetX;
+      top = labelRect.top - selectedOffsetY;
+    }
 
     // Keep the whole menu in-view when aligning over the selected option
     // would otherwise push it past a viewport edge (corners / far sides).
@@ -1184,15 +1255,24 @@ class FigSelect extends HTMLElement {
     popup.style.setProperty("left", `${Math.round(left)}px`, "important");
     popup.style.setProperty("top", `${Math.round(top)}px`, "important");
 
-    // Nudge the panel scroller so the selected label stays over the trigger.
+    // If the panel scrolls, keep the selected row centered over a menu anchor.
+    // Standard selects retain text-to-trigger alignment.
     const panel = this.#getPanel();
-    const alignedTextRect = this.#getOptionTextRect(selected);
+    const alignedOptionRect = selected.getBoundingClientRect();
+    const alignedTextRect = menuAnchor
+      ? null
+      : this.#getOptionTextRect(selected);
     if (
-      alignedTextRect &&
       panel &&
       panel.scrollHeight > panel.clientHeight + 1
     ) {
-      const deltaY = alignedTextRect.top - labelRect.top;
+      const deltaY = menuAnchor
+        ? alignedOptionRect.top +
+          alignedOptionRect.height / 2 -
+          (alignmentRect.top + alignmentRect.height / 2)
+        : alignedTextRect
+          ? alignedTextRect.top - alignmentRect.top
+          : 0;
       if (Math.abs(deltaY) > 0.5) {
         panel.scrollTop += deltaY;
       }
@@ -1674,6 +1754,9 @@ class FigSelect extends HTMLElement {
     const hostWidth = Math.ceil(this.getBoundingClientRect().width);
     const triggerWidth = Math.ceil(this.#button.getBoundingClientRect().width);
     const anchorWidth = Math.max(hostWidth, triggerWidth, 96);
+    const menuAnchor = this.#hasMenuAnchor()
+      ? this.#resolveExplicitMenuAnchor()
+      : null;
 
     // Use !important — fig-select::part(listbox) width rules beat element.style.
     // Menus size to their options while remaining at least as wide as the trigger.
@@ -1690,21 +1773,40 @@ class FigSelect extends HTMLElement {
     this.#popup.style.setProperty("padding", "0", "important");
     this.#popup.style.setProperty("border", "0", "important");
     this.#popup.style.setProperty("margin", "0", "important");
-    this.#popup.style.setProperty(
-      "width",
-      `min(max-content, ${maxWidth}px)`,
-      "important",
-    );
-    this.#popup.style.setProperty("min-width", `${anchorWidth}px`, "important");
-    this.#popup.style.setProperty("max-width", `${maxWidth}px`, "important");
+    if (menuAnchor) {
+      const requestedWidth = menuAnchor.getBoundingClientRect().width;
+      // Match a normal anchor exactly. If that would make the menu narrower
+      // than its usable trigger/content width, keep the wider menu. Default
+      // overlay centers it; explicit position applies its requested alignment.
+      this.#popup.style.setProperty("width", "max-content", "important");
+      this.#popup.style.setProperty("min-width", "0", "important");
+      this.#popup.style.setProperty("max-width", `${maxWidth}px`, "important");
+      const intrinsicWidth = this.#popup.getBoundingClientRect().width;
+      const minimumWidth = Math.min(
+        maxWidth,
+        Math.max(anchorWidth, intrinsicWidth),
+      );
+      const width = Math.max(requestedWidth, minimumWidth);
+      this.#popup.style.setProperty("width", `${width}px`, "important");
+      this.#popup.style.setProperty("min-width", `${width}px`, "important");
+      this.#popup.style.setProperty("max-width", `${width}px`, "important");
+    } else {
+      this.#popup.style.setProperty(
+        "width",
+        "max-content",
+        "important",
+      );
+      this.#popup.style.setProperty("min-width", `${anchorWidth}px`, "important");
+      this.#popup.style.setProperty("max-width", `${maxWidth}px`, "important");
+    }
     this.#popup.style.setProperty("max-height", `${maxHeight}px`, "important");
-    this.#popup.style.setProperty("height", "auto", "important");
+    this.#popup.style.setProperty("height", "max-content", "important");
     this.#popup.style.setProperty("overflow", "hidden", "important");
     const used = this.#popup.getBoundingClientRect();
     if (used.height > maxHeight) {
       this.#popup.style.setProperty("height", `${maxHeight}px`, "important");
     }
-    if (used.width > maxWidth) {
+    if (!menuAnchor && used.width > maxWidth) {
       this.#popup.style.setProperty("width", `${maxWidth}px`, "important");
     }
   }

package/fig-lab.css

@@ -101,6 +101,10 @@ fig-ai-context {
   }
 }
 
+fig-ai-context:has(+ fig-ai-prompt) {
+  margin-bottom: calc(-1 * var(--spacer-3));
+}
+
 fig-attachments {
   display: flex;
   flex-wrap: wrap;

package/package.json

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