@rogieking/figui3 11.6.2 → 11.6.4

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.6.4]
+
+### Fixed
+
+- Remapped gradient stop positions to their new ordered slots when reordering stops.
+
+## [11.6.3]
+
+### Added
+
+- Added keyboard selection and deletion for palette colors and gradient stops.
+
+### Fixed
+
+- Preserved normal Delete and Backspace editing inside color and position inputs.
+- Supported macOS Backspace deletion while respecting minimum, fixed, and disabled editor constraints.
+
 ## [11.6.2]
 
 ### Added

package/dist/fig-editor.js

@@ -1,6 +1,6 @@
-import"./fig.js";import"./fig-property.js";import{figConvertRGB as i,figHexToRGB as t,figHslToRGB as r,figHsvToRGB as _J,figOklabToOklch as LJ,figOklabToRGB as HJ,figOklchToRGB as OJ,figRGBToHsl as e,figRGBToHsv as MJ,figRGBToOklab as JJ,figRGBToOklch as VJ}from"./fig-color.js";import"./fig.js";import"./fig-property.js";import{figConvertRGB as KJ,figHexToRGB as jJ}from"./fig-color.js";var y={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};function N(J,Z={},$=[]){let X=document.createElement(J);for(let[Q,W]of Object.entries(Z)){if(W===null||W===void 0||W===!1)continue;if(Q==="className")X.className=String(W);else if(W===!0)X.setAttribute(Q,"");else X.setAttribute(Q,String(W))}let Y=Array.isArray($)?$:[$];for(let Q of Y){if(Q===null||Q===void 0||Q===!1)continue;X.append(Q instanceof Node?Q:String(Q))}return X}function s(J){return N("fig-icon",{name:J})}function UJ(J,Z){return{position:Number.isFinite(Number(J?.position))?Math.max(0,Math.min(100,Number(J.position))):Z*100,color:g(J?.color),opacity:Number.isFinite(Number(J?.opacity))?Math.max(0,Math.min(100,Number(J.opacity))):100}}function g(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);return/^[0-9A-Fa-f]{6}$/.test(Z)?`#${Z.toUpperCase()}`:"#888888"}function d(J,Z){return Number(J?.position)===Number(Z?.position)&&g(J?.color)===g(Z?.color)&&Number(J?.opacity??100)===Number(Z?.opacity??100)}function m(J){if(Array.isArray(J))return J.map(m);if(!J||typeof J!=="object")return J;return Object.fromEntries(Object.keys(J).filter((Z)=>J[Z]!==void 0).sort().map((Z)=>[Z,m(J[Z])]))}function h(J,Z){return!!J&&!!Z&&JSON.stringify(m(J))===JSON.stringify(m(Z))}function b(J){return J.map((Z)=>({...Z}))}function qJ(J,Z){let $=J.length,X=Z.length,Y=Array.from({length:$+1},()=>Array(X+1).fill(0));for(let j=$-1;j>=0;j-=1)for(let U=X-1;U>=0;U-=1)Y[j][U]=d(J[j],Z[U])?Y[j+1][U+1]+1:Math.max(Y[j+1][U],Y[j][U+1]);let Q=[],W=0,K=0;while(W<$&&K<X)if(d(J[W],Z[K]))Q.push([W,K]),W+=1,K+=1;else if(Y[W+1][K]>=Y[W][K+1])W+=1;else K+=1;return Q}function E(J){let Z=J;if(typeof Z==="string")try{Z=JSON.parse(Z)}catch{Z={}}if(Z?.type==="gradient"&&Z.gradient)Z=Z.gradient;let $=Z&&typeof Z==="object"?Z:{},X=Array.isArray($.stops)?$.stops.map(UJ):y.stops.map((Y)=>({...Y}));return{...y,...$,type:["linear","radial","angular"].includes($.type)?$.type:"linear",angle:Number.isFinite(Number($.angle))?Number($.angle):y.angle,centerX:Number.isFinite(Number($.centerX))?Number($.centerX):y.centerX,centerY:Number.isFinite(Number($.centerY))?Number($.centerY):y.centerY,interpolationSpace:"srgb",stops:X.length>=2?X:y.stops.map((Y)=>({...Y}))}}function zJ(J,Z,$){let{r:X,g:Y,b:Q}=jJ(J);if($==="display-p3"){let W=KJ(X,Y,Q,{from:"srgb",to:"display-p3"});return`color(display-p3 ${+(W.r/255).toFixed(4)} ${+(W.g/255).toFixed(4)} ${+(W.b/255).toFixed(4)} / ${Z})`}return`rgba(${X}, ${Y}, ${Q}, ${Z})`}function v(J,{colorSpace:Z="srgb"}={}){let $=E(J),X=$.stops.map((Y)=>`${zJ(Y.color,(Y.opacity??100)/100,Z)} ${Y.position}%`).join(", ");switch($.type){case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%, ${X})`;case"angular":return`conic-gradient(from ${$.angle}deg, ${X})`;default:return`linear-gradient(${$.angle}deg, ${X})`}}class l extends HTMLElement{#Z=E();#X=!1;#K=!1;#U=null;#J=!1;#V=null;#q=null;#j=null;#L=null;#W=null;#_=null;#$=[];#z=[];#Y=null;#Q=!1;#k=null;static get observedAttributes(){return["value","color-space","disabled","overflow","show-rows"]}get value(){return structuredClone(this.#Z)}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??{}))}get cssValue(){return v(this.#Z,{colorSpace:this.getAttribute("color-space")||"srgb"})}get pickerAnchor(){return this.#U}set pickerAnchor(J){this.#U=J instanceof Element?J:null,this.#_J()}connectedCallback(){let J=E(this.getAttribute("value"));if(!h(this.#Z,J))this.#Z=J;this.#P(),this.#b()}attributeChangedCallback(J,Z,$){if(Z===$||this.#X)return;if(J==="value"){let X=E($);if(h(this.#Z,X)){if(this.#Q)this.#k=null;return}if(this.#Q){this.#k=X;return}this.#k=null,this.#Z=X}if(this.isConnected&&this.#J)this.#b()}disconnectedCallback(){if(this.#zJ({reconcile:!1}),this.#k)this.#Z=this.#k,this.#k=null,this.#E()}refreshLayout(){this.#q?.refreshLayout?.()}#F(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#O(){return this.getAttribute("overflow")==="visible"?"visible":"fade"}#M(){let J=Number(this.getAttribute("show-rows"));return Number.isFinite(J)&&J>0?J:null}#E(){this.#X=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#X=!1}#G(){return{type:"gradient",gradient:this.value,css:this.cssValue}}#N(J){this.#E(),this.dispatchEvent(new CustomEvent(J,{bubbles:!0,composed:!0,detail:this.#G()}))}#P(){if(this.#J)return;this.#V=N("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",variant:"ghost"},N("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([W,K])=>N("fig-select-option",{value:W},K))));let J=(W,K,j)=>{let U=N("fig-button",{icon:!0,variant:"ghost",className:K,"aria-label":W},s(j));return{button:U,tooltip:N("fig-tooltip",{text:W},U)}},Z=J("Flip gradient","fig-fill-picker-gradient-flip","swap"),$=J("Rotate gradient","fig-fill-picker-gradient-rotate","rotate");this.#L=Z.button,this.#W=$.button;let X=N("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[this.#V,N("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[Z.tooltip,$.tooltip])]);this.#q=N("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large"});let Y=N("fig-preview",{className:"fig-fill-picker-gradient-preview"},this.#q);this.#_=N("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},s("add")),this.#j=document.createElement("fig-reorder");let Q=N("div",{className:"fig-fill-picker-gradient-stops"},[N("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[N("h3",{},"Stops"),this.#_]),N("div",{className:"fig-fill-picker-gradient-stops-list"},this.#j)]);this.replaceChildren(X,Y,Q),this.#V.addEventListener("change",this.#i),this.#V.addEventListener("optionhover",(W)=>W.stopPropagation()),this.#W.addEventListener("click",this.#g),this.#L.addEventListener("click",this.#C),this.#_.addEventListener("click",this.#t),this.#q.addEventListener("input",this.#m),this.#q.addEventListener("change",this.#m),this.#q.addEventListener("pointerdown",this.#e),this.#q.addEventListener("focusin",this.#e),this.#q.addEventListener("click",this.#e),this.#j.addEventListener("reorder",this.#d),this.addEventListener("pointerdown",this.#JJ,!0),this.addEventListener("lostpointercapture",this.#u,!0),this.#J=!0}#T(J){if((J.opacity??100)>=100)return J.color;return`${J.color}${Math.round((J.opacity??100)/100*255).toString(16).padStart(2,"0")}`}#f(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=this.#Z.stops[Number(J.dataset.index)]??{},Y=Number(Z?.value??Z?.getAttribute("value")??0),Q=$?.hexOpaque||(typeof $?.value==="string"?$.value:"")||$?.getAttribute("value");return{position:Number.isFinite(Y)?Math.max(0,Math.min(100,Y)):0,color:g(String(Q||X.color).slice(0,7)),opacity:$?.rgba?.a!==void 0?Math.round($.rgba.a*100):X.opacity??100}}#D(J){let Z=this.#$.indexOf(J);if(!Number.isInteger(Z)||!this.#Z.stops[Z])return;this.#Z.stops[Z]={...this.#Z.stops[Z],...this.#f(J)}}#S(){this.#$.forEach((J)=>this.#D(J))}#c(){let J=N("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",units:"%"}),Z=N("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right"}),$=N("fig-property",{className:"fig-fill-picker-gradient-stop-row",leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},N("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[J,Z]));J.addEventListener("input",(X)=>{X.stopPropagation(),this.#l($,"input")}),J.addEventListener("change",(X)=>{X.stopPropagation(),this.#l($,"change")});for(let X of["input","change"])Z.addEventListener(X,(Y)=>{Y.stopPropagation(),this.#l($,X)});return $.addEventListener("remove",(X)=>{X.stopPropagation(),this.#r($)}),$.addEventListener("pointerdown",(X)=>{if(X.button===0)this.#A($)}),$.addEventListener("click",()=>this.#A($)),$.addEventListener("focusin",()=>this.#A($)),$}#A(J){if(!J||!this.#$.includes(J))return;this.#Y=J,this.#$.forEach((Z)=>{Z.toggleAttribute("selected",Z===J)}),this.#y(),J.scrollIntoView({block:"nearest"})}#y(){let J=this.#$.indexOf(this.#Y);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)").forEach((Z,$)=>{if($===J)Z.select?.();else Z.deselect?.()})}#x(){if(!this.#j)return;let J=this.#Z.stops,Z=this.#$.filter((Y)=>Y.isConnected),$;if(Z.length===J.length)$=[...Z];else{$=Array(J.length).fill(null);let Y=qJ(this.#z,J),Q=new Set;for(let[j,U]of Y){let L=Z[j];if(!L)continue;$[U]=L,Q.add(j)}let W=Z.filter((j,U)=>!Q.has(U));$=$.map((j)=>j??W.shift()??this.#c());let K=new Set($);Z.forEach((j)=>{if(!K.has(j))j.remove()})}let X=this.#j.firstElementChild;for(let Y of $)if(Y===X)X=X.nextElementSibling;else this.#j.insertBefore(Y,X);if(this.#$=$,this.#$.forEach((Y,Q)=>{this.#h(Y,J[Q],Q)}),!this.#$.includes(this.#Y))this.#Y=this.#$[0]??null;this.#$.forEach((Y)=>{Y.toggleAttribute("selected",Y===this.#Y)}),this.#y(),this.#z=b(J),this.#_J()}#h(J,Z,$){let X=this.#F();J.dataset.index=String($);let Y=J.querySelector(".fig-fill-picker-stop-position"),Q=J.querySelector(".fig-fill-picker-stop-color");this.#s(Y,Z.position),this.#s(Q,this.#T(Z)),Y?.toggleAttribute("disabled",X),Q?.toggleAttribute("disabled",X);let W=J.querySelector(':scope > [data-fig-property-action="remove"]');if(W)W.classList.add("fig-fill-picker-stop-remove"),W.setAttribute("aria-label","Remove gradient stop"),W.toggleAttribute("disabled",X||this.#Z.stops.length<=2)}#s(J,Z){if(!J)return;let $=String(Z);if(J.getAttribute("value")===$)return;let X=J.contains(document.activeElement)?document.activeElement:null,Y=X&&"selectionStart"in X&&typeof X.selectionStart==="number"?{start:X.selectionStart,end:X.selectionEnd,direction:X.selectionDirection}:null;if(J.setAttribute("value",$),Y&&X===document.activeElement)try{X.setSelectionRange(Y.start,Y.end,Y.direction)}catch{}}#b(){if(!this.#J)return;let J=this.#F(),Z=this.#O()==="fade";this.#j.classList.toggle("fig-overflow-fade",Z);let $=this.#M();if($===null)this.#j.style.removeProperty("--fig-gradient-editor-overflow-show-rows");else this.#j.style.setProperty("--fig-gradient-editor-overflow-show-rows",String($));this.#s(this.#V,this.#Z.type),this.#V.toggleAttribute("disabled",J),this.#L.toggleAttribute("disabled",J),this.#W.toggleAttribute("disabled",J),this.#_.toggleAttribute("disabled",J),this.#j.toggleAttribute("disabled",J),this.#q.toggleAttribute("disabled",J);let X=E(this.#q.value);if(!h(X,this.#Z))this.#K=!0,this.#q.value={type:"gradient",gradient:this.#Z},this.#K=!1;this.#x()}#R(J,Z,{focusIndex:$=null}={}){let X=E(J),Y=!h(this.#Z,X);if(Y)this.#Z=X,this.#b();if(Z==="change"||Y)this.#N(Z);if($!==null)this.#w($)}#w(J){requestAnimationFrame(()=>{if(!this.isConnected)return;let Z=this.querySelector(`.fig-fill-picker-gradient-stop-row[data-index="${J}"]`),$=Z?.querySelector(".fig-fill-picker-stop-color fig-input-text input");this.#A(Z),$?.focus(),$?.select()})}#i=(J)=>{J.stopPropagation();let Z=typeof J.detail==="string"?J.detail:J.target?.value;if(!["linear","radial","angular"].includes(Z))return;this.#R({...this.#Z,type:Z},"input")};#g=()=>{this.#R({...this.#Z,angle:(Number(this.#Z.angle)+90)%360},"input")};#C=()=>{let J=this.#Z.stops.map((Z)=>({...Z,position:100-Z.position})).sort((Z,$)=>Z.position-$.position);this.#R({...this.#Z,stops:J},"input")};#t=()=>{let J=b(this.#Z.stops),Z=Math.max(0,this.#$.indexOf(this.#Y)),$=Number(J[Z]?.position)||0,X=Number(J[Z+1]?.position??$),Y={position:($+X)/2,color:"#888888",opacity:100},Q=Z+1;J.splice(Q,0,Y),this.#R({...this.#Z,stops:J},"input",{focusIndex:Q})};#m=(J)=>{if(J.stopPropagation(),this.#K||!J.detail?.gradient)return;this.#R({...this.#Z,...J.detail.gradient},J.type)};#e=(J)=>{let Z=J.target?.closest?.("fig-handle:not(.fig-input-gradient-ghost)"),$=Number(Z?.dataset.stopIndex);if(!Number.isInteger($))return;this.#A(this.#$[$])};#d=(J)=>{J.stopPropagation();let{oldIndex:Z,newIndex:$}=J.detail??{};if(!Number.isInteger(Z)||!Number.isInteger($)||Z===$)return;this.#S();let X=b(this.#Z.stops),[Y]=X.splice(Z,1);X.splice($,0,Y);let[Q]=this.#$.splice(Z,1);this.#$.splice($,0,Q),this.#R({...this.#Z,stops:X},"input")};#l(J,Z){let $=this.#$.indexOf(J);if($<0)return;let X=b(this.#Z.stops);X[$]={...X[$],...this.#f(J)},this.#R({...this.#Z,stops:X},Z)}#r(J){if(this.#Z.stops.length<=2)return;let Z=this.#$.indexOf(J);if(Z<0)return;if(J.contains(document.activeElement))this.#_.focus();if(J===this.#Y)this.#Y=this.#$[Z+1]??this.#$[Z-1]??null;let $=b(this.#Z.stops);$.splice(Z,1),this.#R({...this.#Z,stops:$},"input")}#JJ=(J)=>{if(J.button!==0||this.#Q)return;this.#Q=!0,window.addEventListener("pointerup",this.#u,!0),window.addEventListener("pointercancel",this.#u,!0),window.addEventListener("blur",this.#u,!0)};#u=()=>{window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0),queueMicrotask(()=>this.#zJ({reconcile:!0}))};#zJ({reconcile:J}){window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0);let Z=this.#Q;if(this.#Q=!1,!J||!Z||!this.#k)return;let $=this.#k;this.#k=null,this.#Z=$,this.#E(),this.#b()}#_J(){requestAnimationFrame(()=>{if(!this.isConnected)return;this.querySelectorAll(".fig-fill-picker-stop-color").forEach((J)=>{let Z=J.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#U})})}}if(!customElements.get("fig-gradient-editor"))customElements.define("fig-gradient-editor",l);function A(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function F(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function kJ(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function p(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function BJ(J){let Z=String(J??"").trim();if(!Z||Z.startsWith("{")||Z.startsWith("#"))return!1;if(Z.startsWith("data:video/"))return!0;try{let $=new URL(Z,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test($)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(Z)}}function I(J,Z={}){let $=document.createElement("fig-icon");if(J)$.setAttribute("name",J);if(Z.size)$.setAttribute("size",Z.size);if(Z.className)$.className=Z.className;return $}function ZJ(J,Z){let $=(X)=>{if(X===null||X===void 0||X===!1)return;if(Array.isArray(X)){X.forEach($);return}J.append(X instanceof Node?X:String(X))};return $(Z),J}function GJ(J,Z={}){for(let[$,X]of Object.entries(Z)){if(X===null||X===void 0||X===!1)continue;if($==="className")J.className=String(X);else if(X===!0)J.setAttribute($,"");else J.setAttribute($,String(X))}return J}function _(J,Z,$){let X=document.createElement(J);return GJ(X,Z),ZJ(X,$)}class $J extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#X(),this.#K()}attributeChangedCallback(J,Z,$){if(Z===$||!this.isConnected)return;if(J==="units")this.#J();else this.#U(J)}get value(){return{x:this.#V("x"),y:this.#V("y")}}#X(){if(this.#Z.x&&this.#Z.y)return;let J=(Z)=>{let $=Z.toUpperCase(),X=_("fig-input-number",{full:!0,"aria-label":`${$} coordinate`,"data-axis":Z},_("span",{slot:"prepend"},$));return X.addEventListener("input",(Y)=>this.#q(Z,Y)),X.addEventListener("change",(Y)=>this.#q(Z,Y)),this.#Z[Z]=X,X};this.replaceChildren(_("fig-input-combo",{full:!0},["x","y"].map(J)))}#K(){this.#U("x"),this.#U("y"),this.#J()}#U(J){let Z=this.#Z[J];if(!Z)return;let $=String(this.#V(J));if(Z.getAttribute("value")!==$)Z.setAttribute("value",$)}#J(){let J=this.getAttribute("units");for(let Z of Object.values(this.#Z))if(J===null)Z.removeAttribute("units");else Z.setAttribute("units",J)}#V(J){let Z=Number(this.getAttribute(J));return Number.isFinite(Z)?Z:0}#q(J,Z){Z.stopPropagation();let $=Number(Z.detail);this.setAttribute(J,String(Number.isFinite($)?$:0)),this.dispatchEvent(new CustomEvent(Z.type,{bubbles:!0,detail:this.value}))}}A("fig-input-point",$J);var NJ="http://www.w3.org/2000/svg";function o(J,Z,$){let X=document.createElementNS(NJ,J);for(let[Y,Q]of Object.entries(Z||{})){if(Q===null||Q===void 0||Q===!1)continue;if(Y==="className")X.setAttribute("class",String(Q));else if(Q===!0)X.setAttribute(Y,"");else X.setAttribute(Y,String(Q))}return ZJ(X,$)}function fJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:Y="",chevronClass:Q="",startLabel:W="Scroll back",endLabel:K="Scroll forward"}={}){let j=(U,L)=>{let q=document.createElement("button");if(q.type="button",q.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?X:Y].filter(Boolean).join(" "),q.dataset.figOverflow=U,J)q.setAttribute(`data-fig-${J}-nav`,U);return q.setAttribute("tabindex","-1"),q.setAttribute("aria-label",U==="start"?W:K),q.appendChild(I("chevron",{size:"small",className:["fig-overflow-chevron",Q].filter(Boolean).join(" ")})),q.addEventListener("click",(z)=>{z.preventDefault(),z.stopPropagation(),L?.(z)}),q};return{start:j("start",Z),end:j("end",$)}}function c(J,Z,$="x",X=2){if(!J||!Z)return!1;let Y=$==="x",Q=Y?Z.scrollWidth:Z.scrollHeight,W=Y?Z.clientWidth:Z.clientHeight,K=Y?Z.scrollLeft:Z.scrollTop,j=Q-W>X,U=!j||K<=X,L=!j||K+W>=Q-X;return J.classList.toggle("overflow-start",!U),J.classList.toggle("overflow-end",!L),j}function a(J,Z="x",$=1){if(!J)return;let X=Z==="x",Q=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Q,behavior:"smooth"})}function FJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let Y=$==="x",Q=Y?J.scrollWidth:J.scrollHeight,W=Y?J.clientWidth:J.clientHeight;if(Q<=W+1){c(J,J,$);return}let K=Z.getBoundingClientRect(),j=J.getBoundingClientRect(),U=Y?J.scrollLeft:J.scrollTop,L=(Y?K.left-j.left:K.top-j.top)+U,q=Y?K.width:K.height,z=Q-W,O=Math.max(0,Math.min(L+q/2-W/2,z));J.scrollTo({[Y?"left":"top"]:O,behavior:X}),c(J,J,$)})}function TJ(J){let Z=J||"";if(Z.startsWith("["))try{let X=JSON.parse(Z);return Array.isArray(X)?X:[]}catch{}let $=Z.includes(`
+import"./fig.js";import"./fig-property.js";import{figConvertRGB as i,figHexToRGB as t,figHslToRGB as r,figHsvToRGB as _J,figOklabToOklch as LJ,figOklabToRGB as OJ,figOklchToRGB as HJ,figRGBToHsl as e,figRGBToHsv as MJ,figRGBToOklab as JJ,figRGBToOklch as VJ}from"./fig-color.js";import"./fig.js";import"./fig-property.js";import{figConvertRGB as KJ,figHexToRGB as jJ}from"./fig-color.js";var y={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};function N(J,Z={},$=[]){let X=document.createElement(J);for(let[Q,W]of Object.entries(Z)){if(W===null||W===void 0||W===!1)continue;if(Q==="className")X.className=String(W);else if(W===!0)X.setAttribute(Q,"");else X.setAttribute(Q,String(W))}let Y=Array.isArray($)?$:[$];for(let Q of Y){if(Q===null||Q===void 0||Q===!1)continue;X.append(Q instanceof Node?Q:String(Q))}return X}function s(J){return N("fig-icon",{name:J})}function UJ(J,Z){return{position:Number.isFinite(Number(J?.position))?Math.max(0,Math.min(100,Number(J.position))):Z*100,color:g(J?.color),opacity:Number.isFinite(Number(J?.opacity))?Math.max(0,Math.min(100,Number(J.opacity))):100}}function g(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);return/^[0-9A-Fa-f]{6}$/.test(Z)?`#${Z.toUpperCase()}`:"#888888"}function d(J,Z){return Number(J?.position)===Number(Z?.position)&&g(J?.color)===g(Z?.color)&&Number(J?.opacity??100)===Number(Z?.opacity??100)}function m(J){if(Array.isArray(J))return J.map(m);if(!J||typeof J!=="object")return J;return Object.fromEntries(Object.keys(J).filter((Z)=>J[Z]!==void 0).sort().map((Z)=>[Z,m(J[Z])]))}function h(J,Z){return!!J&&!!Z&&JSON.stringify(m(J))===JSON.stringify(m(Z))}function b(J){return J.map((Z)=>({...Z}))}function qJ(J,Z){let $=J.length,X=Z.length,Y=Array.from({length:$+1},()=>Array(X+1).fill(0));for(let j=$-1;j>=0;j-=1)for(let U=X-1;U>=0;U-=1)Y[j][U]=d(J[j],Z[U])?Y[j+1][U+1]+1:Math.max(Y[j+1][U],Y[j][U+1]);let Q=[],W=0,K=0;while(W<$&&K<X)if(d(J[W],Z[K]))Q.push([W,K]),W+=1,K+=1;else if(Y[W+1][K]>=Y[W][K+1])W+=1;else K+=1;return Q}function E(J){let Z=J;if(typeof Z==="string")try{Z=JSON.parse(Z)}catch{Z={}}if(Z?.type==="gradient"&&Z.gradient)Z=Z.gradient;let $=Z&&typeof Z==="object"?Z:{},X=Array.isArray($.stops)?$.stops.map(UJ):y.stops.map((Y)=>({...Y}));return{...y,...$,type:["linear","radial","angular"].includes($.type)?$.type:"linear",angle:Number.isFinite(Number($.angle))?Number($.angle):y.angle,centerX:Number.isFinite(Number($.centerX))?Number($.centerX):y.centerX,centerY:Number.isFinite(Number($.centerY))?Number($.centerY):y.centerY,interpolationSpace:"srgb",stops:X.length>=2?X:y.stops.map((Y)=>({...Y}))}}function zJ(J,Z,$){let{r:X,g:Y,b:Q}=jJ(J);if($==="display-p3"){let W=KJ(X,Y,Q,{from:"srgb",to:"display-p3"});return`color(display-p3 ${+(W.r/255).toFixed(4)} ${+(W.g/255).toFixed(4)} ${+(W.b/255).toFixed(4)} / ${Z})`}return`rgba(${X}, ${Y}, ${Q}, ${Z})`}function v(J,{colorSpace:Z="srgb"}={}){let $=E(J),X=$.stops.map((Y)=>`${zJ(Y.color,(Y.opacity??100)/100,Z)} ${Y.position}%`).join(", ");switch($.type){case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%, ${X})`;case"angular":return`conic-gradient(from ${$.angle}deg, ${X})`;default:return`linear-gradient(${$.angle}deg, ${X})`}}class l extends HTMLElement{#Z=E();#Y=!1;#K=!1;#U=null;#J=!1;#V=null;#q=null;#j=null;#L=null;#W=null;#_=null;#$=[];#z=[];#X=null;#Q=!1;#k=null;static get observedAttributes(){return["value","color-space","disabled","overflow","show-rows"]}get value(){return structuredClone(this.#Z)}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??{}))}get cssValue(){return v(this.#Z,{colorSpace:this.getAttribute("color-space")||"srgb"})}get pickerAnchor(){return this.#U}set pickerAnchor(J){this.#U=J instanceof Element?J:null,this.#KJ()}connectedCallback(){let J=E(this.getAttribute("value"));if(!h(this.#Z,J))this.#Z=J;this.#P(),this.#b()}attributeChangedCallback(J,Z,$){if(Z===$||this.#Y)return;if(J==="value"){let X=E($);if(h(this.#Z,X)){if(this.#Q)this.#k=null;return}if(this.#Q){this.#k=X;return}this.#k=null,this.#Z=X}if(this.isConnected&&this.#J)this.#b()}disconnectedCallback(){if(this.#_J({reconcile:!1}),this.#k)this.#Z=this.#k,this.#k=null,this.#E()}refreshLayout(){this.#q?.refreshLayout?.()}#F(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#H(){return this.getAttribute("overflow")==="visible"?"visible":"fade"}#M(){let J=Number(this.getAttribute("show-rows"));return Number.isFinite(J)&&J>0?J:null}#E(){this.#Y=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#Y=!1}#B(){return{type:"gradient",gradient:this.value,css:this.cssValue}}#N(J){this.#E(),this.dispatchEvent(new CustomEvent(J,{bubbles:!0,composed:!0,detail:this.#B()}))}#P(){if(this.#J)return;this.#V=N("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",variant:"ghost"},N("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([W,K])=>N("fig-select-option",{value:W},K))));let J=(W,K,j)=>{let U=N("fig-button",{icon:!0,variant:"ghost",className:K,"aria-label":W},s(j));return{button:U,tooltip:N("fig-tooltip",{text:W},U)}},Z=J("Flip gradient","fig-fill-picker-gradient-flip","swap"),$=J("Rotate gradient","fig-fill-picker-gradient-rotate","rotate");this.#L=Z.button,this.#W=$.button;let X=N("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[this.#V,N("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[Z.tooltip,$.tooltip])]);this.#q=N("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large"});let Y=N("fig-preview",{className:"fig-fill-picker-gradient-preview"},this.#q);this.#_=N("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},s("add")),this.#j=document.createElement("fig-reorder");let Q=N("div",{className:"fig-fill-picker-gradient-stops"},[N("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[N("h3",{},"Stops"),this.#_]),N("div",{className:"fig-fill-picker-gradient-stops-list"},this.#j)]);this.replaceChildren(X,Y,Q),this.#V.addEventListener("change",this.#i),this.#V.addEventListener("optionhover",(W)=>W.stopPropagation()),this.#W.addEventListener("click",this.#g),this.#L.addEventListener("click",this.#C),this.#_.addEventListener("click",this.#t),this.#q.addEventListener("input",this.#m),this.#q.addEventListener("change",this.#m),this.#q.addEventListener("pointerdown",this.#e),this.#q.addEventListener("focusin",this.#e),this.#q.addEventListener("click",this.#e),this.#q.addEventListener("keydown",this.#v),this.#j.addEventListener("reorder",this.#JJ),this.#j.addEventListener("keydown",this.#v),this.addEventListener("pointerdown",this.#fJ,!0),this.addEventListener("lostpointercapture",this.#u,!0),this.#J=!0}#T(J){if((J.opacity??100)>=100)return J.color;return`${J.color}${Math.round((J.opacity??100)/100*255).toString(16).padStart(2,"0")}`}#f(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=this.#Z.stops[Number(J.dataset.index)]??{},Y=Number(Z?.value??Z?.getAttribute("value")??0),Q=$?.hexOpaque||(typeof $?.value==="string"?$.value:"")||$?.getAttribute("value");return{position:Number.isFinite(Y)?Math.max(0,Math.min(100,Y)):0,color:g(String(Q||X.color).slice(0,7)),opacity:$?.rgba?.a!==void 0?Math.round($.rgba.a*100):X.opacity??100}}#D(J){let Z=this.#$.indexOf(J);if(!Number.isInteger(Z)||!this.#Z.stops[Z])return;this.#Z.stops[Z]={...this.#Z.stops[Z],...this.#f(J)}}#S(){this.#$.forEach((J)=>this.#D(J))}#d(){let J=N("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",units:"%"}),Z=N("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right"}),$=N("fig-property",{className:"fig-fill-picker-gradient-stop-row",leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},N("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[J,Z]));J.addEventListener("input",(X)=>{X.stopPropagation(),this.#p($,"input")}),J.addEventListener("change",(X)=>{X.stopPropagation(),this.#p($,"change")});for(let X of["input","change"])Z.addEventListener(X,(Y)=>{Y.stopPropagation(),this.#p($,X)});return $.addEventListener("remove",(X)=>{X.stopPropagation(),this.#r($)}),$.addEventListener("pointerdown",(X)=>{if(X.button===0)this.#A($)}),$.addEventListener("click",(X)=>{if(this.#A($),!X.composedPath().some((Q)=>Q instanceof Element&&Q.matches('input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])'))&&$.isConnected)$.focus({preventScroll:!0})}),$.addEventListener("focusin",()=>this.#A($)),$}#A(J){if(!J||!this.#$.includes(J))return;this.#X=J,this.#$.forEach((Z)=>{Z.toggleAttribute("selected",Z===J)}),this.#y(),J.scrollIntoView({block:"nearest"})}#y(){let J=this.#$.indexOf(this.#X);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)").forEach((Z,$)=>{if($===J)Z.select?.();else Z.deselect?.()})}#x(){if(!this.#j)return;let J=this.#Z.stops,Z=this.#$.filter((Y)=>Y.isConnected),$;if(Z.length===J.length)$=[...Z];else{$=Array(J.length).fill(null);let Y=qJ(this.#z,J),Q=new Set;for(let[j,U]of Y){let L=Z[j];if(!L)continue;$[U]=L,Q.add(j)}let W=Z.filter((j,U)=>!Q.has(U));$=$.map((j)=>j??W.shift()??this.#d());let K=new Set($);Z.forEach((j)=>{if(!K.has(j))j.remove()})}let X=this.#j.firstElementChild;for(let Y of $)if(Y===X)X=X.nextElementSibling;else this.#j.insertBefore(Y,X);if(this.#$=$,this.#$.forEach((Y,Q)=>{this.#h(Y,J[Q],Q)}),!this.#$.includes(this.#X))this.#X=this.#$[0]??null;this.#$.forEach((Y)=>{Y.toggleAttribute("selected",Y===this.#X)}),this.#y(),this.#z=b(J),this.#KJ()}#h(J,Z,$){let X=this.#F();J.dataset.index=String($);let Y=J.querySelector(".fig-fill-picker-stop-position"),Q=J.querySelector(".fig-fill-picker-stop-color");this.#l(Y,Z.position),this.#l(Q,this.#T(Z)),Y?.toggleAttribute("disabled",X),Q?.toggleAttribute("disabled",X);let W=J.querySelector(':scope > [data-fig-property-action="remove"]');if(W)W.classList.add("fig-fill-picker-stop-remove"),W.setAttribute("aria-label","Remove gradient stop"),W.toggleAttribute("disabled",X||this.#Z.stops.length<=2)}#l(J,Z){if(!J)return;let $=String(Z);if(J.getAttribute("value")===$)return;let X=J.contains(document.activeElement)?document.activeElement:null,Y=X&&"selectionStart"in X&&typeof X.selectionStart==="number"?{start:X.selectionStart,end:X.selectionEnd,direction:X.selectionDirection}:null;if(J.setAttribute("value",$),Y&&X===document.activeElement)try{X.setSelectionRange(Y.start,Y.end,Y.direction)}catch{}}#b(){if(!this.#J)return;let J=this.#F(),Z=this.#H()==="fade";this.#j.classList.toggle("fig-overflow-fade",Z);let $=this.#M();if($===null)this.#j.style.removeProperty("--fig-gradient-editor-overflow-show-rows");else this.#j.style.setProperty("--fig-gradient-editor-overflow-show-rows",String($));this.#l(this.#V,this.#Z.type),this.#V.toggleAttribute("disabled",J),this.#L.toggleAttribute("disabled",J),this.#W.toggleAttribute("disabled",J),this.#_.toggleAttribute("disabled",J),this.#j.toggleAttribute("disabled",J),this.#q.toggleAttribute("disabled",J);let X=E(this.#q.value);if(!h(X,this.#Z))this.#K=!0,this.#q.value={type:"gradient",gradient:this.#Z},this.#K=!1;this.#x()}#R(J,Z,{focusIndex:$=null}={}){let X=E(J),Y=!h(this.#Z,X);if(Y)this.#Z=X,this.#b();if(Z==="change"||Y)this.#N(Z);if($!==null)this.#w($)}#w(J){requestAnimationFrame(()=>{if(!this.isConnected)return;let Z=this.querySelector(`.fig-fill-picker-gradient-stop-row[data-index="${J}"]`),$=Z?.querySelector(".fig-fill-picker-stop-color fig-input-text input");this.#A(Z),$?.focus(),$?.select()})}#i=(J)=>{J.stopPropagation();let Z=typeof J.detail==="string"?J.detail:J.target?.value;if(!["linear","radial","angular"].includes(Z))return;this.#R({...this.#Z,type:Z},"input")};#g=()=>{this.#R({...this.#Z,angle:(Number(this.#Z.angle)+90)%360},"input")};#C=()=>{let J=this.#Z.stops.map((Z)=>({...Z,position:100-Z.position})).sort((Z,$)=>Z.position-$.position);this.#R({...this.#Z,stops:J},"input")};#t=()=>{let J=b(this.#Z.stops),Z=Math.max(0,this.#$.indexOf(this.#X)),$=Number(J[Z]?.position)||0,X=Number(J[Z+1]?.position??$),Y={position:($+X)/2,color:"#888888",opacity:100},Q=Z+1;J.splice(Q,0,Y),this.#R({...this.#Z,stops:J},"input",{focusIndex:Q})};#m=(J)=>{if(J.stopPropagation(),this.#K||!J.detail?.gradient)return;this.#R({...this.#Z,...J.detail.gradient},J.type)};#e=(J)=>{let Z=J.target?.closest?.("fig-handle:not(.fig-input-gradient-ghost)"),$=Number(Z?.dataset.stopIndex);if(!Number.isInteger($))return;this.#A(this.#$[$])};#v=(J)=>{if(J.defaultPrevented||!["Delete","Backspace"].includes(J.key)||this.#F()||this.#Z.stops.length<=2)return;let Z=J.target?.closest?.("fig-handle[selected]:not(.fig-input-gradient-ghost)"),$=J.target?.closest?.(".fig-fill-picker-gradient-stop-row[selected]"),X=Z&&this.#q.contains(Z),Y=J.composedPath().some((W)=>W instanceof Element&&W.matches('input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])')),Q=$===this.#X&&!Y;if(!X&&!Q)return;J.preventDefault(),this.#r(this.#X),requestAnimationFrame(()=>{let W=this.#$.indexOf(this.#X);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)")[W]?.focus()})};#JJ=(J)=>{J.stopPropagation();let{oldIndex:Z,newIndex:$}=J.detail??{};if(!Number.isInteger(Z)||!Number.isInteger($)||Z===$)return;this.#S();let X=b(this.#Z.stops),Y=X.map((K)=>K.position),[Q]=X.splice(Z,1);X.splice($,0,Q),X.forEach((K,j)=>{K.position=Y[j]});let[W]=this.#$.splice(Z,1);this.#$.splice($,0,W),this.#R({...this.#Z,stops:X},"input")};#p(J,Z){let $=this.#$.indexOf(J);if($<0)return;let X=b(this.#Z.stops);X[$]={...X[$],...this.#f(J)},this.#R({...this.#Z,stops:X},Z)}#r(J){if(this.#Z.stops.length<=2)return;let Z=this.#$.indexOf(J);if(Z<0)return;if(J.contains(document.activeElement))this.#_.focus();if(J===this.#X)this.#X=this.#$[Z+1]??this.#$[Z-1]??null;let $=b(this.#Z.stops);$.splice(Z,1),this.#R({...this.#Z,stops:$},"input")}#fJ=(J)=>{if(J.button!==0||this.#Q)return;this.#Q=!0,window.addEventListener("pointerup",this.#u,!0),window.addEventListener("pointercancel",this.#u,!0),window.addEventListener("blur",this.#u,!0)};#u=()=>{window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0),queueMicrotask(()=>this.#_J({reconcile:!0}))};#_J({reconcile:J}){window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0);let Z=this.#Q;if(this.#Q=!1,!J||!Z||!this.#k)return;let $=this.#k;this.#k=null,this.#Z=$,this.#E(),this.#b()}#KJ(){requestAnimationFrame(()=>{if(!this.isConnected)return;this.querySelectorAll(".fig-fill-picker-stop-color").forEach((J)=>{let Z=J.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#U})})}}if(!customElements.get("fig-gradient-editor"))customElements.define("fig-gradient-editor",l);function A(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function F(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function kJ(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function p(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function GJ(J){let Z=String(J??"").trim();if(!Z||Z.startsWith("{")||Z.startsWith("#"))return!1;if(Z.startsWith("data:video/"))return!0;try{let $=new URL(Z,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test($)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(Z)}}function I(J,Z={}){let $=document.createElement("fig-icon");if(J)$.setAttribute("name",J);if(Z.size)$.setAttribute("size",Z.size);if(Z.className)$.className=Z.className;return $}function ZJ(J,Z){let $=(X)=>{if(X===null||X===void 0||X===!1)return;if(Array.isArray(X)){X.forEach($);return}J.append(X instanceof Node?X:String(X))};return $(Z),J}function BJ(J,Z={}){for(let[$,X]of Object.entries(Z)){if(X===null||X===void 0||X===!1)continue;if($==="className")J.className=String(X);else if(X===!0)J.setAttribute($,"");else J.setAttribute($,String(X))}return J}function _(J,Z,$){let X=document.createElement(J);return BJ(X,Z),ZJ(X,$)}class $J extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#Y(),this.#K()}attributeChangedCallback(J,Z,$){if(Z===$||!this.isConnected)return;if(J==="units")this.#J();else this.#U(J)}get value(){return{x:this.#V("x"),y:this.#V("y")}}#Y(){if(this.#Z.x&&this.#Z.y)return;let J=(Z)=>{let $=Z.toUpperCase(),X=_("fig-input-number",{full:!0,"aria-label":`${$} coordinate`,"data-axis":Z},_("span",{slot:"prepend"},$));return X.addEventListener("input",(Y)=>this.#q(Z,Y)),X.addEventListener("change",(Y)=>this.#q(Z,Y)),this.#Z[Z]=X,X};this.replaceChildren(_("fig-input-combo",{full:!0},["x","y"].map(J)))}#K(){this.#U("x"),this.#U("y"),this.#J()}#U(J){let Z=this.#Z[J];if(!Z)return;let $=String(this.#V(J));if(Z.getAttribute("value")!==$)Z.setAttribute("value",$)}#J(){let J=this.getAttribute("units");for(let Z of Object.values(this.#Z))if(J===null)Z.removeAttribute("units");else Z.setAttribute("units",J)}#V(J){let Z=Number(this.getAttribute(J));return Number.isFinite(Z)?Z:0}#q(J,Z){Z.stopPropagation();let $=Number(Z.detail);this.setAttribute(J,String(Number.isFinite($)?$:0)),this.dispatchEvent(new CustomEvent(Z.type,{bubbles:!0,detail:this.value}))}}A("fig-input-point",$J);var NJ="http://www.w3.org/2000/svg";function o(J,Z,$){let X=document.createElementNS(NJ,J);for(let[Y,Q]of Object.entries(Z||{})){if(Q===null||Q===void 0||Q===!1)continue;if(Y==="className")X.setAttribute("class",String(Q));else if(Q===!0)X.setAttribute(Y,"");else X.setAttribute(Y,String(Q))}return ZJ(X,$)}function fJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:Y="",chevronClass:Q="",startLabel:W="Scroll back",endLabel:K="Scroll forward"}={}){let j=(U,L)=>{let q=document.createElement("button");if(q.type="button",q.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?X:Y].filter(Boolean).join(" "),q.dataset.figOverflow=U,J)q.setAttribute(`data-fig-${J}-nav`,U);return q.setAttribute("tabindex","-1"),q.setAttribute("aria-label",U==="start"?W:K),q.appendChild(I("chevron",{size:"small",className:["fig-overflow-chevron",Q].filter(Boolean).join(" ")})),q.addEventListener("click",(z)=>{z.preventDefault(),z.stopPropagation(),L?.(z)}),q};return{start:j("start",Z),end:j("end",$)}}function c(J,Z,$="x",X=2){if(!J||!Z)return!1;let Y=$==="x",Q=Y?Z.scrollWidth:Z.scrollHeight,W=Y?Z.clientWidth:Z.clientHeight,K=Y?Z.scrollLeft:Z.scrollTop,j=Q-W>X,U=!j||K<=X,L=!j||K+W>=Q-X;return J.classList.toggle("overflow-start",!U),J.classList.toggle("overflow-end",!L),j}function a(J,Z="x",$=1){if(!J)return;let X=Z==="x",Q=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Q,behavior:"smooth"})}function FJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let Y=$==="x",Q=Y?J.scrollWidth:J.scrollHeight,W=Y?J.clientWidth:J.clientHeight;if(Q<=W+1){c(J,J,$);return}let K=Z.getBoundingClientRect(),j=J.getBoundingClientRect(),U=Y?J.scrollLeft:J.scrollTop,L=(Y?K.left-j.left:K.top-j.top)+U,q=Y?K.width:K.height,z=Q-W,H=Math.max(0,Math.min(L+q/2-W/2,z));J.scrollTo({[Y?"left":"top"]:H,behavior:X}),c(J,J,$)})}function TJ(J){let Z=J||"";if(Z.startsWith("["))try{let X=JSON.parse(Z);return Array.isArray(X)?X:[]}catch{}let $=Z.includes(`
 `)?`
-`:",";return Z.split($).map((X)=>X.trim()).filter(Boolean)}function DJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function CJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}function XJ(J){let Z=J.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if(Z)return Z;return Z=I("checkmark",{size:"small",className:"fig-select-option-checkmark"}),Z.setAttribute("slot","prepend"),Z.setAttribute("aria-hidden","true"),Z.setAttribute("data-fig-select-checkmark",""),J.append(Z),Z}class YJ 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 F(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return F(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");XJ(this),this.#Z()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J==="disabled")this.#Z()}#Z(){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",YJ);class QJ extends HTMLElement{#Z=null;#X=null;#K=null;#U=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#V(),this.#q(),this.addEventListener("scroll",this.#J,{passive:!0}),this.#K?.disconnect(),this.#K=new ResizeObserver(()=>this.syncOverflow()),this.#K.observe(this),this.#U?.disconnect(),this.#U=new MutationObserver(()=>{if(!this.isConnected)return;this.#q(),this.syncOverflow()}),this.#U.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#J),this.#K?.disconnect(),this.#K=null,this.#U?.disconnect(),this.#U=null,this.#L()}syncOverflow(){return c(this,this,"y")}scrollToOption(J,Z="auto"){FJ(this,J,"y",Z)}#V(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#q(){if(this.#Z&&this.#X&&this.contains(this.#Z)&&this.contains(this.#X)){this.#j();return}this.#L();let J=fJ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>a(this,"y",-1),onEnd:()=>a(this,"y",1)});this.#Z=J.start,this.#X=J.end,this.#j()}#j(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#X)this.append(this.#X)}#L(){this.#Z?.remove(),this.#X?.remove(),this.#Z=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",QJ);class WJ extends HTMLElement{#Z=null;#X=null;#K=null;#U=null;#J=null;#V=null;#q=null;#j=null;#L=null;#W=!1;#_=-1;#$=!1;#z=!1;#Y=null;#Q=!1;#k=null;#F=null;#O=!1;#M=null;#E=this.#UJ.bind(this);#G=()=>{queueMicrotask(()=>{if(!this.#Z?.matches(":focus-within"))return;this.toggleAttribute("data-focus-visible",this.#Z.hasAttribute("data-focus-visible")||this.#Z.matches(":focus-visible"))})};#N=()=>this.removeAttribute("data-focus-visible");#P=this.#hJ.bind(this);#T=this.#MJ.bind(this);#f=this.#gJ.bind(this);#D=this.#mJ.bind(this);#S=this.#HJ.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 F(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#M??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#M=J}else if(typeof J==="string"&&J.trim())this.#M=null,this.setAttribute("menu-anchor",J);else this.#M=null,this.removeAttribute("menu-anchor");this.#d()}connectedCallback(){if(!this.#W)this.#R();if(this.#y(),this.#b(),this.#jJ(),this.#c(),this.#OJ(),this.#$J(),this.#bJ(),this.#ZJ(),this.open)this.#TJ()}disconnectedCallback(){this.#wJ(),document.removeEventListener("keydown",this.#f,!0),this.#L?.disconnect(),this.#L=null}attributeChangedCallback(J,Z,$){if(Z===$||!this.#W)return;if(J==="options"){this.#b(),this.#$J();return}if(J==="value"||J==="label"||J==="aria-label"){this.#$J();return}if(J==="disabled"){this.#jJ();return}if(J==="size"){this.#c();return}if(J==="open"){if($===null||$==="false")this.#RJ();else this.#TJ();return}if(J==="menu-anchor"){this.#M=null,this.#d();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#OJ(),this.open)this.#I()}}focus(J){this.#Z?.focus(J)}blur(){this.#Z?.blur()}#c(){if(!this.#Z)return;let J=this.getAttribute("size");if(J)this.#Z.setAttribute("size",J);else this.#Z.removeAttribute("size")}#A(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#y(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#x(){let Z=(this.#j?.assignedElements({flatten:!0})??[]).find(($)=>$.tagName==="FIG-SELECT-OPTIONS");if(Z)return Z;return this.querySelector(":scope > fig-select-options")}#h(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#s(){let J=this.#x();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}#b(){if(this.#h())return;let J=this.hasAttribute("options"),Z=J?this.#s():this.#x();if(!Z)return;this.#O=!0;try{for(let Y of Z.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))Y.remove();if(!J)return;let $=TJ(this.getAttribute("options")),X=Z.querySelector(":scope > .fig-overflow-end");for(let Y of $){let Q=document.createElement("fig-select-option");if(Q.setAttribute("data-fig-generated",""),Q.setAttribute("value",DJ(Y)),Q.textContent=CJ(Y),X)Z.insertBefore(Q,X);else Z.appendChild(Q)}}finally{this.#O=!1}}#R(){this.#W=!0;let J=this.attachShadow({mode:"open"}),Z=document.createElement("style");Z.textContent=`
+`:",";return Z.split($).map((X)=>X.trim()).filter(Boolean)}function DJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function CJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}function XJ(J){let Z=J.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if(Z)return Z;return Z=I("checkmark",{size:"small",className:"fig-select-option-checkmark"}),Z.setAttribute("slot","prepend"),Z.setAttribute("aria-hidden","true"),Z.setAttribute("data-fig-select-checkmark",""),J.append(Z),Z}class YJ 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 F(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return F(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");XJ(this),this.#Z()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J==="disabled")this.#Z()}#Z(){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",YJ);class QJ extends HTMLElement{#Z=null;#Y=null;#K=null;#U=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#V(),this.#q(),this.addEventListener("scroll",this.#J,{passive:!0}),this.#K?.disconnect(),this.#K=new ResizeObserver(()=>this.syncOverflow()),this.#K.observe(this),this.#U?.disconnect(),this.#U=new MutationObserver(()=>{if(!this.isConnected)return;this.#q(),this.syncOverflow()}),this.#U.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#J),this.#K?.disconnect(),this.#K=null,this.#U?.disconnect(),this.#U=null,this.#L()}syncOverflow(){return c(this,this,"y")}scrollToOption(J,Z="auto"){FJ(this,J,"y",Z)}#V(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#q(){if(this.#Z&&this.#Y&&this.contains(this.#Z)&&this.contains(this.#Y)){this.#j();return}this.#L();let J=fJ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>a(this,"y",-1),onEnd:()=>a(this,"y",1)});this.#Z=J.start,this.#Y=J.end,this.#j()}#j(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#Y)this.append(this.#Y)}#L(){this.#Z?.remove(),this.#Y?.remove(),this.#Z=null,this.#Y=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",QJ);class WJ extends HTMLElement{#Z=null;#Y=null;#K=null;#U=null;#J=null;#V=null;#q=null;#j=null;#L=null;#W=!1;#_=-1;#$=!1;#z=!1;#X=null;#Q=!1;#k=null;#F=null;#H=!1;#M=null;#E=this.#qJ.bind(this);#B=()=>{queueMicrotask(()=>{if(!this.#Z?.matches(":focus-within"))return;this.toggleAttribute("data-focus-visible",this.#Z.hasAttribute("data-focus-visible")||this.#Z.matches(":focus-visible"))})};#N=()=>this.removeAttribute("data-focus-visible");#P=this.#hJ.bind(this);#T=this.#MJ.bind(this);#f=this.#gJ.bind(this);#D=this.#mJ.bind(this);#S=this.#OJ.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 F(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#M??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#M=J}else if(typeof J==="string"&&J.trim())this.#M=null,this.setAttribute("menu-anchor",J);else this.#M=null,this.removeAttribute("menu-anchor");this.#v()}connectedCallback(){if(!this.#W)this.#R();if(this.#y(),this.#b(),this.#UJ(),this.#d(),this.#HJ(),this.#$J(),this.#bJ(),this.#ZJ(),this.open)this.#DJ()}disconnectedCallback(){this.#wJ(),document.removeEventListener("keydown",this.#f,!0),this.#L?.disconnect(),this.#L=null}attributeChangedCallback(J,Z,$){if(Z===$||!this.#W)return;if(J==="options"){this.#b(),this.#$J();return}if(J==="value"||J==="label"||J==="aria-label"){this.#$J();return}if(J==="disabled"){this.#UJ();return}if(J==="size"){this.#d();return}if(J==="open"){if($===null||$==="false")this.#RJ();else this.#DJ();return}if(J==="menu-anchor"){this.#M=null,this.#v();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#HJ(),this.open)this.#I()}}focus(J){this.#Z?.focus(J)}blur(){this.#Z?.blur()}#d(){if(!this.#Z)return;let J=this.getAttribute("size");if(J)this.#Z.setAttribute("size",J);else this.#Z.removeAttribute("size")}#A(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#y(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#x(){let Z=(this.#j?.assignedElements({flatten:!0})??[]).find(($)=>$.tagName==="FIG-SELECT-OPTIONS");if(Z)return Z;return this.querySelector(":scope > fig-select-options")}#h(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#l(){let J=this.#x();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}#b(){if(this.#h())return;let J=this.hasAttribute("options"),Z=J?this.#l():this.#x();if(!Z)return;this.#H=!0;try{for(let Y of Z.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))Y.remove();if(!J)return;let $=TJ(this.getAttribute("options")),X=Z.querySelector(":scope > .fig-overflow-end");for(let Y of $){let Q=document.createElement("fig-select-option");if(Q.setAttribute("data-fig-generated",""),Q.setAttribute("value",DJ(Y)),Q.textContent=CJ(Y),X)Z.insertBefore(Q,X);else Z.appendChild(Q)}}finally{this.#H=!1}}#R(){this.#W=!0;let J=this.attachShadow({mode:"open"}),Z=document.createElement("style");Z.textContent=`
         :host {
           display: inline-flex;
           position: relative;
@@ -105,4 +105,4 @@ import"./fig.js";import"./fig-property.js";import{figConvertRGB as i,figHexToRGB
           min-height: 0;
           max-height: inherit;
         }
-    `,J.appendChild(Z);let $=document.createElement("fig-button");$.className="fig-select-trigger",$.setAttribute("part","trigger"),$.setAttribute("variant","ghost"),$.setAttribute("aria-haspopup","listbox"),$.setAttribute("aria-expanded","false");let X=document.createElement("span");X.className="fig-select-prepend",X.setAttribute("part","prepend"),X.setAttribute("aria-hidden","true");let Y=document.createElement("slot");Y.setAttribute("name","prepend-trigger"),Y.hidden=!0;let Q=document.createElement("span");Q.className="fig-select-prepend-fallback",X.append(Y,Q);let W=document.createElement("span");W.className="fig-select-label",W.setAttribute("part","label");let K=document.createElement("slot");K.setAttribute("name","trigger"),K.hidden=!0,$.append(X,W,K);let j=document.createElement("dialog",{is:"fig-popup"});if(j.setAttribute("is","fig-popup"),j.setAttribute("part","listbox"),j.setAttribute("theme","menu"),j.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)j.setAttribute("popover","manual");j.id=kJ(),$.setAttribute("aria-controls",j.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),j.appendChild(U),J.append($,j),this.#Z=$,this.#K=X,this.#U=Y,this.#J=Q,this.#V=K,this.#q=W,this.#X=j,this.#j=U,this.#d(),this.#y(),this.#w(),!this.hasAttribute("value")){let L=this.#QJ().find((q)=>F(q,"selected"));if(L)this.setAttribute("value",L.value)}}#w(){if(!this.#X||this.#z)return;if(typeof this.#X.positionPopup!=="function")return;this.#Y=this.#X.positionPopup.bind(this.#X),this.#X.positionPopup=()=>{if(!this.open){this.#Y?.();return}this.#I()},this.#z=!0}#i(J){if(!J)return null;let Z=document.createRange();Z.selectNodeContents(J);let $=[...Z.getClientRects()].filter((X)=>X.width>0&&X.height>0);if($.length)return $[0];return J.getBoundingClientRect()}#g(){if(typeof this.#X?.parseViewportMargins==="function")return this.#X.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#C(){if(this.#M?.isConnected)return this.#M;let J=this.getAttribute("menu-anchor");if(J)try{let Z=this.parentElement?.querySelector(J);if(Z&&Z!==this&&!this.contains(Z))return Z;let X=this.getRootNode()?.querySelector?.(J);if(X&&X!==this&&!this.contains(X))return X}catch{}return null}#t(){return this.#C()||this.#Z}#m(){return Boolean(this.#C())}#e(){return!this.#LJ()&&this.#m()}#d(){if(!this.#X)return;if(this.#X.anchor=this.#t(),this.#XJ(),!this.open)return;this.#Q=!1,this.#k=null,this.#F=null,this.#X.setupObservers?.(),this.#X.queueReposition?.()}#l(){let J=this.#q?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Z=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;return this.#K?.getBoundingClientRect()??null}#r(){let Z=(this.#e()?this.#C():null)?.getBoundingClientRect()??this.#l();if(!Z)return null;return{x:Z.x,y:Z.y,width:Z.width,height:Z.height}}#JJ(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#u(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.x-Z.x)>$||Math.abs(J.y-Z.y)>$||Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$}#zJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$||Math.abs(J.offsetLeft-Z.offsetLeft)>$||Math.abs(J.offsetTop-Z.offsetTop)>$}#_J(){if(!this.#Q)return!1;let J=this.#u(this.#k,this.#r()),Z=this.#zJ(this.#F,this.#JJ());return!J&&!Z}#PJ(){this.#k=this.#r(),this.#F=this.#JJ()}#LJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#IJ(){if(!this.#X)return;this.#X.style.removeProperty("left"),this.#X.style.removeProperty("top"),this.#X.style.removeProperty("right"),this.#X.style.removeProperty("bottom")}#I(){if(this.#LJ()){if(this.#Q=!1,this.#k=null,this.#F=null,this.#XJ(),this.#IJ(),this.#xJ())return;this.#Y?.(),this.#fJ();return}this.#KJ()}#xJ(){let J=this.#X,Z=this.#C();if(!J||!Z||typeof J.parsePosition!=="function"||typeof J.parseOffset!=="function"||typeof J.computeCoords!=="function")return!1;let $=J.getBoundingClientRect(),X=Z.getBoundingClientRect();if(!$.width||!$.height)return!1;let{vertical:Y,horizontal:Q,shorthand:W}=J.parsePosition(),K=J.parseOffset(),{left:j,top:U}=J.computeCoords(X,$,Y,Q,K,W),L=this.#g();if(typeof J.clampToViewport==="function")({left:j,top:U}=J.clampToViewport({left:j,top:U},$,L));return J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(j)}px`,"important"),J.style.setProperty("top",`${Math.round(U)}px`,"important"),!0}#fJ(){let J=this.#X;if(!J||typeof J.clampToViewport!=="function")return;let Z=J.getBoundingClientRect();if(!Z.width||!Z.height)return;let $=this.#g(),{left:X,top:Y}=J.clampToViewport({left:Z.left,top:Z.top},Z,$);J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(X)}px`,"important"),J.style.setProperty("top",`${Math.round(Y)}px`,"important")}#KJ(){if(this.#_J()){this.#fJ();return}let J=this.#X,Z=this.#q;if(!J||!Z){this.#Y?.();return}let $=this.#QJ(),X=$.find((M)=>this.#v(M)===this.value)||$[0];if(!X){this.#Y?.();return}let Y=this.#e()?this.#C():null;if(Y)this.#XJ();this.#Y?.();let Q=J.getBoundingClientRect(),W=X.getBoundingClientRect();if(!Q.width||!Q.height||!W.height)return;let K,j,U;if(Y){let M=Y.getBoundingClientRect();U=M,K=M.left+(M.width-Q.width)/2,j=M.top+(M.height-W.height)/2-(W.top-Q.top)}else{let M=this.#l(),G=this.#i(X);if(!M?.width||!G)return;U=M;let B=G.left-Q.left,f=G.top-Q.top;K=F(this,"full")?this.getBoundingClientRect().left:M.left-B,j=M.top-f}let L=this.#g();if(typeof J.clampToViewport==="function")({left:K,top:j}=J.clampToViewport({left:K,top:j},Q,L));else{let{left:M,top:G}=L,B=window.innerWidth-Q.width-L.right,f=window.innerHeight-Q.height-L.bottom;K=Math.min(Math.max(K,M),Math.max(M,B)),j=Math.min(Math.max(j,G),Math.max(G,f))}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(j)}px`,"important");let q=this.#x(),z=X.getBoundingClientRect(),O=Y?null:this.#i(X);if(q&&q.scrollHeight>q.clientHeight+1){let M=Y?z.top+z.height/2-(U.top+U.height/2):O?O.top-U.top:0;if(Math.abs(M)>0.5)q.scrollTop+=M;q.syncOverflow?.()}if(this.#Q||this.open)this.#PJ()}#bJ(){this.#Z?.addEventListener("click",this.#E),this.#Z?.addEventListener("keydown",this.#f),this.#Z?.addEventListener("focus",this.#G),this.#Z?.addEventListener("blur",this.#N),this.addEventListener("click",this.#P),this.addEventListener("pointerover",this.#T),this.#X?.addEventListener("keydown",this.#f),this.#X?.addEventListener("close",this.#D),this.#j?.addEventListener("slotchange",this.#S)}#wJ(){this.#Z?.removeEventListener("click",this.#E),this.#Z?.removeEventListener("keydown",this.#f),this.#Z?.removeEventListener("focus",this.#G),this.#Z?.removeEventListener("blur",this.#N),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#P),this.removeEventListener("pointerover",this.#T),this.#X?.removeEventListener("keydown",this.#f),this.#X?.removeEventListener("close",this.#D),this.#j?.removeEventListener("slotchange",this.#S)}#HJ(){this.#y(),this.#$J()}#ZJ(){if(this.#L)return;this.#L=new MutationObserver((J)=>{if(this.#$||this.#O)return;let Z=!1;for(let $ of J){if($.type==="childList"){if([...$.addedNodes].some((X)=>this.#A(X))||[...$.removedNodes].some((X)=>this.#A(X))||$.target?.closest?.("fig-select-option"))Z=!0}if($.type==="attributes"&&$.target?.tagName==="FIG-SELECT-OPTION"){if($.attributeName==="value"||$.attributeName==="disabled"||$.attributeName==="label")Z=!0;else if($.attributeName==="selected"){if(F($.target,"selected")){let X=this.#v($.target);if((this.getAttribute("value")??"")!==X)this.setAttribute("value",X),Z=!0}else if(this.#v($.target)===(this.getAttribute("value")??""))Z=!0}}if($.type==="characterData"&&$.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Z=!0}if(Z)this.#$J()}),this.#L.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#QJ({enabledOnly:J=!1}={}){let Z=this.#x(),$=Z?Array.from(Z.querySelectorAll(":scope > fig-select-option")):[];if(!J)return $;return $.filter((X)=>!F(X,"disabled"))}#v(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Z=J.getAttribute?.("value");if(Z!=null)return Z;return(J.textContent||"").trim()}#AJ(J){if(!J)return"";let Z=J.getAttribute?.("label");if(Z!=null&&Z!=="")return Z.trim();let $=[];for(let X of J.childNodes){if(X.nodeType===Node.TEXT_NODE){let W=X.textContent?.trim();if(W)$.push(W);continue}if(!(X instanceof Element))continue;let Y=X.getAttribute("slot");if(Y==="prepend"||Y==="append")continue;let Q=X.textContent?.trim();if(Q)$.push(Q)}if($.length)return $.join(" ").trim();return(J.textContent||"").trim()}#B(J){if(!this.#K||!this.#U||!this.#J||!this.#V)return;let Z=this.querySelector(':scope > [slot="trigger"]'),$=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),X=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),Y=J?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#V.hidden=!Z,this.#q.hidden=Boolean(Z),this.#K.hidden=Boolean(Z),Z){$?.remove(),this.#K.classList.remove("has-content"),this.#U.hidden=!0,this.#J.replaceChildren();return}if(!X&&Y?.childNodes.length){let W=$||document.createElement("span");if(W.setAttribute("slot","prepend-trigger"),W.setAttribute("data-fig-select-generated",""),W.replaceChildren(...Array.from(Y.childNodes,(K)=>K.cloneNode(!0))),W.parentElement!==this)this.append(W);X=W}else if(X)$?.remove();else $?.remove();let Q=Boolean(X);if(this.#K.classList.toggle("has-content",Q),this.#U.hidden=!X,this.#J.hidden=Boolean(X),X){this.#J.replaceChildren();return}this.#J.replaceChildren()}#OJ(){if(!this.#X)return;this.#X.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#X.setAttribute("offset",J);else this.#X.removeAttribute("offset");let Z=this.getAttribute("closedby");if(Z)this.#X.setAttribute("closedby",Z);else this.#X.removeAttribute("closedby")}#jJ(){let J=F(this,"disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(J&&this.open)this.open=!1}#uJ(J){if(!J.length)return null;let Z=J.find(($)=>F($,"selected"));if(Z&&!F(Z,"disabled"))return Z;return J.find(($)=>!F($,"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}))}#$J(){if(this.#$)return;this.#$=!0;try{let J=this.#QJ(),Z=this.hasAttribute("value"),$=Z?this.getAttribute("value"):null,X=Z?J.find((K)=>this.#v(K)===$):null,Y=!1;if(!X){if(Z){if(!J.length){if(this.#q)this.#q.textContent=$||this.getAttribute("label")||"";return}if(X=this.#uJ(J),X){let K=this.#v(X);if($!==K)this.setAttribute("value",K),Y=!0}else this.removeAttribute("value"),Y=!0}else if(X=J.find((K)=>F(K,"selected")),X)this.setAttribute("value",this.#v(X)),Y=!0}for(let K of J){XJ(K);let j=K===X;if(K.setAttribute("aria-selected",j?"true":"false"),j)K.setAttribute("selected","");else K.removeAttribute("selected")}let Q=X&&this.#AJ(X)||this.getAttribute("label")||"";if(this.#q)this.#q.textContent=Q;this.#B(X);let W=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",W),this.#x()?.syncOverflow?.(),Y)this.#FJ(this.getAttribute("value")??"")}finally{this.#$=!1}}#UJ(J){if(F(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Z=!this.open;if(Z)this.#d();this.open=Z}#hJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(F($,"disabled"))return;this.#vJ($)}#MJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(F($,"disabled"))return;if(J.relatedTarget instanceof Node&&$.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#v($),bubbles:!0,composed:!0}))}#gJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#X?.matches?.(":open")??!1))){if(this.#Z?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#d(),this.open=!0,requestAnimationFrame(()=>{let Y=this.#QJ({enabledOnly:!0}).findIndex((Q)=>this.#v(Q)===this.value);this.#a(Y>=0?Y:0)});return}let $=this.#QJ({enabledOnly:!0});if(!$.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#p(),this.#a(this.#_+1,!0);break;case"ArrowUp":J.preventDefault(),this.#p(),this.#a(this.#_-1,!0);break;case"Home":J.preventDefault(),this.#a(0,!0);break;case"End":J.preventDefault(),this.#a($.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#p();let X=$[this.#_];if(!X)return;J.preventDefault(),this.#vJ(X);break}}}#mJ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#_=-1}#vJ(J){let Z=this.#v(J);this.setAttribute("value",Z),this.#$J(),this.#FJ(Z),this.open=!1}#o(){return this.#QJ({enabledOnly:!0})}#p(){let J=this.#o();if(!J.length){this.#_=-1;return}let Z=J.find((X)=>X===document.activeElement),$=Z?J.indexOf(Z):-1;this.#_=$>=0?$:this.#_}#a(J,Z=!1){let $=this.#o();if(!$.length)return;let X=(J%$.length+$.length)%$.length,Y=$[X],Q=document.activeElement!==Y;if(this.#_=X,Y?.focus(),Z&&Q)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#v(Y),bubbles:!0,composed:!0}))}#XJ(){if(!this.#X||!this.#Z)return;let J=Math.ceil(this.getBoundingClientRect().width),Z=Math.ceil(this.#Z.getBoundingClientRect().width),$=Math.max(J,Z,96),X=this.#m()?this.#C():null,Y=window.visualViewport?.width??window.innerWidth,Q=window.visualViewport?.height??window.innerHeight,W=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,K=Math.max(0,Math.min(Math.floor(20*W),Math.floor(Y-16))),j=Math.max(0,Math.floor(Q-16));if(this.#X.style.setProperty("box-sizing","border-box","important"),this.#X.style.setProperty("padding","0","important"),this.#X.style.setProperty("border","0","important"),this.#X.style.setProperty("margin","0","important"),X){let L=X.getBoundingClientRect().width;this.#X.style.setProperty("width","max-content","important"),this.#X.style.setProperty("min-width","0","important"),this.#X.style.setProperty("max-width",`${K}px`,"important");let q=this.#X.getBoundingClientRect().width,z=Math.min(K,Math.max($,q)),O=Math.max(L,z);this.#X.style.setProperty("width",`${O}px`,"important"),this.#X.style.setProperty("min-width",`${O}px`,"important"),this.#X.style.setProperty("max-width",`${O}px`,"important")}else this.#X.style.setProperty("width","max-content","important"),this.#X.style.setProperty("min-width",`${$}px`,"important"),this.#X.style.setProperty("max-width",`${K}px`,"important");this.#X.style.setProperty("max-height",`${j}px`,"important"),this.#X.style.setProperty("height","max-content","important"),this.#X.style.setProperty("overflow","hidden","important");let U=this.#X.getBoundingClientRect();if(U.height>j)this.#X.style.setProperty("height",`${j}px`,"important");if(!X&&U.width>K)this.#X.style.setProperty("width",`${K}px`,"important")}#TJ(){if(!this.#X||F(this,"disabled"))return;this.#d(),this.#w(),this.#Q=!1,this.#k=null,this.#F=null,this.#$J(),this.#XJ(),this.#X.open=!0,document.addEventListener("keydown",this.#f,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#_=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#XJ(),this.#I(),this.#XJ(),this.#fJ();let J=this.#x(),$=this.#o().findIndex((X)=>this.#v(X)===this.value);if($>=0)this.#a($);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#a(0);if(J?.syncOverflow?.(),!this.#LJ())this.#Q=!0,this.#PJ()})})}#RJ(){if(!this.#X)return;this.#Q=!1,this.#k=null,this.#F=null,document.removeEventListener("keydown",this.#f,!0),this.#X.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}A("fig-select",WJ);var PJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],AJ=["shorter","longer","increasing","decreasing"],x=new Set(["oklch","hsl"]);function C(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase();if(!PJ.includes($))$="srgb";Z.interpolationSpace=$;let X=String(Z.hueInterpolation??"shorter").toLowerCase();return Z.hueInterpolation=AJ.includes(X)?X:"shorter",Z}function u(J){let Z=C(J);return Z.interpolationSpace="srgb",delete Z.hueInterpolation,Z}function w(J){let Z=u(J),$={...Z,interpolationSpace:Z.interpolationSpace};if(x.has(Z.interpolationSpace))$.hueInterpolation=Z.hueInterpolation;else delete $.hueInterpolation;return $}function RJ(J){let Z=C(J);if(Z.interpolationSpace==="srgb")return"";if(x.has(Z.interpolationSpace))return`in ${Z.interpolationSpace} ${Z.hueInterpolation} hue`;return`in ${Z.interpolationSpace}`}function n(J){let Z=C(J);if(x.has(Z.interpolationSpace))return`${Z.interpolationSpace}-${Z.hueInterpolation||"shorter"}`;return Z.interpolationSpace}function S(J){let Z=String(J??"");for(let $ of x){let X=`${$}-`;if(Z.startsWith(X))return{interpolationSpace:$,hueInterpolation:Z.slice(X.length)||"shorter"}}return{interpolationSpace:Z||"srgb",hueInterpolation:"shorter"}}var yJ=0;class P extends HTMLElement{static#Z=[{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#X(J){let Z=P.#Z,$=Z.find((K)=>K.value===J);if($)return $;let X=S(J),Y=Z.find((K)=>K.space===X.interpolationSpace),Q=Y?.subtitle.split(" ")[0]??X.interpolationSpace.toUpperCase(),W=X.hueInterpolation;return{value:J,space:X.interpolationSpace,title:Y?.title??"Custom",subtitle:x.has(X.interpolationSpace)?`${Q} ${W.charAt(0).toUpperCase()}${W.slice(1)}`:Q}}#K=null;#U=null;#J=null;#V=`fig-fill-picker-dialog-${++yJ}`;#q="solid";anchorElement=null;#j="solid";#L="srgb";#W={h:0,s:0,v:85,a:1};#_="hex";#$={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#z={url:null,scaleMode:"fill",scale:50};#Y={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#Q={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#k=null;#F=!1;#O=null;#M={};#E={};#G=null;#N=null;#P=null;#T=null;#f=!1;#D=!1;#S=null;#c=null;#A=null;#y=null;#x=null;#h=0;#s=null;#b=null;#R=new Set;#w=new Set;#i=null;#g=null;constructor(){super();this.#s=this.#QJ.bind(this),this.#b=this.#v.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.#I(()=>{this.#wJ(),this.#AJ(),this.#B(),this.#aJ()})}disconnectedCallback(){if(this.#FJ({stopWebcam:!0}),this.#xJ(),this.#fJ(),this.#KJ(this.#U))this.#U.removeAttribute("selected");if(this.#K)this.#K.removeEventListener("click",this.#s),this.#K.removeEventListener("keydown",this.#b);this.#K=null,this.#U=null}#C(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#t(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#m(){return this.#j==="webcam"&&this.#t()==="live"&&this.#Q.live!==!1}#e(){return{live:this.#t()==="live"&&this.#Q.live!==!1,snapshot:this.#Q.snapshot??null,deviceId:this.#Q.deviceId??null,scaleMode:this.#Q.scaleMode||"fill",scale:this.#Q.scale??50,opacity:this.#Q.opacity??1}}#d(){let J=this.#Y.url??null;return{url:J,poster:this.#Y.poster??null,scaleMode:this.#Y.scaleMode||"fill",scale:this.#Y.scale??50,opacity:this.#Y.opacity??1,...J?{}:{missing:!0}}}#l(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Z,snapshot:$,...X}=J.webcam;if(Object.assign(this.#Q,X),typeof $==="string"&&$)this.#Q.snapshot=$;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#Q.snapshot=J.image.url;if(J.image.scaleMode)this.#Q.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#Q.scale=J.image.scale}}#r(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#Q.stream,deviceId:this.#Q.deviceId??null}}))}get webcamStream(){return this.#Q.stream}releaseWebcam(){this.#UJ()}#JJ(J){if(!J)return null;if(this.#Q.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#Q.snapshot),this.#w.delete(this.#Q.snapshot);return this.#Q.snapshot=URL.createObjectURL(J),this.#w.add(this.#Q.snapshot),this.#Q.snapshot}#u(J,Z,$){if(typeof J.getImageData!=="function")return!1;let X;try{X=J.getImageData(0,0,Z,$).data}catch{return!1}let Y=Math.max(1,Math.floor(Z*$/256)),Q=0,W=0,K=0;for(let j=0;j<X.length;j+=Y*4){let U=Math.max(X[j],X[j+1],X[j+2]);if(Q=Math.max(Q,U),K+=1,U>24)W+=1}if(!K)return!0;return Q<=40||W/K<0.04}async#zJ(J){let Z=[],$=this.#Q.stream?.getVideoTracks?.()?.[0];if($&&typeof ImageCapture==="function")try{if(this.#O?.track!==$)this.#O=new ImageCapture($);Z.push(await this.#O.grabFrame())}catch{this.#O=null}if(typeof createImageBitmap==="function")try{Z.push(await createImageBitmap(J))}catch{}return Z.push(J),Z.filter(Boolean)}async#_J(J,Z,$,X){let Y=await this.#zJ(Z);for(let Q of Y){try{J.drawImage(Q,0,0,$,X)}catch{continue}finally{Q.close?.()}if(!this.#u(J,$,X))return!0}return!1}#PJ(J){return new Promise((Z)=>{if(typeof J.requestVideoFrameCallback==="function"){let $=setTimeout(()=>Z(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout($),Z(!0)});return}setTimeout(()=>Z(!1),200)})}async#LJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Z=document.createElement("canvas");Z.width=J.videoWidth,Z.height=J.videoHeight;let $=Z.getContext("2d",{willReadFrequently:!0});if(!$)return null;if(!await this.#_J($,J,Z.width,Z.height))return null;let Y=await new Promise((Q)=>Z.toBlob(Q,"image/png"));return this.#JJ(Y)}#IJ(J){if(this.#j!=="webcam")return;let Z=this.#Q.stream;if(!Z)return;if(this.#k===Z&&this.#Q.snapshot){this.#B();return}if(this.#F)return;this.#F=!0;let $=(Y)=>{if(this.#F=!1,!Y||this.#j!=="webcam"||this.#Q.stream!==Z)return;this.#k=Z,this.#B()},X=async()=>{let Y=await this.#LJ(J);if(Y){$(Y);return}if(this.#j!=="webcam"||this.#Q.stream!==Z){this.#F=!1;return}return await this.#PJ(J),X()};X()}#I(J){let Z=requestAnimationFrame(()=>{if(this.#R.delete(Z),this.isConnected)J()});return this.#R.add(Z),Z}#xJ(){this.#R.forEach((J)=>cancelAnimationFrame(J)),this.#R.clear()}#fJ(){let J=new Set([this.#Q.snapshot,this.#Y.poster,this.#z.url].filter((Z)=>typeof Z==="string"&&Z.startsWith("blob:")));this.#w.forEach((Z)=>{if(!J.has(Z))URL.revokeObjectURL(Z)}),this.#w.clear(),J.forEach((Z)=>this.#w.add(Z))}#KJ(J){return J?.matches("fig-swatch, fig-chit")??!1}#bJ(J){return this.#KJ(J)||(J?.matches("[data-fig-fill-picker-swatch]")??!1)}#wJ(){let J=Array.from(this.children).find((Z)=>!Z.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#U=document.createElement("fig-swatch"),this.#U.setAttribute("background","#D9D9D9"),this.appendChild(this.#U),this.#K=this.#U;else if(this.#bJ(J))this.#U=J,this.#K=J;else this.#K=J,this.#U=null;if(this.#ZJ(),this.#K.removeEventListener("click",this.#s),this.#K.addEventListener("click",this.#s),this.#K.removeEventListener("keydown",this.#b),this.#K.addEventListener("keydown",this.#b),this.#KJ(this.#U))this.#I(()=>{let Z=this.#U.querySelector('input[type="color"]');if(Z)Z.remove();this.#ZJ()})}#HJ(){return this.getAttribute("aria-label")||"Fill picker"}#ZJ(){if(!this.#K)return;let J=this.#C(),Z=this.getAttribute("aria-labelledby");if(!this.#K.hasAttribute("role"))this.#K.setAttribute("role","button");if(this.#K.setAttribute("tabindex",J?"-1":"0"),this.#K.setAttribute("aria-disabled",J?"true":"false"),this.#K.setAttribute("aria-haspopup","dialog"),this.#K.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#K.setAttribute("aria-controls",this.#V),this.#K.removeAttribute("aria-hidden"),Z)this.#K.setAttribute("aria-labelledby",Z),this.#K.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#HJ()}`),this.#K.removeAttribute("aria-labelledby");else if(this.#K.removeAttribute("aria-labelledby"),!this.#K.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#HJ()}`);let $=this.getAttribute("aria-describedby");if($)this.#K.setAttribute("aria-describedby",$);else this.#K.removeAttribute("aria-describedby")}#QJ(J){if(this.#C())return;J.stopPropagation(),J.preventDefault(),this.#jJ()}#v(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#C())return;J.preventDefault(),J.stopPropagation(),this.#jJ()}#AJ(){let J=this.getAttribute("value");if(!J)return;let Z=["solid","gradient","image","video","webcam"];try{let $=JSON.parse(J);if($.type)this.#j=$.type;if($.color){if(typeof $.color==="string")this.#W=this.#NJ($.color);else if(typeof $.color==="object"&&$.color.h!==void 0)this.#W=$.color}let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:void 0;if(Number.isFinite(X))this.#W.a=Math.max(0,Math.min(1,X));if(this.#L="srgb",$.gradient)this.#$=u({...this.#$,...$.gradient});if($.image)this.#z={...this.#z,...$.image};if($.video){let Y=this.#Y.url;if(this.#Y={...this.#Y,...$.video},this.#Y.missing=!this.#Y.url,$.video.poster!=null&&$.video.poster!=="")this.#g=this.#Y.url;else if(this.#Y.url!==Y)this.#BJ();else this.#yJ()}if(this.#l($),$.type&&!Z.includes($.type)){let{type:Y,...Q}=$;this.#E[$.type]=Q}}catch($){if(J.startsWith("#")){this.#j="solid",this.#W=this.#NJ(J);return}if(BJ(J)){let X=this.#Y.url;if(this.#j="video",this.#Y.url=J.trim(),this.#Y.missing=!1,this.#Y.url!==X)this.#BJ();else this.#yJ()}}}#B(){if(!this.#U)return;let J,Z="cover",$="center";switch(this.#j){case"solid":J=this.#WJ(this.#W);break;case"gradient":J=this.#oJ();break;case"image":if(this.#z.url){J=p(this.#z.url);let X=this.#OJ(this.#z.scaleMode,this.#z.scale);Z=X.size,$=X.position}else J="";break;case"video":if(this.#Y.poster){J=p(this.#Y.poster);let X=this.#OJ(this.#Y.scaleMode,this.#Y.scale);Z=X.size,$=X.position}else J="";break;case"webcam":if(this.#Q.snapshot){J=p(this.#Q.snapshot);let X=this.#OJ(this.#Q.scaleMode,this.#Q.scale);Z=X.size,$=X.position}else J="";break;default:{J=(this.#M[this.#j]?.element||this.querySelector(`[slot="mode-${this.#j}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#U.setAttribute("background",J),this.#U.style.setProperty("--swatch-bg-size",Z),this.#U.style.setProperty("--swatch-bg-position",$),this.#j==="solid")this.#U.setAttribute("alpha",this.#W.a);else this.#U.removeAttribute("alpha")}#OJ(J,Z){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:`${Z}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#jJ(){if(this.#C())return;if(!this.#J)this.#hJ();else this.#J.anchor=this.anchorElement||this.#K;if(this.#MJ(this.#j,{emit:!1}),this.#A=JSON.stringify(this.value),this.#y=this.#A,this.#KJ(this.#U))this.#U.setAttribute("selected","true");this.#J.open=!0,this.#ZJ(),this.#I(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#I(()=>{this.#o(),this.#p()})})}open(){this.#jJ()}close(){if(this.#J)this.#J.open=!1,this.#ZJ()}#uJ(){if(!this.#J)return;for(let[J,{element:Z}]of Object.entries(this.#M)){let $=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((X)=>X.dataset.tab===J);if(!$)continue;while($.firstChild)Z.appendChild($.firstChild)}}#FJ({stopWebcam:J=!1}={}){if(this.#S)this.#S(),this.#S=null;if(this.#c?.disconnect(),this.#c=null,!J&&this.#m())this.#$J();else this.#UJ();if(!this.#J)return;this.#uJ(),this.#J.remove(),this.#J=null,this.#x=null,this.#A=null,this.#y=null,this.#G=null,this.#N=null,this.#P=null,this.#T=null,this.#D=!1,this.#ZJ()}#$J(){this.#h+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#UJ({emit:J=!0}={}){this.#h+=1;let Z=Boolean(this.#Q.stream);if(this.#Q.stream)this.#Q.stream.getTracks().forEach((X)=>X.stop()),this.#Q.stream=null;this.#k=null,this.#F=!1,this.#O=null;let $=this.#J?.querySelector(".fig-fill-picker-webcam-video");if($)$.srcObject=null;if(Z&&J)this.#r()}#hJ(){this.#M={},this.querySelectorAll('[slot^="mode-"]').forEach((z)=>{let O=z.getAttribute("slot").slice(5);this.#M[O]={element:z,label:z.getAttribute("label")||O.charAt(0).toUpperCase()+O.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#V,this.#J.setAttribute("aria-label",this.#HJ()),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.#K;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Z=["solid","gradient","image","video","webcam"],$={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},X=this.getAttribute("mode"),Y;if(X){if(Y=X.split(",").map((O)=>O.trim().toLowerCase()).filter((O)=>Z.includes(O)||this.#M[O]),Y.length===0)Y=[...Z]}else Y=[...Z];let Q={...$};for(let[z,{label:O}]of Object.entries(this.#M))Q[z]=O;if(!Y.includes(this.#j))this.#j=Y[0],this.#q=Y[0];let W;if(Y.length===1)W=_("h3",{className:"fig-fill-picker-type-label"},Q[Y[0]]);else{let z=_("fig-select-options",{},Y.map((O)=>_("fig-select-option",{value:O},Q[O])));W=_("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#j},z)}let K=Y.map((z)=>_("div",{className:"fig-fill-picker-tab","data-tab":z})),j=_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},I("close"));this.#J.replaceChildren(_("fig-header",{},[W,j]),_("fig-content",{},K)),document.body.appendChild(this.#J);for(let[z,{element:O}]of Object.entries(this.#M)){let M=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((G)=>G.dataset.tab===z);if(!M)continue;while(O.firstChild)M.appendChild(O.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:z,container:M}}))}let U=this.#J.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(O)this.#MJ(O)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let L=()=>{if(this.#KJ(this.#U))this.#U.removeAttribute("selected");if(this.#m())this.#$J();else this.#UJ();let z=JSON.stringify(this.value);if(this.#y!==null&&this.#y!==z)this.#n();this.#A=null,this.#y=null,this.#ZJ();let O=this.#K;this.#I(()=>{if(O?.isConnected)HTMLElement.prototype.focus.call(O)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",L);let q={solid:()=>this.#mJ(),gradient:()=>this.#JZ(),image:()=>this.#jZ(),video:()=>this.#qZ(),webcam:()=>this.#HZ()};for(let[z,O]of Object.entries(q))if(!this.#M[z]&&Y.includes(z))O();for(let z of Object.keys(this.#M)){if(Z.includes(z))continue;let O=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((M)=>M.dataset.tab===z);if(!O)continue;O.addEventListener("input",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#E[z]=M.detail;this.#H()}),O.addEventListener("change",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#E[z]=M.detail;this.#n()})}}#MJ(J,{emit:Z=!0}={}){let $=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!$)return;let X=this.#q;if(this.#q=J,this.#j=J,X==="webcam"&&J!=="webcam")this.#UJ();let Y=this.#J.querySelector(".fig-fill-picker-type");if(Y&&Y.value!==J)Y.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 W=this.#J.querySelector("fig-content");if(W)W.style.padding=this.#M[J]?"0":"";if(J==="gradient")this.#I(()=>{this.#YJ();let K=$.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#I(()=>{K?.refreshLayout?.()})});if(J==="video")this.#EJ({emit:!1});if(J==="webcam")this.#Q.live=this.#t()==="live",this.#x?.(this.#Q.deviceId);if(this.#B(),Z)this.#H()}#gJ(){if(!this.#J?.open)return;if(this.#MJ(this.#j,{emit:!1}),this.#o(),this.#p(),this.#VJ(),this.#P)this.#P.setAttribute("value",this.#W.h);if(this.#T)this.#T.setAttribute("value",this.#W.a*100),this.#T.setAttribute("color",this.#WJ(this.#W));this.#YJ();let J=this.#J.querySelector('[data-tab="image"]'),Z=J?.querySelector(".fig-fill-picker-scale-mode"),$=J?.querySelector(".fig-fill-picker-scale"),X=J?.querySelector(".fig-fill-picker-image-preview");if(Z)Z.value=this.#z.scaleMode;if($)$.setAttribute("value",this.#z.scale),$.style.display=this.#z.scaleMode==="tile"?"block":"none";if(X)this.#qJ(X);let Y=this.#J.querySelector('[data-tab="video"]'),Q=Y?.querySelector(".fig-fill-picker-scale-mode"),W=Y?.querySelector(".fig-fill-picker-video-preview");if(Q)Q.value=this.#Y.scaleMode;if(W)this.#kJ(W)}#mJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Z=this.getAttribute("alpha")!=="false",$=_("canvas",{width:"200",height:"200"}),X=_("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#WJ({...this.#W,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),Y=_("fig-preview",{className:"fig-fill-picker-color-area"},[$,X]),Q=_("fig-tooltip",{text:"Sample color"},_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},I("eyedropper"))),W=_("div",{className:`fig-fill-picker-sliders${Z?"":" is-hue-only"}`},[Q,_("fig-slider",{type:"hue",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#W.h}),Z?_("fig-slider",{type:"opacity",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#W.a*100,color:this.#WJ(this.#W)}):null]),K=_("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([q,z])=>_("fig-select-option",{value:q},z))),j=_("fig-field",{className:"fig-fill-picker-inputs"},[_("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#_},K),_("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(Y,W,j),this.#G=J.querySelector("canvas"),this.#N=J.querySelector("fig-handle"),this.#a(),this.#o(),this.#p(),this.#TJ(),this.#P=J.querySelector('fig-slider[type="hue"]'),this.#P.addEventListener("input",(q)=>{this.#W.h=parseFloat(q.target.value),this.#o(),this.#p(),this.#VJ(),this.#H()}),this.#P.addEventListener("change",()=>{this.#n()}),Z)this.#T=J.querySelector('fig-slider[type="opacity"]'),this.#T.addEventListener("input",(q)=>{this.#W.a=parseFloat(q.target.value)/100,this.#VJ(),this.#H()}),this.#T.addEventListener("change",()=>{this.#n()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(q)=>{let z=typeof q.detail==="string"?q.detail:q.target?.value;if(!z)return;this.#_=z,this.#RJ()}),this.#RJ();let L=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)L.addEventListener("click",async()=>{try{let z=await new EyeDropper().open();this.#W={...this.#NJ(z.sRGBHex),a:this.#W.a},this.#o(),this.#p(),this.#VJ(),this.#H()}catch(q){}});else L.setAttribute("disabled",""),L.title="EyeDropper not supported in this browser"}#vJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Z=J.querySelector("canvas");if(Z){let $=document.createElement("canvas");$.width=Z.width,$.height=Z.height,Z.replaceWith($),this.#G=$,this.#TJ()}this.#o(),this.#p()}this.#CJ(),this.#H()}#o(){if(!this.#G&&this.#J)this.#G=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#G)return;let J=this.#L==="display-p3"?"display-p3":"srgb",Z=this.#G.getContext("2d",{colorSpace:J});if(!Z)return;let $=this.#G.width,X=this.#G.height;Z.clearRect(0,0,$,X);let Y=this.#W.h,Q=this.#L==="display-p3",W=Z.createLinearGradient(0,0,$,0);if(Q){W.addColorStop(0,"color(display-p3 1 1 1)");let j=r(Y,100,50),U=i(j.r,j.g,j.b,{from:"srgb",to:"display-p3"});W.addColorStop(1,`color(display-p3 ${U.r/255} ${U.g/255} ${U.b/255})`)}else W.addColorStop(0,"#FFFFFF"),W.addColorStop(1,`hsl(${Y}, 100%, 50%)`);Z.fillStyle=W,Z.fillRect(0,0,$,X);let K=Z.createLinearGradient(0,0,0,X);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Z.fillStyle=K,Z.fillRect(0,0,$,X)}#p(J=0){if(!this.#N||!this.#G)return;this.#a();let Z=this.#G.getBoundingClientRect();if((Z.width===0||Z.height===0)&&J<5){this.#I(()=>this.#p(J+1));return}let $=Math.max(0,Math.min(100,this.#W.s)),X=Math.max(0,Math.min(100,100-this.#W.v));this.#N.setAttribute("value",`${$}% ${X}%`),this.#N.setAttribute("color",this.#WJ({...this.#W,a:1}))}#a(){if(!this.#N)return;this.#N.setAttribute("aria-valuenow",String(Math.round(this.#W.v))),this.#N.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#W.s)}%, brightness ${Math.round(this.#W.v)}%`),this.#N.removeAttribute("aria-pressed")}#XJ(J,Z,$={}){let{updateHandle:X=!0,emitInput:Y=!0,emitChange:Q=!1}=$;if(this.#W.s=Math.max(0,Math.min(100,J*100)),this.#W.v=Math.max(0,Math.min(100,(1-Z)*100)),this.#N)this.#N.setAttribute("color",this.#WJ({...this.#W,a:1})),this.#a();if(X)this.#p();if(this.#VJ(),Y)this.#H();if(Q)this.#n()}#TJ(){if(this.#S)this.#S(),this.#S=null;if(!this.#G||!this.#N)return;let J=this.#G.parentElement||this.#G,Z=this.#N,$=!1,X=(U,L={})=>{let q=J.getBoundingClientRect();if(q.width===0||q.height===0)return;let z=Math.max(0,Math.min(U.clientX-q.left,q.width)),O=Math.max(0,Math.min(U.clientY-q.top,q.height));this.#XJ(z/q.width,O/q.height,L)},Y=(U)=>{if(U.button!==0)return;if(U.target===Z||Z.contains(U.target))return;$=!0,this.#f=!0,J.setPointerCapture(U.pointerId),X(U,{updateHandle:!0,emitInput:!0})},Q=(U)=>{if(!$)return;if(U.buttons===0){W();return}X(U,{updateHandle:!0,emitInput:!0})},W=()=>{if(!$)return;$=!1,this.#f=!1,this.#n()},K=(U)=>{this.#f=!0;let L=U.detail?.px,q=U.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(q))return;Z.setAttribute("value",`${L*100}% ${q*100}%`),this.#XJ(L,q,{updateHandle:!1,emitInput:!0})},j=(U)=>{let L=U.detail?.px,q=U.detail?.py;if(Number.isFinite(L)&&Number.isFinite(q))Z.setAttribute("value",`${L*100}% ${q*100}%`),this.#XJ(L,q,{updateHandle:!1,emitInput:!1});this.#f=!1,this.#n()};J.addEventListener("pointerdown",Y),J.addEventListener("pointermove",Q),J.addEventListener("pointerup",W),J.addEventListener("pointercancel",W),J.addEventListener("lostpointercapture",W),Z.addEventListener("input",K),Z.addEventListener("change",j),this.#S=()=>{J.removeEventListener("pointerdown",Y),J.removeEventListener("pointermove",Q),J.removeEventListener("pointerup",W),J.removeEventListener("pointercancel",W),J.removeEventListener("lostpointercapture",W),Z.removeEventListener("input",K),Z.removeEventListener("change",j),this.#f=!1}}#RJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=(K,j)=>_("fig-tooltip",{text:K},j),$=(K,j,U,L,q,z)=>_("fig-input-number",{className:K,"aria-label":j,min:U,max:L,step:q,units:z}),X=this.getAttribute("alpha")!=="false",Y=()=>X?Z("Alpha",$("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Q=(K,j="")=>_("div",{className:["input-combo",j].filter(Boolean).join(" ")},K),W;switch(this.#_){case"rgb":W=Q([Z("Red",$("fig-fill-picker-ci-r","Red",0,255)),Z("Green",$("fig-fill-picker-ci-g","Green",0,255)),Z("Blue",$("fig-fill-picker-ci-b","Blue",0,255)),Y()]);break;case"hsl":W=Q([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Lightness",$("fig-fill-picker-ci-l","Lightness",0,100)),Y()]);break;case"hsb":W=Q([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Brightness",$("fig-fill-picker-ci-v","Brightness",0,100)),Y()]);break;case"lab":W=Q([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Green-Red axis",$("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Z("Blue-Yellow axis",$("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),Y()]);break;case"lch":W=Q([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Chroma",$("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Z("Hue",$("fig-fill-picker-ci-okh","Hue",0,360)),Y()]);break;case"css":W=_("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=_("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});W=X?_("fig-input-combo",{className:"input-combo fig-fill-picker-ci-hex-row",full:!0},[K,Y()]):K}break}J.replaceChildren(W),this.#nJ(),this.#I(()=>this.#VJ())}#nJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=()=>{if(this.#f)return;let Y=this.#eJ();if(!Y)return;let Q=Number.isFinite(Y.a)?Y.a:this.#W.a;if(this.#W={...Y,a:Q},this.#o(),this.#p(),this.#P)this.#P.setAttribute("value",this.#W.h);if(this.#T&&Number.isFinite(Y.a))this.#T.setAttribute("value",this.#W.a*100);this.#H()},$=()=>this.#n();J.querySelectorAll("fig-input-number, fig-input-text").forEach((Y)=>{Y.addEventListener("input",Z),Y.addEventListener("change",$)})}#tJ(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Z=parseFloat(J.value);if(!Number.isFinite(Z))return;return Math.max(0,Math.min(1,Z/100))}#eJ(){let J=(X)=>this.#J?.querySelector(`.${X}`),Z=(X)=>parseFloat(J(X)?.value??0),$=(X)=>{if(!X)return null;let Y=this.#tJ();return{...X,a:Y??X.a??this.#W.a}};switch(this.#_){case"rgb":return $(this.#GJ({r:Z("fig-fill-picker-ci-r"),g:Z("fig-fill-picker-ci-g"),b:Z("fig-fill-picker-ci-b")}));case"hsl":{let X=this.#fZ({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),l:Z("fig-fill-picker-ci-l")});return $(this.#GJ(X))}case"hsb":return $({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),v:Z("fig-fill-picker-ci-v")});case"lab":{let X=this.#DZ({l:Z("fig-fill-picker-ci-okl")/100,a:Z("fig-fill-picker-ci-oka"),b:Z("fig-fill-picker-ci-okb")});return $(this.#GJ(X))}case"lch":{let X=this.#CZ({l:Z("fig-fill-picker-ci-okl")/100,c:Z("fig-fill-picker-ci-okc"),h:Z("fig-fill-picker-ci-okh")});return $(this.#GJ(X))}case"css":{let X=J("fig-fill-picker-ci-css");if(!X)return null;return this.#BZ(X.value)}default:{let X=J("fig-fill-picker-ci-hex");if(!X)return null;let Y=X.value.replace(/^#/,"");if(Y.length===3)Y=Y[0]+Y[0]+Y[1]+Y[1]+Y[2]+Y[2];if(Y.length===8){let Q=parseInt(Y.slice(6,8),16)/255;if(Y=Y.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(Y))return null;return{...this.#NJ(`#${Y}`),a:Q}}if(Y.length!==6||!/^[0-9a-fA-F]{6}$/.test(Y))return null;return $(this.#NJ(`#${Y}`))}}}#VJ(){if(!this.#J)return;let J=this.#WJ(this.#W),Z=this.#lJ(this.#W),$=(Y)=>this.#J.querySelector(`.${Y}`),X=(Y,Q)=>{let W=$(Y);if(W)W.setAttribute("value",Q)};switch(this.#_){case"rgb":X("fig-fill-picker-ci-r",Z.r),X("fig-fill-picker-ci-g",Z.g),X("fig-fill-picker-ci-b",Z.b);break;case"hsl":{let Y=this.#NZ(Z);X("fig-fill-picker-ci-h",Math.round(Y.h)),X("fig-fill-picker-ci-s",Math.round(Y.s)),X("fig-fill-picker-ci-l",Math.round(Y.l));break}case"hsb":X("fig-fill-picker-ci-h",Math.round(this.#W.h)),X("fig-fill-picker-ci-s",Math.round(this.#W.s)),X("fig-fill-picker-ci-v",Math.round(this.#W.v));break;case"lab":{let Y=this.#FZ(Z);X("fig-fill-picker-ci-okl",Math.round(Y.l*100)),X("fig-fill-picker-ci-oka",+Y.a.toFixed(3)),X("fig-fill-picker-ci-okb",+Y.b.toFixed(3));break}case"lch":{let Y=this.#TZ(Z);X("fig-fill-picker-ci-okl",Math.round(Y.l*100)),X("fig-fill-picker-ci-okc",+Y.c.toFixed(3)),X("fig-fill-picker-ci-okh",Math.round(Y.h));break}case"css":X("fig-fill-picker-ci-css",this.#kZ(this.#W));break;default:X("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#_!=="css"){let Y=Math.round(this.#W.a*1000)/10;X("fig-fill-picker-ci-a",Number.isInteger(Y)?Y:+Y.toFixed(1))}if(this.#T)this.#T.setAttribute("color",J);this.#B()}#JZ(){{let U=this.#J.querySelector('[data-tab="gradient"]'),L=document.createElement("fig-gradient-editor");L.value=w(this.#$),L.setAttribute("color-space",this.#L),L.toggleAttribute("disabled",this.#C()),L.pickerAnchor=this.#J;let q=(z)=>{if(z.stopPropagation(),!z.detail?.gradient)return;if(this.#$=u(z.detail.gradient),this.#B(),z.type==="change")this.#n();else this.#H()};L.addEventListener("input",q),L.addEventListener("change",q),U.replaceChildren(L);return}let J=this.#J.querySelector('[data-tab="gradient"]'),Z=_("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#$.type,variant:"ghost"},_("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,L])=>_("fig-select-option",{value:U},L)))),$=(U,L,q)=>_("fig-tooltip",{text:U},_("fig-button",{icon:!0,variant:"ghost",className:L,"aria-label":U},I(q))),X=_("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[$("Flip gradient","fig-fill-picker-gradient-flip","swap"),$("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),Y=_("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[Z,X]),Q=_("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:w(this.#$)})}),W=_("fig-preview",{className:"fig-fill-picker-gradient-preview"},Q),K=_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},I("add")),j=_("div",{className:"fig-fill-picker-gradient-stops"},[_("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[_("h3",{},"Stops"),K]),_("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(Y,W,j),this.#YJ(),this.#ZZ(J)}#PZ(){let J=({value:X,title:Y,subtitle:Q,advanced:W=!1})=>_("fig-select-option",{value:X,label:`${Y} — ${Q}`,className:W?"fig-fill-picker-gradient-interpolation-advanced":null},[_("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),_("span",{className:"fig-fill-picker-gradient-interpolation-label"},[_("span",{className:"fig-fill-picker-gradient-interpolation-title"},Y),_("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Q)])]),Z=_("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),$=P.#Z;return[...$.filter((X)=>!X.advanced).map(J),Z,...$.filter((X)=>X.advanced).map(J)]}#ZZ(J){let Z=(H)=>typeof H.detail==="string"?H.detail:H.target?.value,$=J.querySelector(".fig-fill-picker-gradient-bar-input"),X=(H)=>{if(!$)return;this.#D=!0;try{$.value={type:"gradient",gradient:w(H)}}finally{this.#D=!1}},Y=()=>{X(this.#$)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(H)=>{let V=Z(H);if(!V)return;this.#$.type=V,this.#YJ(),this.#H()});let W=J.querySelector(".fig-fill-picker-gradient-space"),K=W?.querySelector("fig-select-options"),j="fig-fill-picker-gradient-interpolation-collapsed",U=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),L=()=>Boolean(K?.classList.contains(j)),q=(H)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",H?"Show all color interpolation options":"Scroll down")},z=()=>{if(!K)return;K.classList.remove(j),K.style.removeProperty("max-height"),q(!1),K.syncOverflow?.()},O=()=>{if(!K||!U)return;K.style.removeProperty("max-height"),K.classList.add(j),K.scrollTop=0;let H=K.getBoundingClientRect().top,V=U.getBoundingClientRect().top,T=K.querySelector(".fig-overflow-end")?.offsetHeight||0,R=V-H;if(R>0)K.style.maxHeight=`${Math.round(R+T)}px`;q(!0),K.syncOverflow?.()},M=(H)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${H}"]`)),G=()=>{if(M(n(this.#$)))z();else O()};if(K?.addEventListener("click",(H)=>{if(!L())return;if(!H.target?.closest?.(".fig-overflow-end"))return;H.preventDefault(),H.stopPropagation(),z()},!0),K?.addEventListener("focusin",(H)=>{if(!L())return;if(H.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))z()}),K?.addEventListener("scroll",()=>{if(L()&&K.scrollTop!==0)K.scrollTop=0}),W?.querySelectorAll("fig-select-option").forEach((H)=>{let V=()=>{let T=S(H.getAttribute("value")||"srgb");X(C({...this.#$,...T}))};H.addEventListener("pointerenter",V),H.addEventListener("pointerleave",()=>{if(document.activeElement!==H)Y()}),H.addEventListener("focus",V),H.addEventListener("blur",()=>{if(!H.matches(":hover"))Y()})}),this.#c?.disconnect(),W)this.#c=new MutationObserver(()=>{if(!W.hasAttribute("open"))Y();else this.#I(G)}),this.#c.observe(W,{attributes:!0,attributeFilter:["open"]});let B=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(B?.addEventListener("change",(H)=>{let V=typeof H.detail==="string"?H.detail:H.target?.value;if(!V)return;let T=S(V);this.#$=C({...this.#$,...T}),this.#YJ(),this.#H()}),B?.querySelectorAll("fig-segment").forEach((H)=>{let V=()=>{X(C({...this.#$,...S(H.getAttribute("value")||"srgb")}))};H.addEventListener("pointerenter",V),H.addEventListener("pointerleave",Y)}),W?.addEventListener("change",(H)=>{let V=Z(H);if(!V)return;let T=S(V);this.#$=C({...this.#$,...T}),this.#YJ(),this.#H()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#$.angle=(Number(this.#$.angle)+90)%360,this.#YJ(),this.#H()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#$.stops.forEach((H)=>{H.position=100-H.position}),this.#$.stops.sort((H,V)=>H.position-V.position),this.#YJ(),this.#H()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#$.stops.push({position:50,color:"#888888",opacity:100}),this.#$.stops.sort((V,T)=>V.position-T.position),this.#YJ(),this.#H()}),$){let H=(V)=>{if(V.stopPropagation(),this.#D)return;let T=V.detail;if(!T?.gradient)return;this.#$=u({...this.#$,...T.gradient}),this.#B(),this.#DJ(),this.#iJ()};$.addEventListener("input",(V)=>{H(V),this.#H()}),$.addEventListener("change",(V)=>{H(V),this.#n()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(H)=>{this.#QZ(H)})}#pJ(J){let Z=String(J.color||"#888888").replace(/^#/,"").slice(0,6),$=J.opacity??100;if($>=100)return`#${Z}`;let X=Math.round($/100*255).toString(16).padStart(2,"0");return`#${Z}${X}`}#$Z(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#cJ(J.hexOpaque);let Z=J.value;if(typeof Z==="string"&&Z.startsWith("#"))return this.#cJ(Z.length>7?Z.slice(0,7):Z);let $=J.querySelector('fig-input-text:not([type="number"])'),X=String($?.value??$?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(X))return`#${X.toUpperCase()}`;let Y=J.getAttribute("value");if(typeof Y==="string"&&Y.startsWith("#"))return this.#cJ(Y.length>7?Y.slice(0,7):Y);return"#888888"}#cJ(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Z))return"#888888";return`#${Z.toUpperCase()}`}#XZ(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=parseFloat(Z?.value??Z?.getAttribute("value")??"0")||0,Y=this.#$Z($),Q=100;if($ instanceof HTMLElement&&$.rgba?.a!==void 0)Q=Math.round($.rgba.a*100);else{let W=parseInt(J.dataset.index,10);if(!isNaN(W)&&this.#$.stops[W])Q=this.#$.stops[W].opacity??100}return{position:X,color:Y,opacity:Q}}#sJ(J){let Z=parseInt(J.dataset.index,10);if(isNaN(Z)||Z<0||Z>=this.#$.stops.length)return;let $={...this.#$.stops[Z],...this.#XZ(J)};this.#$.stops[Z]=$,this.#YZ(J,$)}#YZ(J,Z){let $=J.querySelector(".fig-fill-picker-stop-position");if($)$.setAttribute("value",String(Z.position));let X=J.querySelector(".fig-fill-picker-stop-color");if(X)X.setAttribute("value",this.#pJ(Z))}#QZ(J){let{oldIndex:Z,newIndex:$}=J.detail??{};if(Z==null||$==null||Z===$||Z<0||$<0||Z>=this.#$.stops.length||$>=this.#$.stops.length)return;let Y=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Y.forEach((W)=>this.#sJ(W));let[Q]=this.#$.stops.splice(Z,1);this.#$.stops.splice($,0,Q),Y.forEach((W,K)=>{W.dataset.index=String(K)}),this.#D=!0;try{this.#DJ(),this.#CJ(),this.#H()}finally{this.#D=!1}}#YJ(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#$=u(this.#$);let Z=J.querySelector("fig-gradient-editor");if(Z){Z.value=this.#$,Z.setAttribute("color-space",this.#L),Z.toggleAttribute("disabled",this.#C()),Z.pickerAnchor=this.#J;return}let $=n(this.#$),X=J.querySelector(".fig-fill-picker-gradient-space");if(X)X.value=$;let Y=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(Y){let Q=P.#X($),W=Y.querySelector(`fig-segment[value="${$}"]`)||Y.querySelector(`fig-segment[data-space="${Q.space}"]`);if(W){let K=`${Q.title} — ${Q.subtitle}`;W.setAttribute("value",$),W.setAttribute("aria-label",K);let j=W.closest("fig-tooltip");if(j)j.setAttribute("text",K);Y.value=$}}this.#DJ(),this.#CJ(),this.#iJ()}#WZ(){let J=Array.isArray(this.#$.stops)?[...this.#$.stops].sort((Z,$)=>(Z.position??0)-($.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Z)=>({color:String(Z.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Z.position??0}))}#DJ(){if(!this.#J)return;let J=this.#WZ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Z)=>{let $=Z.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",X=S($),Y={type:"linear",stops:J,interpolationSpace:X.interpolationSpace};if(x.has(X.interpolationSpace))Y.hueInterpolation=X.hueInterpolation;Z.value={type:"gradient",gradient:Y}})}#CJ(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"] > fig-gradient-editor');if(J){J.value=this.#$,J.setAttribute("color-space",this.#L),this.#B();return}let Z=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(Z)this.#D=!0,Z.value={type:"gradient",gradient:w(this.#$)},this.#D=!1;this.#B()}#iJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Z=J?.querySelector("fig-reorder");if(!J||!Z)return;let $=Z.querySelectorAll(".fig-fill-picker-gradient-stop-row");if($.length===this.#$.stops.length){this.#$.stops.forEach((X,Y)=>{let Q=$[Y];Q.dataset.index=Y;let W=Q.querySelector(".fig-fill-picker-stop-position");if(W)W.setAttribute("value",X.position);let K=Q.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#pJ(X));let j=Q.querySelector(".fig-fill-picker-stop-remove");if(j)if(this.#$.stops.length<=2)j.setAttribute("disabled","");else j.removeAttribute("disabled")});return}this.#KZ(J)}#KZ(J){let Z=J.querySelector("fig-reorder");if(!Z)return;let $=this.#$.stops.map((X,Y)=>_("fig-property",{className:"fig-fill-picker-gradient-stop-row","data-index":Y,leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},_("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[_("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%"}),_("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.#pJ(X)})])));Z.replaceChildren(...$),Z.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{X.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#sJ(X),this.#DJ(),this.#CJ(),this.#H()});let Y=X.querySelector(".fig-fill-picker-stop-color"),Q=Y.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#J;else this.#I(()=>{let j=Y.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#J});let W=()=>{this.#sJ(X),this.#D=!0;try{this.#DJ(),this.#CJ(),this.#H()}finally{this.#D=!1}};Y.addEventListener("input",W),Y.addEventListener("change",W);let K=X.querySelector(':scope > [data-fig-property-action="remove"]');K.classList.add("fig-fill-picker-stop-remove"),K.setAttribute("aria-label","Remove gradient stop"),K.toggleAttribute("disabled",this.#$.stops.length<=2),X.addEventListener("remove",(j)=>{j.stopPropagation();let U=parseInt(X.dataset.index,10);if(this.#$.stops.length>2)this.#$.stops.splice(U,1),this.#YJ(),this.#H()})})}#AZ(J,Z=!0){let $=C({...this.#$,interpolationSpace:J??this.#$.interpolationSpace}),X=this.#L==="display-p3",Y=$.stops.map((K)=>{let j=(K.opacity??100)/100;return`${X?this.#GZ(K.color,j):this.#MZ(K.color,j)} ${K.position}%`}).join(", "),Q=RJ($),W=Z&&Q?` ${Q}`:"";switch($.type){case"linear":return`linear-gradient(${$.angle}deg${W}, ${Y})`;case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%${W}, ${Y})`;case"angular":return`conic-gradient(from ${$.angle}deg${W}, ${Y})`;default:return`linear-gradient(${$.angle}deg${W}, ${Y})`}}static#rJ=new Map;#RZ(J){let Z=P.#rJ.get(J);if(Z!==void 0)return Z;let $=document.createElement("div");$.style.background=J;let X=!!$.style.background;return P.#rJ.set(J,X),X}#oJ(){return v(this.#$,{colorSpace:this.#L})}#jZ(){let J=this.#J.querySelector('[data-tab="image"]'),Z=_("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#z.scaleMode},_("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Q,W])=>_("fig-select-option",{value:Q},W)))),$=_("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#z.scale,units:"%"});if(this.#z.scaleMode!=="tile")$.style.display="none";let X=_("fig-field",{className:"fig-fill-picker-media-header"},[Z,$]),Y=_("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,Y),this.#UZ(J)}#UZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-scale"),X=J.querySelector(".fig-fill-picker-image-preview");Z.addEventListener("change",(Y)=>{let Q=typeof Y.detail==="string"?Y.detail:Y.target?.value;if(!Q)return;this.#z.scaleMode=Q,$.style.display=Q==="tile"?"block":"none",this.#qJ(X),this.#B(),this.#H()}),$.addEventListener("input",(Y)=>{this.#z.scale=parseFloat(Y.target.value)||100,this.#qJ(X),this.#B(),this.#H()}),X.addEventListener("loaded",(Y)=>{let Q=Y.detail?.src||X.src;if(!Q)return;let W=Q!==this.#z.url;if(this.#z.url=Q,this.#qJ(X),this.#B(),W)this.#H();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:Y.detail??{src:Q}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#z.url=null,this.#qJ(X),this.#B(),this.#H()}),this.#qJ(X)}#qJ(J){if(!this.#z.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.#z.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#z.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.#z.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#z.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#kJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#Y.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#Y.url),this.#Y.poster)J.setAttribute("poster",this.#Y.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#Y.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.#Y.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#qZ(){let J=this.#J.querySelector('[data-tab="video"]'),Z=_("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#Y.scaleMode},_("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([Y,Q])=>_("fig-select-option",{value:Y},Q)))),$=_("fig-field",{className:"fig-fill-picker-media-header"},Z),X=_("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($,X),this.#LZ(J),this.#EJ({emit:!1})}#BJ(){if(this.#Y.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#Y.poster),this.#w.delete(this.#Y.poster);this.#Y.poster=null,this.#g=null}#yJ(){if(!this.#Y.poster)return;if(this.#g&&this.#g===this.#Y.url)return;this.#BJ()}#dJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#kJ(J)}#EJ({emit:J=!1}={}){if(this.#Y.url){if(this.#Y.missing=!1,this.#yJ(),!this.#Y.poster)this.#SJ(this.#Y.url);else this.#dJ();return}let Z=this.getAttribute("default-video");if(!Z){this.#Y.missing=!0;return}if(this.#Y.url=Z,this.#Y.missing=!1,this.#dJ(),this.#SJ(Z),J)this.#H()}#aJ(){if(this.#j!=="video")return;let J=this.#Y.url;if(!J)return;if(this.#yJ(),this.#Y.poster)return;this.#SJ(J)}async#zZ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Z)=>J.requestVideoFrameCallback(()=>Z())),new Promise((Z)=>setTimeout(Z,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#_Z(J){let Z=await this.#zZ(J),$=Z?.width||J.videoWidth,X=Z?.height||J.videoHeight;if(!$||!X)return Z?.close?.(),null;let Y=typeof OffscreenCanvas==="function"?new OffscreenCanvas($,X):Object.assign(document.createElement("canvas"),{width:$,height:X}),Q=Y.getContext("2d");if(!Q)return Z?.close?.(),null;try{Q.drawImage(Z||J,0,0,$,X)}finally{Z?.close?.()}return Y.convertToBlob?Y.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((W)=>Y.toBlob(W,"image/jpeg",0.85))}async#SJ(J,{emit:Z=!1}={}){if(!J||this.#i===J)return;this.#i=J;let $=document.createElement("video");$.muted=!0,$.playsInline=!0,$.preload="auto",$.crossOrigin="anonymous";try{if(await new Promise((Y,Q)=>{let W=()=>Q(Error("video poster failed"));$.addEventListener("error",W,{once:!0}),$.addEventListener("loadeddata",Y,{once:!0}),$.src=J}),!$.videoWidth||!$.videoHeight)return;let X=await this.#_Z($);if(!X||this.#Y.url!==J)return;if(this.#BJ(),this.#Y.poster=URL.createObjectURL(X),this.#g=J,this.#w.add(this.#Y.poster),this.#B(),this.#dJ(),Z)this.#H()}catch{}finally{if($.removeAttribute("src"),$.load(),this.#i===J)this.#i=null}}#LZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-video-preview");Z.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#Y.scaleMode=Y,this.#kJ($),this.#B(),this.#H()}),$.addEventListener("loaded",(X)=>{let Y=X.detail?.src||$.src;if(!Y)return;let Q=Y!==this.#Y.url;if(Q)this.#BJ();if(this.#Y.url=Y,this.#Y.missing=!1,this.#kJ($),this.#SJ(Y),this.#B(),Q)this.#H();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),$.addEventListener("change",()=>{if($.src)return;this.#Y.url=null,this.#BJ(),this.#EJ(),this.#kJ($),this.#B(),this.#H()}),this.#kJ($)}#HZ(){let J=this.#J.querySelector('[data-tab="webcam"]'),Z=_("fig-field",{className:"fig-fill-picker-webcam-camera"},_("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Z.style.display="none";let $=_("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});$.muted=!0;let X=_("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},_("span",{},"Camera access required")),Y=_("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[$,X]),Q=_("div",{className:"fig-fill-picker-webcam-controls"},_("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Z,Y,Q),this.#OZ(J)}#OZ(J){let Z=J.querySelector(".fig-fill-picker-webcam-video"),$=J.querySelector(".fig-fill-picker-webcam-status"),X=J.querySelector(".fig-fill-picker-webcam-capture"),Y=J.querySelector(".fig-fill-picker-webcam-camera"),Q=J.querySelector(".fig-fill-picker-camera-select"),W=(q)=>{if(q)X.removeAttribute("disabled");else X.setAttribute("disabled","")},K=()=>{let q=!!this.#Q.stream&&Z.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Z.videoWidth>0&&Z.videoHeight>0;if(W(q),q)$.querySelector("span").textContent="Camera ready",$.style.display="none",this.#IJ(Z)};Z.addEventListener("loadedmetadata",K),Z.addEventListener("canplay",K),Z.addEventListener("playing",K);let j=(q)=>{this.#Q.stream=q,Z.srcObject=q,Z.muted=!0,Z.playsInline=!0,Z.style.display="block";let z=Z.play?.();if(z?.catch)z.catch(()=>{});K()},U=async(q,z)=>{let O=await navigator.mediaDevices.enumerateDevices();if(q!=null&&q!==this.#h)return;let M=O.filter((G)=>G.kind==="videoinput");if(M.length>1){Y.style.display="";let G=Q.querySelector(":scope > fig-select-options");if(!G)G=document.createElement("fig-select-options"),Q.append(G);if(G.replaceChildren(),M.forEach((B,f)=>{let H=document.createElement("fig-select-option");H.value=B.deviceId;let V=B.label||(M.length>1?`Camera ${f+1}`:"Camera");H.textContent=V.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(T,R)=>{return` ${/^\d+$/.test(R)?Number.parseInt(R,10).toString():R.replace(/^0+/,"")||"0"}`}),G.append(H)}),z)Q.value=z}else Y.style.display="none",Q.querySelector(":scope > fig-select-options")?.replaceChildren()},L=async(q=null)=>{let z=q||this.#Q.deviceId||null,O=this.#Q.stream,M=O?.getTracks?.().filter((B)=>B.readyState!=="ended")??[];if(O&&M.length){let B=O.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#Q.deviceId||null;if(!z||z===B){j(O),this.#r(),U(null,z||B);return}}this.#UJ({emit:Boolean(O)});let G=this.#h;W(!1),$.querySelector("span").textContent="Starting camera",$.style.display="flex";try{let B={video:z?{deviceId:{exact:z}}:!0},f=await navigator.mediaDevices.getUserMedia(B);if(G!==this.#h||!this.isConnected||this.#q!=="webcam"){f.getTracks().forEach((V)=>V.stop());return}let H=f.getVideoTracks?.()?.[0];this.#Q.deviceId=z||H?.getSettings?.()?.deviceId||null,this.#Q.live=this.#t()==="live",j(f),this.#r(),await U(G,z)}catch(B){if(G!==this.#h)return;console.error("Webcam error:",B.name,B.message);let f="Camera access denied";if(B.name==="NotAllowedError")f="Camera permission denied";else if(B.name==="NotFoundError")f="No camera found";else if(B.name==="NotReadableError")f="Camera in use by another app";else if(B.name==="OverconstrainedError")f="Camera constraints not supported";else if(!window.isSecureContext)f="Camera requires secure context";$.replaceChildren();let H=document.createElement("span");H.textContent=f,$.appendChild(H),$.style.display="flex",Z.style.display="none",W(!1)}};this.#x=L,Q.addEventListener("change",(q)=>{let z=typeof q.detail==="string"?q.detail:q.target?.value;if(!z||z===this.#Q.deviceId)return;L(z)}),X.addEventListener("click",async()=>{if(!this.#Q.stream)return;let q=await this.#LJ(Z);if(!q)return;this.#z.url=q,this.#Q.live=!1;let z=this.#J.querySelector(".fig-fill-picker-image-preview");if(z)this.#qJ(z);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((M)=>M.dataset.tab==="image"))this.#MJ("image");else this.#B(),this.#H();this.#n()})}#lJ(J){return _J(J.h,J.s,J.v)}#GJ(J){return{...MJ(J.r,J.g,J.b),a:1}}#WJ(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Z=this.#lJ(J),$=(X)=>{return(isNaN(X)?217:Math.max(0,Math.min(255,Math.round(X)))).toString(16).padStart(2,"0")};return`#${$(Z.r)}${$(Z.g)}${$(Z.b)}`}#NJ(J){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return this.#GJ({r:Z,g:$,b:X})}#MZ(J,Z=1){let $=parseInt(J.slice(1,3),16),X=parseInt(J.slice(3,5),16),Y=parseInt(J.slice(5,7),16);return`rgba(${$}, ${X}, ${Y}, ${Z})`}#VZ(J){let Z=Math.max(0,Math.min(1,Number(J)||0)),$=Math.round(Z*1000)/1000;return String($)}#kZ(J=this.#W){let Z=this.#lJ(J);return`rgba(${Z.r}, ${Z.g}, ${Z.b}, ${this.#VZ(J.a)})`}#BZ(J){let Z=String(J??"").trim();if(!Z)return null;let $=Z.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if($){let Y=$[1];if(Y.length===3)Y=Y[0]+Y[0]+Y[1]+Y[1]+Y[2]+Y[2];let Q=1;if(Y.length===8)Q=parseInt(Y.slice(6,8),16)/255,Y=Y.slice(0,6);return{...this.#NJ(`#${Y}`),a:Q}}let X=Z.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(X){let Y=Math.max(0,Math.min(255,Math.round(parseFloat(X[1])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(X[2])))),W=Math.max(0,Math.min(255,Math.round(parseFloat(X[3])))),K=X[4]!==void 0?Math.max(0,Math.min(1,parseFloat(X[4]))):1;if(![Y,Q,W,K].every(Number.isFinite))return null;return{...this.#GJ({r:Y,g:Q,b:W}),a:K}}return null}#GZ(J,Z=1){let $=t(J),X=i($.r,$.g,$.b,{from:"srgb",to:"display-p3"}),Y=+(X.r/255).toFixed(4),Q=+(X.g/255).toFixed(4),W=+(X.b/255).toFixed(4);return`color(display-p3 ${Y} ${Q} ${W} / ${Z})`}#NZ(J){return e(J.r,J.g,J.b)}#fZ(J){return r(J.h,J.s,J.l)}#FZ(J){return JJ(J.r,J.g,J.b)}#TZ(J){return VJ(J.r,J.g,J.b)}#DZ(J){return HJ(J.l,J.a,J.b)}#CZ(J){return OJ(J.l,J.c,J.h)}#H(){if(this.#C())return;this.#B(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#n(){if(this.#C())return;this.#y=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#j,colorSpace:this.#L};switch(this.#j){case"solid":return{...J,color:this.#WJ(this.#W),alpha:this.#W.a,hsv:{...this.#W}};case"gradient":return{...J,gradient:w(this.#$),css:this.#oJ()};case"image":return{...J,image:{...this.#z}};case"video":return{...J,video:this.#d()};case"webcam":return{...J,webcam:this.#e()};default:return{...J,...this.#E[this.#j]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Z,$){if(Z===$)return;switch(J){case"value":if(this.#AJ(),this.#B(),this.#aJ(),this.#J?.open&&!this.#f)this.#gJ(),this.#y=JSON.stringify(this.value);break;case"disabled":if(this.#ZJ(),this.#C()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let X=this.#J.open;if(this.#FJ(),X&&this.isConnected)this.#jJ();break}case"webcam-mode":if(this.#j==="webcam")this.#B();break;case"default-video":if(this.#j==="video")this.#EJ({emit:!1}),this.#B();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#HJ());case"aria-labelledby":case"aria-describedby":this.#ZJ();break}}}A("fig-fill-picker",P);class k extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#X=10;static#K=10;static#U=8;static#J=3;static#V=210;static#q={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#j=!1;#L=null;#W=null;#_={...k.#q};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#_}}}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.#$(),this.#z(),this.#f(),this.#D()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J!=="value")return;if(this.#z(),this.#j)this.#D()}#$(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#z(){let J=this.getAttribute("value");if(!J){this.#_={...k.#q,stops:k.#q.stops.map((Z)=>({...Z}))};return}try{let Z=JSON.parse(J),$=Z?.type==="gradient"&&Z.gradient?Z.gradient:Z?.gradient?Z.gradient:Z;if(!$||typeof $!=="object")return;this.#_=this.#Y({...k.#q,...$})}catch{}}#Y(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),X=String(Z.hueInterpolation??"shorter").toLowerCase(),Y=Array.isArray(Z.stops)?Z.stops.map((Q)=>({color:String(Q?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q?.position??0,opacity:Q?.opacity??100})):k.#q.stops.map((Q)=>({...Q}));if(Y.length<2)return{...k.#q,stops:k.#q.stops.map((Q)=>({...Q}))};return{type:["linear","radial","angular"].includes(Z.type)?Z.type:"linear",angle:Number.isFinite(Number(Z.angle))?Number(Z.angle):135,interpolationSpace:$,hueInterpolation:X,stops:Y}}#Q(){return k.#Z.has(this.#_.interpolationSpace||"srgb")}#k(J){let{r:Z,g:$,b:X}=t(J);if(this.#_.interpolationSpace==="hsl")return e(Z,$,X).h;let Y=JJ(Z,$,X);return(LJ(Y.l,Y.a,Y.b).h%360+360)%360}#F(){let J=this.#N(),Z=this.#k(J[0]?.color||"#FF0000"),$=this.#k(J[J.length-1]?.color||"#4F9EFF"),X=k.#V-Z,Q=((k.#V-$-X)%360+360)%360,W=Q===0?0:Q-360,K=this.#_.hueInterpolation||"shorter",j;if(K==="increasing")j=W;else if(K==="decreasing")j=Q;else if(K==="longer")j=Q<180?W:Q;else j=Q<=180?Q:W;let U=Math.sign(j),L=Math.asin(k.#J/2/k.#U)*180/Math.PI,q=Math.min(L,Math.max(0,(Math.abs(j)-0.01)/2));return{startDeg:X+U*q,sweepDeg:j-U*q*2}}#O(J){let Z=J*Math.PI/180;return{x:k.#X+k.#U*Math.cos(Z),y:k.#K+k.#U*Math.sin(Z)}}#M(J,Z){let $=J+Z,X=this.#O(J),Y=this.#O($),Q=Math.abs(Z)>180?1:0,W=Z>=0?1:0;return`M ${X.x} ${X.y} A ${k.#U} ${k.#U} 0 ${Q} ${W} ${Y.x} ${Y.y}`}#E(){let J=this.#O(180),Z=this.#O(0);return`M ${J.x} ${J.y} L ${Z.x} ${Z.y}`}#G(J){let Z=k.#J,$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Z}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent($)}")`}#N(){return[...this.#_.stops].sort((J,Z)=>(J.position??0)-(Z.position??0))}#P(){let J=this.#_.interpolationSpace||"srgb";if(J==="srgb")return"";if(k.#Z.has(J))return` in ${J} ${this.#_.hueInterpolation||"shorter"} hue`;return` in ${J}`}#T(){let J=this.#N(),Z=this.#P();if(this.#Q()){let X=(k.#V+90)%360,Y=this.#_.interpolationSpace,Q=(K)=>Y==="oklch"?`oklch(65% 0.25 ${K})`:`hsl(${K} 100% 50%)`,W=[0,300,240,180,120,60,0].map(Q).join(", ");return`conic-gradient(from ${X}deg in ${Y} decreasing hue, ${W})`}let $=J.map((X)=>`${X.color} ${X.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#f(){if(this.#j)return;let J=k.#J,Z=o("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},o("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),$=_("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Z,$),this.#L=Z,this.#W=$,this.#j=!0}#D(){if(!this.#W)return;let J=this.#Q();if(this.#L)this.#L.style.display=J?"":"none";let Z=J?(()=>{let{startDeg:X,sweepDeg:Y}=this.#F();return this.#M(X,Y)})():this.#E(),$=this.#G(Z);this.#W.style.setProperty("-webkit-mask-image",$),this.#W.style.maskImage=$,this.#W.style.background=this.#T()}}A("fig-interpolation-swatch",k);class D extends HTMLElement{static observedAttributes=["axis","handle","items","indicator","disabled"];static#Z=6;static#X=['[draggable]:not([draggable="false"])','img:not([draggable="false"])','a[href]:not([draggable="false"])','input[type="range"]',"fig-handle","fig-slider","fig-input-number","fig-input-gradient","fig-easing-curve","fig-angle","fig-audio","fig-audio-waveform","fig-input-wheel","fig-joystick","fig-origin-grid","fig-chooser","fig-canvas-control"];static#K=new Set(["data-reorder-item","data-reorder-generated-role","data-reorder-handle","role","tabindex","aria-label","aria-roledescription"]);#U=null;#J=null;#V=!1;#q=new Map;#j=null;#L=null;#W=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#c(),this.#M(),this.#U=new MutationObserver(()=>this.#M()),this.#U.observe(this,{childList:!0}),this.#_()}disconnectedCallback(){this.#U?.disconnect(),this.#U=null,this.#J?.disconnect(),this.#J=null,this.#r(),this.#JJ(),this.#m(),this.#W?.remove(),this.#W=null}attributeChangedCallback(J){if(this.isConnected){if(this.#$)this.#JJ();if(J==="indicator")this.#C();this.#_(),this.#M()}}refresh(){if(this.isConnected)this.#M()}#_(){if(!this.#Q){this.#J?.disconnect(),this.#J=null;return}if(this.#J)return;this.#J=new MutationObserver((J)=>{if(!J.some(($)=>$.target.parentElement===this&&!D.#K.has($.attributeName)&&!($.attributeName==="class"&&$.target===this.#j?.item))||this.#V)return;this.#V=!0,queueMicrotask(()=>{if(this.#V=!1,this.isConnected)this.#M()})}),this.#J.observe(this,{subtree:!0,attributes:!0})}get#$(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#z(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#Y(){return(this.getAttribute("handle")||"").trim()}get#Q(){return(this.getAttribute("items")||"").trim()}get#k(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#F(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#O(){let J=this.#F(),Z=this.#Q;if(!Z)return J;try{return J.filter(($)=>$.matches(Z))}catch{return[]}}#M(){let J=this.#F(),Z=this.#O(),$=new Set(Z);for(let[Y,Q]of this.#q)if(!$.has(Y))Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),Q.target.removeEventListener("keydown",Q.onKeyDown),this.#S(Q),this.#q.delete(Y);this.#P(J),this.#E(J),this.#N(J.filter((Y)=>!$.has(Y)));let X=!this.#$&&Z.length>=2;if(this.#G(Z,X),!X){this.#r();return}for(let Y of Z){let Q=this.#f(Y),W=this.#q.get(Y);if(W&&W.target===Q)continue;if(W)W.target.removeEventListener("pointerdown",W.onPointerDown,!0),this.#q.delete(Y);if(!Q)continue;this.#D(Y,Q)}this.#T(Z)}#E(J){for(let Z of J)if(Z.removeAttribute("data-reorder-item"),Z.hasAttribute("data-reorder-generated-role"))Z.removeAttribute("role"),Z.removeAttribute("data-reorder-generated-role")}#G(J,Z=!0){for(let $ of J){if(Z)$.setAttribute("data-reorder-item","");if(!$.hasAttribute("role"))$.setAttribute("role","listitem"),$.setAttribute("data-reorder-generated-role","")}}#N(J){for(let Z of J)if(!Z.hasAttribute("role"))Z.setAttribute("role","none"),Z.setAttribute("data-reorder-generated-role","")}#P(J){for(let Z of J)Z.querySelectorAll("[data-reorder-handle]").forEach(($)=>{$.removeAttribute("data-reorder-handle"),$.removeAttribute("aria-roledescription")})}#T(J){if(!this.#Y)return;for(let Z of J){let $=Z.querySelector(this.#Y);if($)$.setAttribute("data-reorder-handle",""),$.setAttribute("aria-roledescription","reorder handle")}}#f(J){if(this.#Y)return J.querySelector(this.#Y);return J}#D(J,Z){let $=(j)=>{if(this.#$||this.#O().length<2)return;if(j.button!==0)return;if(!this.#Y&&this.#y(j.target,J))return;this.#s(j,J,Z)},X=Z.getAttribute("tabindex"),Y=Z.getAttribute("aria-label"),Q=Z.getAttribute("role"),W=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Z.setAttribute("tabindex","0"),Z.setAttribute("aria-label",`Move ${W}`),Z!==J&&!Z.hasAttribute("role"))Z.setAttribute("role","button");let K=(j)=>{if(this.#$)return;let U=this.#z==="horizontal",L=U?"ArrowLeft":"ArrowUp",q=U?"ArrowRight":"ArrowDown";if(j.key!==L&&j.key!==q&&j.key!=="Home"&&j.key!=="End")return;j.preventDefault(),j.stopPropagation();let z=this.#O(),O=z.indexOf(J),M=O;if(j.key===L)M=Math.max(0,O-1);else if(j.key===q)M=Math.min(z.length-1,O+1);else if(j.key==="Home")M=0;else if(j.key==="End")M=z.length-1;if(M===O){this.#A(`${W}, position ${O+1} of ${z.length}`);return}this.#d(J,M),this.#M(),this.#f(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:O,newIndex:M,item:J}})),this.#A(`${W}, position ${M+1} of ${z.length}`)};Z.addEventListener("pointerdown",$,!0),Z.addEventListener("keydown",K),this.#q.set(J,{target:Z,onPointerDown:$,onKeyDown:K,originalTabIndex:X,originalAriaLabel:Y,originalRole:Q})}#S(J){let{target:Z,originalTabIndex:$,originalAriaLabel:X,originalRole:Y}=J;if($===null)Z.removeAttribute("tabindex");else Z.setAttribute("tabindex",$);if(X===null)Z.removeAttribute("aria-label");else Z.setAttribute("aria-label",X);if(Y===null)Z.removeAttribute("role");else Z.setAttribute("role",Y)}#c(){if(this.#W?.isConnected)return;let J=document.createElement("span");J.setAttribute("data-reorder-live",""),J.setAttribute("role","status"),J.setAttribute("aria-live","polite"),J.setAttribute("aria-atomic","true"),Object.assign(J.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#W=J,document.body.appendChild(J)}#A(J){if(!this.#W)return;this.#W.textContent="",requestAnimationFrame(()=>{if(this.#W)this.#W.textContent=J})}#y(J,Z){let $=J;while($&&$!==Z){if($ instanceof Element){for(let X of D.#X)if($.matches(X))return!0}$=$.parentElement}return!1}static#x="fig-reorder-dragging";static#h(J){document.body.classList.toggle(D.#x,J)}#s(J,Z,$){this.#JJ();let X={item:Z,target:$,pointerId:J.pointerId,oldIndex:this.#O().indexOf(Z),targetIndex:this.#O().indexOf(Z),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};X.onMove=(Y)=>{if(Y.pointerId!==X.pointerId)return;let Q=Y.clientX-X.startX,W=Y.clientY-X.startY;if(!X.active){if(Q*Q+W*W<D.#Z*D.#Z)return;X.active=!0,J.preventDefault(),J.stopPropagation(),Z.classList.add("dragging"),D.#h(!0);try{$.setPointerCapture(X.pointerId)}catch{}}Y.preventDefault();let K=this.#z==="horizontal"?Y.clientX:Y.clientY,j=this.#b(K);X.targetIndex=j,this.#t(j,Z)},X.onKeyDown=(Y)=>{if(Y.key!=="Escape"||!X.active)return;Y.preventDefault(),this.#l(X,!0)},X.onUp=(Y)=>{if(Y.pointerId!==X.pointerId)return;this.#l(X,Y.type==="pointercancel")},this.#j=X,window.addEventListener("pointermove",X.onMove),window.addEventListener("pointerup",X.onUp),window.addEventListener("pointercancel",X.onUp),window.addEventListener("keydown",X.onKeyDown)}#b(J){let Z=this.#O(),$=this.#z==="horizontal";for(let X=0;X<Z.length;X++){let Y=Z[X].getBoundingClientRect(),Q=$?Y.left+Y.width/2:Y.top+Y.height/2;if(J<Q)return X}return Z.length}#R(J,Z){let $=this.#O(),X=$.indexOf(J);if(X===-1)return!1;let Y=Math.max(0,Math.min(Z,$.length));if(Z===X)return!1;if(Y>=$.length&&X===$.length-1)return!1;return!0}#w(J){if(!J.length)return null;let Z=1/0,$=-1/0,X=1/0,Y=-1/0;for(let Q of J){let W=Q.getBoundingClientRect();Z=Math.min(Z,W.left),$=Math.max($,W.right),X=Math.min(X,W.top),Y=Math.max(Y,W.bottom)}return{left:Z,top:X,width:$-Z,height:Y-X}}#i(){let J=[":popover-open",":modal",":fullscreen"],Z=this.parentElement;while(Z){if(J.some((X)=>{try{return Z.matches(X)}catch{return!1}}))return Z;Z=Z.parentElement}return document.body}#g(){if(this.#L)return this.#L;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#z),J.classList.toggle("fig-reorder-indicator-ring",this.#k==="ring"),this.#i().appendChild(J),this.#L=J,J}#C(){this.#L?.classList.toggle("fig-reorder-indicator-ring",this.#k==="ring")}#t(J,Z){let $=this.#O();if(!this.#R(Z,J)){this.#m();return}let X=this.#w($);if(!X){this.#m();return}let Y=this.#g();if(Y.setAttribute("data-axis",this.#z),this.#z==="horizontal"){let W;if(J<=0)W=$[0].getBoundingClientRect().left;else if(J>=$.length)W=$[$.length-1].getBoundingClientRect().right;else W=$[J].getBoundingClientRect().left;Y.style.left=`${W-1}px`,Y.style.top=`${X.top}px`,Y.style.width="2px",Y.style.height=`${X.height}px`;return}let Q;if(J<=0)Q=$[0].getBoundingClientRect().top;else if(J>=$.length)Q=$[$.length-1].getBoundingClientRect().bottom;else Q=$[J].getBoundingClientRect().top;Y.style.left=`${X.left}px`,Y.style.top=`${Q-1}px`,Y.style.width=`${X.width}px`,Y.style.height="2px"}#m(){this.#L?.remove(),this.#L=null}#e(J,Z){let $=this.#O(),X=Math.max(0,Math.min(Z,$.length));if(X>=$.length){let Q=$[$.length-1];if(Q&&Q!==J)Q.after(J);return}let Y=$[X];if(Y!==J)this.insertBefore(J,Y)}#d(J,Z){let $=this.#O().filter((Y)=>Y!==J),X=$[Z]??null;if(X)this.insertBefore(J,X);else if($.length)$[$.length-1].after(J);else this.appendChild(J)}#l(J,Z){let{item:$,oldIndex:X,active:Y,onMove:Q,onUp:W,onKeyDown:K}=J;if(window.removeEventListener("pointermove",Q),window.removeEventListener("pointerup",W),window.removeEventListener("pointercancel",W),window.removeEventListener("keydown",K),Y){if(!Z){this.#e($,J.targetIndex);let j=this.#O().indexOf($);if(j!==-1&&j!==X){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:X,newIndex:j,item:$}}));let U=$.getAttribute("aria-label")||$.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#A(`${U}, position ${j+1} of ${this.#O().length}`)}}}if($.classList.remove("dragging"),D.#h(!1),this.#m(),this.#j===J)this.#j=null}#r(){for(let[,J]of this.#q)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#S(J);this.#q.clear()}#JJ(){if(!this.#j)return;this.#l(this.#j,!0)}}A("fig-reorder",D);
+    `,J.appendChild(Z);let $=document.createElement("fig-button");$.className="fig-select-trigger",$.setAttribute("part","trigger"),$.setAttribute("variant","ghost"),$.setAttribute("aria-haspopup","listbox"),$.setAttribute("aria-expanded","false");let X=document.createElement("span");X.className="fig-select-prepend",X.setAttribute("part","prepend"),X.setAttribute("aria-hidden","true");let Y=document.createElement("slot");Y.setAttribute("name","prepend-trigger"),Y.hidden=!0;let Q=document.createElement("span");Q.className="fig-select-prepend-fallback",X.append(Y,Q);let W=document.createElement("span");W.className="fig-select-label",W.setAttribute("part","label");let K=document.createElement("slot");K.setAttribute("name","trigger"),K.hidden=!0,$.append(X,W,K);let j=document.createElement("dialog",{is:"fig-popup"});if(j.setAttribute("is","fig-popup"),j.setAttribute("part","listbox"),j.setAttribute("theme","menu"),j.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)j.setAttribute("popover","manual");j.id=kJ(),$.setAttribute("aria-controls",j.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),j.appendChild(U),J.append($,j),this.#Z=$,this.#K=X,this.#U=Y,this.#J=Q,this.#V=K,this.#q=W,this.#Y=j,this.#j=U,this.#v(),this.#y(),this.#w(),!this.hasAttribute("value")){let L=this.#QJ().find((q)=>F(q,"selected"));if(L)this.setAttribute("value",L.value)}}#w(){if(!this.#Y||this.#z)return;if(typeof this.#Y.positionPopup!=="function")return;this.#X=this.#Y.positionPopup.bind(this.#Y),this.#Y.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#I()},this.#z=!0}#i(J){if(!J)return null;let Z=document.createRange();Z.selectNodeContents(J);let $=[...Z.getClientRects()].filter((X)=>X.width>0&&X.height>0);if($.length)return $[0];return J.getBoundingClientRect()}#g(){if(typeof this.#Y?.parseViewportMargins==="function")return this.#Y.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#C(){if(this.#M?.isConnected)return this.#M;let J=this.getAttribute("menu-anchor");if(J)try{let Z=this.parentElement?.querySelector(J);if(Z&&Z!==this&&!this.contains(Z))return Z;let X=this.getRootNode()?.querySelector?.(J);if(X&&X!==this&&!this.contains(X))return X}catch{}return null}#t(){return this.#C()||this.#Z}#m(){return Boolean(this.#C())}#e(){return!this.#LJ()&&this.#m()}#v(){if(!this.#Y)return;if(this.#Y.anchor=this.#t(),this.#XJ(),!this.open)return;this.#Q=!1,this.#k=null,this.#F=null,this.#Y.setupObservers?.(),this.#Y.queueReposition?.()}#JJ(){let J=this.#q?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Z=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;return this.#K?.getBoundingClientRect()??null}#p(){let Z=(this.#e()?this.#C():null)?.getBoundingClientRect()??this.#JJ();if(!Z)return null;return{x:Z.x,y:Z.y,width:Z.width,height:Z.height}}#r(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#fJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.x-Z.x)>$||Math.abs(J.y-Z.y)>$||Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$}#u(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$||Math.abs(J.offsetLeft-Z.offsetLeft)>$||Math.abs(J.offsetTop-Z.offsetTop)>$}#_J(){if(!this.#Q)return!1;let J=this.#fJ(this.#k,this.#p()),Z=this.#u(this.#F,this.#r());return!J&&!Z}#KJ(){this.#k=this.#p(),this.#F=this.#r()}#LJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#IJ(){if(!this.#Y)return;this.#Y.style.removeProperty("left"),this.#Y.style.removeProperty("top"),this.#Y.style.removeProperty("right"),this.#Y.style.removeProperty("bottom")}#I(){if(this.#LJ()){if(this.#Q=!1,this.#k=null,this.#F=null,this.#XJ(),this.#IJ(),this.#xJ())return;this.#X?.(),this.#FJ();return}this.#jJ()}#xJ(){let J=this.#Y,Z=this.#C();if(!J||!Z||typeof J.parsePosition!=="function"||typeof J.parseOffset!=="function"||typeof J.computeCoords!=="function")return!1;let $=J.getBoundingClientRect(),X=Z.getBoundingClientRect();if(!$.width||!$.height)return!1;let{vertical:Y,horizontal:Q,shorthand:W}=J.parsePosition(),K=J.parseOffset(),{left:j,top:U}=J.computeCoords(X,$,Y,Q,K,W),L=this.#g();if(typeof J.clampToViewport==="function")({left:j,top:U}=J.clampToViewport({left:j,top:U},$,L));return J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(j)}px`,"important"),J.style.setProperty("top",`${Math.round(U)}px`,"important"),!0}#FJ(){let J=this.#Y;if(!J||typeof J.clampToViewport!=="function")return;let Z=J.getBoundingClientRect();if(!Z.width||!Z.height)return;let $=this.#g(),{left:X,top:Y}=J.clampToViewport({left:Z.left,top:Z.top},Z,$);J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(X)}px`,"important"),J.style.setProperty("top",`${Math.round(Y)}px`,"important")}#jJ(){if(this.#_J()){this.#FJ();return}let J=this.#Y,Z=this.#q;if(!J||!Z){this.#X?.();return}let $=this.#QJ(),X=$.find((M)=>this.#c(M)===this.value)||$[0];if(!X){this.#X?.();return}let Y=this.#e()?this.#C():null;if(Y)this.#XJ();this.#X?.();let Q=J.getBoundingClientRect(),W=X.getBoundingClientRect();if(!Q.width||!Q.height||!W.height)return;let K,j,U;if(Y){let M=Y.getBoundingClientRect();U=M,K=M.left+(M.width-Q.width)/2,j=M.top+(M.height-W.height)/2-(W.top-Q.top)}else{let M=this.#JJ(),B=this.#i(X);if(!M?.width||!B)return;U=M;let G=B.left-Q.left,f=B.top-Q.top;K=F(this,"full")?this.getBoundingClientRect().left:M.left-G,j=M.top-f}let L=this.#g();if(typeof J.clampToViewport==="function")({left:K,top:j}=J.clampToViewport({left:K,top:j},Q,L));else{let{left:M,top:B}=L,G=window.innerWidth-Q.width-L.right,f=window.innerHeight-Q.height-L.bottom;K=Math.min(Math.max(K,M),Math.max(M,G)),j=Math.min(Math.max(j,B),Math.max(B,f))}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(j)}px`,"important");let q=this.#x(),z=X.getBoundingClientRect(),H=Y?null:this.#i(X);if(q&&q.scrollHeight>q.clientHeight+1){let M=Y?z.top+z.height/2-(U.top+U.height/2):H?H.top-U.top:0;if(Math.abs(M)>0.5)q.scrollTop+=M;q.syncOverflow?.()}if(this.#Q||this.open)this.#KJ()}#bJ(){this.#Z?.addEventListener("click",this.#E),this.#Z?.addEventListener("keydown",this.#f),this.#Z?.addEventListener("focus",this.#B),this.#Z?.addEventListener("blur",this.#N),this.addEventListener("click",this.#P),this.addEventListener("pointerover",this.#T),this.#Y?.addEventListener("keydown",this.#f),this.#Y?.addEventListener("close",this.#D),this.#j?.addEventListener("slotchange",this.#S)}#wJ(){this.#Z?.removeEventListener("click",this.#E),this.#Z?.removeEventListener("keydown",this.#f),this.#Z?.removeEventListener("focus",this.#B),this.#Z?.removeEventListener("blur",this.#N),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#P),this.removeEventListener("pointerover",this.#T),this.#Y?.removeEventListener("keydown",this.#f),this.#Y?.removeEventListener("close",this.#D),this.#j?.removeEventListener("slotchange",this.#S)}#OJ(){this.#y(),this.#$J()}#ZJ(){if(this.#L)return;this.#L=new MutationObserver((J)=>{if(this.#$||this.#H)return;let Z=!1;for(let $ of J){if($.type==="childList"){if([...$.addedNodes].some((X)=>this.#A(X))||[...$.removedNodes].some((X)=>this.#A(X))||$.target?.closest?.("fig-select-option"))Z=!0}if($.type==="attributes"&&$.target?.tagName==="FIG-SELECT-OPTION"){if($.attributeName==="value"||$.attributeName==="disabled"||$.attributeName==="label")Z=!0;else if($.attributeName==="selected"){if(F($.target,"selected")){let X=this.#c($.target);if((this.getAttribute("value")??"")!==X)this.setAttribute("value",X),Z=!0}else if(this.#c($.target)===(this.getAttribute("value")??""))Z=!0}}if($.type==="characterData"&&$.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Z=!0}if(Z)this.#$J()}),this.#L.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#QJ({enabledOnly:J=!1}={}){let Z=this.#x(),$=Z?Array.from(Z.querySelectorAll(":scope > fig-select-option")):[];if(!J)return $;return $.filter((X)=>!F(X,"disabled"))}#c(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Z=J.getAttribute?.("value");if(Z!=null)return Z;return(J.textContent||"").trim()}#AJ(J){if(!J)return"";let Z=J.getAttribute?.("label");if(Z!=null&&Z!=="")return Z.trim();let $=[];for(let X of J.childNodes){if(X.nodeType===Node.TEXT_NODE){let W=X.textContent?.trim();if(W)$.push(W);continue}if(!(X instanceof Element))continue;let Y=X.getAttribute("slot");if(Y==="prepend"||Y==="append")continue;let Q=X.textContent?.trim();if(Q)$.push(Q)}if($.length)return $.join(" ").trim();return(J.textContent||"").trim()}#G(J){if(!this.#K||!this.#U||!this.#J||!this.#V)return;let Z=this.querySelector(':scope > [slot="trigger"]'),$=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),X=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),Y=J?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#V.hidden=!Z,this.#q.hidden=Boolean(Z),this.#K.hidden=Boolean(Z),Z){$?.remove(),this.#K.classList.remove("has-content"),this.#U.hidden=!0,this.#J.replaceChildren();return}if(!X&&Y?.childNodes.length){let W=$||document.createElement("span");if(W.setAttribute("slot","prepend-trigger"),W.setAttribute("data-fig-select-generated",""),W.replaceChildren(...Array.from(Y.childNodes,(K)=>K.cloneNode(!0))),W.parentElement!==this)this.append(W);X=W}else if(X)$?.remove();else $?.remove();let Q=Boolean(X);if(this.#K.classList.toggle("has-content",Q),this.#U.hidden=!X,this.#J.hidden=Boolean(X),X){this.#J.replaceChildren();return}this.#J.replaceChildren()}#HJ(){if(!this.#Y)return;this.#Y.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#Y.setAttribute("offset",J);else this.#Y.removeAttribute("offset");let Z=this.getAttribute("closedby");if(Z)this.#Y.setAttribute("closedby",Z);else this.#Y.removeAttribute("closedby")}#UJ(){let J=F(this,"disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(J&&this.open)this.open=!1}#uJ(J){if(!J.length)return null;let Z=J.find(($)=>F($,"selected"));if(Z&&!F(Z,"disabled"))return Z;return J.find(($)=>!F($,"disabled"))||J[0]||null}#TJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#$J(){if(this.#$)return;this.#$=!0;try{let J=this.#QJ(),Z=this.hasAttribute("value"),$=Z?this.getAttribute("value"):null,X=Z?J.find((K)=>this.#c(K)===$):null,Y=!1;if(!X){if(Z){if(!J.length){if(this.#q)this.#q.textContent=$||this.getAttribute("label")||"";return}if(X=this.#uJ(J),X){let K=this.#c(X);if($!==K)this.setAttribute("value",K),Y=!0}else this.removeAttribute("value"),Y=!0}else if(X=J.find((K)=>F(K,"selected")),X)this.setAttribute("value",this.#c(X)),Y=!0}for(let K of J){XJ(K);let j=K===X;if(K.setAttribute("aria-selected",j?"true":"false"),j)K.setAttribute("selected","");else K.removeAttribute("selected")}let Q=X&&this.#AJ(X)||this.getAttribute("label")||"";if(this.#q)this.#q.textContent=Q;this.#G(X);let W=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",W),this.#x()?.syncOverflow?.(),Y)this.#TJ(this.getAttribute("value")??"")}finally{this.#$=!1}}#qJ(J){if(F(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Z=!this.open;if(Z)this.#v();this.open=Z}#hJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(F($,"disabled"))return;this.#vJ($)}#MJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(F($,"disabled"))return;if(J.relatedTarget instanceof Node&&$.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#c($),bubbles:!0,composed:!0}))}#gJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#Y?.matches?.(":open")??!1))){if(this.#Z?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#v(),this.open=!0,requestAnimationFrame(()=>{let Y=this.#QJ({enabledOnly:!0}).findIndex((Q)=>this.#c(Q)===this.value);this.#a(Y>=0?Y:0)});return}let $=this.#QJ({enabledOnly:!0});if(!$.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#s(),this.#a(this.#_+1,!0);break;case"ArrowUp":J.preventDefault(),this.#s(),this.#a(this.#_-1,!0);break;case"Home":J.preventDefault(),this.#a(0,!0);break;case"End":J.preventDefault(),this.#a($.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#s();let X=$[this.#_];if(!X)return;J.preventDefault(),this.#vJ(X);break}}}#mJ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#_=-1}#vJ(J){let Z=this.#c(J);this.setAttribute("value",Z),this.#$J(),this.#TJ(Z),this.open=!1}#o(){return this.#QJ({enabledOnly:!0})}#s(){let J=this.#o();if(!J.length){this.#_=-1;return}let Z=J.find((X)=>X===document.activeElement),$=Z?J.indexOf(Z):-1;this.#_=$>=0?$:this.#_}#a(J,Z=!1){let $=this.#o();if(!$.length)return;let X=(J%$.length+$.length)%$.length,Y=$[X],Q=document.activeElement!==Y;if(this.#_=X,Y?.focus(),Z&&Q)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#c(Y),bubbles:!0,composed:!0}))}#XJ(){if(!this.#Y||!this.#Z)return;let J=Math.ceil(this.getBoundingClientRect().width),Z=Math.ceil(this.#Z.getBoundingClientRect().width),$=Math.max(J,Z,96),X=this.#m()?this.#C():null,Y=window.visualViewport?.width??window.innerWidth,Q=window.visualViewport?.height??window.innerHeight,W=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,K=Math.max(0,Math.min(Math.floor(20*W),Math.floor(Y-16))),j=Math.max(0,Math.floor(Q-16));if(this.#Y.style.setProperty("box-sizing","border-box","important"),this.#Y.style.setProperty("padding","0","important"),this.#Y.style.setProperty("border","0","important"),this.#Y.style.setProperty("margin","0","important"),X){let L=X.getBoundingClientRect().width;this.#Y.style.setProperty("width","max-content","important"),this.#Y.style.setProperty("min-width","0","important"),this.#Y.style.setProperty("max-width",`${K}px`,"important");let q=this.#Y.getBoundingClientRect().width,z=Math.min(K,Math.max($,q)),H=Math.max(L,z);this.#Y.style.setProperty("width",`${H}px`,"important"),this.#Y.style.setProperty("min-width",`${H}px`,"important"),this.#Y.style.setProperty("max-width",`${H}px`,"important")}else this.#Y.style.setProperty("width","max-content","important"),this.#Y.style.setProperty("min-width",`${$}px`,"important"),this.#Y.style.setProperty("max-width",`${K}px`,"important");this.#Y.style.setProperty("max-height",`${j}px`,"important"),this.#Y.style.setProperty("height","max-content","important"),this.#Y.style.setProperty("overflow","hidden","important");let U=this.#Y.getBoundingClientRect();if(U.height>j)this.#Y.style.setProperty("height",`${j}px`,"important");if(!X&&U.width>K)this.#Y.style.setProperty("width",`${K}px`,"important")}#DJ(){if(!this.#Y||F(this,"disabled"))return;this.#v(),this.#w(),this.#Q=!1,this.#k=null,this.#F=null,this.#$J(),this.#XJ(),this.#Y.open=!0,document.addEventListener("keydown",this.#f,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#_=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#XJ(),this.#I(),this.#XJ(),this.#FJ();let J=this.#x(),$=this.#o().findIndex((X)=>this.#c(X)===this.value);if($>=0)this.#a($);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#a(0);if(J?.syncOverflow?.(),!this.#LJ())this.#Q=!0,this.#KJ()})})}#RJ(){if(!this.#Y)return;this.#Q=!1,this.#k=null,this.#F=null,document.removeEventListener("keydown",this.#f,!0),this.#Y.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}A("fig-select",WJ);var PJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],AJ=["shorter","longer","increasing","decreasing"],x=new Set(["oklch","hsl"]);function C(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase();if(!PJ.includes($))$="srgb";Z.interpolationSpace=$;let X=String(Z.hueInterpolation??"shorter").toLowerCase();return Z.hueInterpolation=AJ.includes(X)?X:"shorter",Z}function u(J){let Z=C(J);return Z.interpolationSpace="srgb",delete Z.hueInterpolation,Z}function w(J){let Z=u(J),$={...Z,interpolationSpace:Z.interpolationSpace};if(x.has(Z.interpolationSpace))$.hueInterpolation=Z.hueInterpolation;else delete $.hueInterpolation;return $}function RJ(J){let Z=C(J);if(Z.interpolationSpace==="srgb")return"";if(x.has(Z.interpolationSpace))return`in ${Z.interpolationSpace} ${Z.hueInterpolation} hue`;return`in ${Z.interpolationSpace}`}function n(J){let Z=C(J);if(x.has(Z.interpolationSpace))return`${Z.interpolationSpace}-${Z.hueInterpolation||"shorter"}`;return Z.interpolationSpace}function S(J){let Z=String(J??"");for(let $ of x){let X=`${$}-`;if(Z.startsWith(X))return{interpolationSpace:$,hueInterpolation:Z.slice(X.length)||"shorter"}}return{interpolationSpace:Z||"srgb",hueInterpolation:"shorter"}}var yJ=0;class P extends HTMLElement{static#Z=[{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#Y(J){let Z=P.#Z,$=Z.find((K)=>K.value===J);if($)return $;let X=S(J),Y=Z.find((K)=>K.space===X.interpolationSpace),Q=Y?.subtitle.split(" ")[0]??X.interpolationSpace.toUpperCase(),W=X.hueInterpolation;return{value:J,space:X.interpolationSpace,title:Y?.title??"Custom",subtitle:x.has(X.interpolationSpace)?`${Q} ${W.charAt(0).toUpperCase()}${W.slice(1)}`:Q}}#K=null;#U=null;#J=null;#V=`fig-fill-picker-dialog-${++yJ}`;#q="solid";anchorElement=null;#j="solid";#L="srgb";#W={h:0,s:0,v:85,a:1};#_="hex";#$={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#z={url:null,scaleMode:"fill",scale:50};#X={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#Q={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#k=null;#F=!1;#H=null;#M={};#E={};#B=null;#N=null;#P=null;#T=null;#f=!1;#D=!1;#S=null;#d=null;#A=null;#y=null;#x=null;#h=0;#l=null;#b=null;#R=new Set;#w=new Set;#i=null;#g=null;constructor(){super();this.#l=this.#QJ.bind(this),this.#b=this.#c.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.#I(()=>{this.#wJ(),this.#AJ(),this.#G(),this.#aJ()})}disconnectedCallback(){if(this.#TJ({stopWebcam:!0}),this.#xJ(),this.#FJ(),this.#jJ(this.#U))this.#U.removeAttribute("selected");if(this.#K)this.#K.removeEventListener("click",this.#l),this.#K.removeEventListener("keydown",this.#b);this.#K=null,this.#U=null}#C(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#t(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#m(){return this.#j==="webcam"&&this.#t()==="live"&&this.#Q.live!==!1}#e(){return{live:this.#t()==="live"&&this.#Q.live!==!1,snapshot:this.#Q.snapshot??null,deviceId:this.#Q.deviceId??null,scaleMode:this.#Q.scaleMode||"fill",scale:this.#Q.scale??50,opacity:this.#Q.opacity??1}}#v(){let J=this.#X.url??null;return{url:J,poster:this.#X.poster??null,scaleMode:this.#X.scaleMode||"fill",scale:this.#X.scale??50,opacity:this.#X.opacity??1,...J?{}:{missing:!0}}}#JJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Z,snapshot:$,...X}=J.webcam;if(Object.assign(this.#Q,X),typeof $==="string"&&$)this.#Q.snapshot=$;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#Q.snapshot=J.image.url;if(J.image.scaleMode)this.#Q.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#Q.scale=J.image.scale}}#p(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#Q.stream,deviceId:this.#Q.deviceId??null}}))}get webcamStream(){return this.#Q.stream}releaseWebcam(){this.#qJ()}#r(J){if(!J)return null;if(this.#Q.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#Q.snapshot),this.#w.delete(this.#Q.snapshot);return this.#Q.snapshot=URL.createObjectURL(J),this.#w.add(this.#Q.snapshot),this.#Q.snapshot}#fJ(J,Z,$){if(typeof J.getImageData!=="function")return!1;let X;try{X=J.getImageData(0,0,Z,$).data}catch{return!1}let Y=Math.max(1,Math.floor(Z*$/256)),Q=0,W=0,K=0;for(let j=0;j<X.length;j+=Y*4){let U=Math.max(X[j],X[j+1],X[j+2]);if(Q=Math.max(Q,U),K+=1,U>24)W+=1}if(!K)return!0;return Q<=40||W/K<0.04}async#u(J){let Z=[],$=this.#Q.stream?.getVideoTracks?.()?.[0];if($&&typeof ImageCapture==="function")try{if(this.#H?.track!==$)this.#H=new ImageCapture($);Z.push(await this.#H.grabFrame())}catch{this.#H=null}if(typeof createImageBitmap==="function")try{Z.push(await createImageBitmap(J))}catch{}return Z.push(J),Z.filter(Boolean)}async#_J(J,Z,$,X){let Y=await this.#u(Z);for(let Q of Y){try{J.drawImage(Q,0,0,$,X)}catch{continue}finally{Q.close?.()}if(!this.#fJ(J,$,X))return!0}return!1}#KJ(J){return new Promise((Z)=>{if(typeof J.requestVideoFrameCallback==="function"){let $=setTimeout(()=>Z(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout($),Z(!0)});return}setTimeout(()=>Z(!1),200)})}async#LJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Z=document.createElement("canvas");Z.width=J.videoWidth,Z.height=J.videoHeight;let $=Z.getContext("2d",{willReadFrequently:!0});if(!$)return null;if(!await this.#_J($,J,Z.width,Z.height))return null;let Y=await new Promise((Q)=>Z.toBlob(Q,"image/png"));return this.#r(Y)}#IJ(J){if(this.#j!=="webcam")return;let Z=this.#Q.stream;if(!Z)return;if(this.#k===Z&&this.#Q.snapshot){this.#G();return}if(this.#F)return;this.#F=!0;let $=(Y)=>{if(this.#F=!1,!Y||this.#j!=="webcam"||this.#Q.stream!==Z)return;this.#k=Z,this.#G()},X=async()=>{let Y=await this.#LJ(J);if(Y){$(Y);return}if(this.#j!=="webcam"||this.#Q.stream!==Z){this.#F=!1;return}return await this.#KJ(J),X()};X()}#I(J){let Z=requestAnimationFrame(()=>{if(this.#R.delete(Z),this.isConnected)J()});return this.#R.add(Z),Z}#xJ(){this.#R.forEach((J)=>cancelAnimationFrame(J)),this.#R.clear()}#FJ(){let J=new Set([this.#Q.snapshot,this.#X.poster,this.#z.url].filter((Z)=>typeof Z==="string"&&Z.startsWith("blob:")));this.#w.forEach((Z)=>{if(!J.has(Z))URL.revokeObjectURL(Z)}),this.#w.clear(),J.forEach((Z)=>this.#w.add(Z))}#jJ(J){return J?.matches("fig-swatch, fig-chit")??!1}#bJ(J){return this.#jJ(J)||(J?.matches("[data-fig-fill-picker-swatch]")??!1)}#wJ(){let J=Array.from(this.children).find((Z)=>!Z.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#U=document.createElement("fig-swatch"),this.#U.setAttribute("background","#D9D9D9"),this.appendChild(this.#U),this.#K=this.#U;else if(this.#bJ(J))this.#U=J,this.#K=J;else this.#K=J,this.#U=null;if(this.#ZJ(),this.#K.removeEventListener("click",this.#l),this.#K.addEventListener("click",this.#l),this.#K.removeEventListener("keydown",this.#b),this.#K.addEventListener("keydown",this.#b),this.#jJ(this.#U))this.#I(()=>{let Z=this.#U.querySelector('input[type="color"]');if(Z)Z.remove();this.#ZJ()})}#OJ(){return this.getAttribute("aria-label")||"Fill picker"}#ZJ(){if(!this.#K)return;let J=this.#C(),Z=this.getAttribute("aria-labelledby");if(!this.#K.hasAttribute("role"))this.#K.setAttribute("role","button");if(this.#K.setAttribute("tabindex",J?"-1":"0"),this.#K.setAttribute("aria-disabled",J?"true":"false"),this.#K.setAttribute("aria-haspopup","dialog"),this.#K.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#K.setAttribute("aria-controls",this.#V),this.#K.removeAttribute("aria-hidden"),Z)this.#K.setAttribute("aria-labelledby",Z),this.#K.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#OJ()}`),this.#K.removeAttribute("aria-labelledby");else if(this.#K.removeAttribute("aria-labelledby"),!this.#K.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#OJ()}`);let $=this.getAttribute("aria-describedby");if($)this.#K.setAttribute("aria-describedby",$);else this.#K.removeAttribute("aria-describedby")}#QJ(J){if(this.#C())return;J.stopPropagation(),J.preventDefault(),this.#UJ()}#c(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#C())return;J.preventDefault(),J.stopPropagation(),this.#UJ()}#AJ(){let J=this.getAttribute("value");if(!J)return;let Z=["solid","gradient","image","video","webcam"];try{let $=JSON.parse(J);if($.type)this.#j=$.type;if($.color){if(typeof $.color==="string")this.#W=this.#NJ($.color);else if(typeof $.color==="object"&&$.color.h!==void 0)this.#W=$.color}let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:void 0;if(Number.isFinite(X))this.#W.a=Math.max(0,Math.min(1,X));if(this.#L="srgb",$.gradient)this.#$=u({...this.#$,...$.gradient});if($.image)this.#z={...this.#z,...$.image};if($.video){let Y=this.#X.url;if(this.#X={...this.#X,...$.video},this.#X.missing=!this.#X.url,$.video.poster!=null&&$.video.poster!=="")this.#g=this.#X.url;else if(this.#X.url!==Y)this.#GJ();else this.#yJ()}if(this.#JJ($),$.type&&!Z.includes($.type)){let{type:Y,...Q}=$;this.#E[$.type]=Q}}catch($){if(J.startsWith("#")){this.#j="solid",this.#W=this.#NJ(J);return}if(GJ(J)){let X=this.#X.url;if(this.#j="video",this.#X.url=J.trim(),this.#X.missing=!1,this.#X.url!==X)this.#GJ();else this.#yJ()}}}#G(){if(!this.#U)return;let J,Z="cover",$="center";switch(this.#j){case"solid":J=this.#WJ(this.#W);break;case"gradient":J=this.#oJ();break;case"image":if(this.#z.url){J=p(this.#z.url);let X=this.#HJ(this.#z.scaleMode,this.#z.scale);Z=X.size,$=X.position}else J="";break;case"video":if(this.#X.poster){J=p(this.#X.poster);let X=this.#HJ(this.#X.scaleMode,this.#X.scale);Z=X.size,$=X.position}else J="";break;case"webcam":if(this.#Q.snapshot){J=p(this.#Q.snapshot);let X=this.#HJ(this.#Q.scaleMode,this.#Q.scale);Z=X.size,$=X.position}else J="";break;default:{J=(this.#M[this.#j]?.element||this.querySelector(`[slot="mode-${this.#j}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#U.setAttribute("background",J),this.#U.style.setProperty("--swatch-bg-size",Z),this.#U.style.setProperty("--swatch-bg-position",$),this.#j==="solid")this.#U.setAttribute("alpha",this.#W.a);else this.#U.removeAttribute("alpha")}#HJ(J,Z){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:`${Z}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#UJ(){if(this.#C())return;if(!this.#J)this.#hJ();else this.#J.anchor=this.anchorElement||this.#K;if(this.#MJ(this.#j,{emit:!1}),this.#A=JSON.stringify(this.value),this.#y=this.#A,this.#jJ(this.#U))this.#U.setAttribute("selected","true");this.#J.open=!0,this.#ZJ(),this.#I(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#I(()=>{this.#o(),this.#s()})})}open(){this.#UJ()}close(){if(this.#J)this.#J.open=!1,this.#ZJ()}#uJ(){if(!this.#J)return;for(let[J,{element:Z}]of Object.entries(this.#M)){let $=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((X)=>X.dataset.tab===J);if(!$)continue;while($.firstChild)Z.appendChild($.firstChild)}}#TJ({stopWebcam:J=!1}={}){if(this.#S)this.#S(),this.#S=null;if(this.#d?.disconnect(),this.#d=null,!J&&this.#m())this.#$J();else this.#qJ();if(!this.#J)return;this.#uJ(),this.#J.remove(),this.#J=null,this.#x=null,this.#A=null,this.#y=null,this.#B=null,this.#N=null,this.#P=null,this.#T=null,this.#D=!1,this.#ZJ()}#$J(){this.#h+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#qJ({emit:J=!0}={}){this.#h+=1;let Z=Boolean(this.#Q.stream);if(this.#Q.stream)this.#Q.stream.getTracks().forEach((X)=>X.stop()),this.#Q.stream=null;this.#k=null,this.#F=!1,this.#H=null;let $=this.#J?.querySelector(".fig-fill-picker-webcam-video");if($)$.srcObject=null;if(Z&&J)this.#p()}#hJ(){this.#M={},this.querySelectorAll('[slot^="mode-"]').forEach((z)=>{let H=z.getAttribute("slot").slice(5);this.#M[H]={element:z,label:z.getAttribute("label")||H.charAt(0).toUpperCase()+H.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#V,this.#J.setAttribute("aria-label",this.#OJ()),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.#K;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Z=["solid","gradient","image","video","webcam"],$={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},X=this.getAttribute("mode"),Y;if(X){if(Y=X.split(",").map((H)=>H.trim().toLowerCase()).filter((H)=>Z.includes(H)||this.#M[H]),Y.length===0)Y=[...Z]}else Y=[...Z];let Q={...$};for(let[z,{label:H}]of Object.entries(this.#M))Q[z]=H;if(!Y.includes(this.#j))this.#j=Y[0],this.#q=Y[0];let W;if(Y.length===1)W=_("h3",{className:"fig-fill-picker-type-label"},Q[Y[0]]);else{let z=_("fig-select-options",{},Y.map((H)=>_("fig-select-option",{value:H},Q[H])));W=_("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#j},z)}let K=Y.map((z)=>_("div",{className:"fig-fill-picker-tab","data-tab":z})),j=_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},I("close"));this.#J.replaceChildren(_("fig-header",{},[W,j]),_("fig-content",{},K)),document.body.appendChild(this.#J);for(let[z,{element:H}]of Object.entries(this.#M)){let M=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((B)=>B.dataset.tab===z);if(!M)continue;while(H.firstChild)M.appendChild(H.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:z,container:M}}))}let U=this.#J.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(z)=>{let H=typeof z.detail==="string"?z.detail:z.target?.value;if(H)this.#MJ(H)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let L=()=>{if(this.#jJ(this.#U))this.#U.removeAttribute("selected");if(this.#m())this.#$J();else this.#qJ();let z=JSON.stringify(this.value);if(this.#y!==null&&this.#y!==z)this.#n();this.#A=null,this.#y=null,this.#ZJ();let H=this.#K;this.#I(()=>{if(H?.isConnected)HTMLElement.prototype.focus.call(H)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",L);let q={solid:()=>this.#mJ(),gradient:()=>this.#JZ(),image:()=>this.#jZ(),video:()=>this.#qZ(),webcam:()=>this.#OZ()};for(let[z,H]of Object.entries(q))if(!this.#M[z]&&Y.includes(z))H();for(let z of Object.keys(this.#M)){if(Z.includes(z))continue;let H=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((M)=>M.dataset.tab===z);if(!H)continue;H.addEventListener("input",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#E[z]=M.detail;this.#O()}),H.addEventListener("change",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#E[z]=M.detail;this.#n()})}}#MJ(J,{emit:Z=!0}={}){let $=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!$)return;let X=this.#q;if(this.#q=J,this.#j=J,X==="webcam"&&J!=="webcam")this.#qJ();let Y=this.#J.querySelector(".fig-fill-picker-type");if(Y&&Y.value!==J)Y.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 W=this.#J.querySelector("fig-content");if(W)W.style.padding=this.#M[J]?"0":"";if(J==="gradient")this.#I(()=>{this.#YJ();let K=$.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#I(()=>{K?.refreshLayout?.()})});if(J==="video")this.#EJ({emit:!1});if(J==="webcam")this.#Q.live=this.#t()==="live",this.#x?.(this.#Q.deviceId);if(this.#G(),Z)this.#O()}#gJ(){if(!this.#J?.open)return;if(this.#MJ(this.#j,{emit:!1}),this.#o(),this.#s(),this.#VJ(),this.#P)this.#P.setAttribute("value",this.#W.h);if(this.#T)this.#T.setAttribute("value",this.#W.a*100),this.#T.setAttribute("color",this.#WJ(this.#W));this.#YJ();let J=this.#J.querySelector('[data-tab="image"]'),Z=J?.querySelector(".fig-fill-picker-scale-mode"),$=J?.querySelector(".fig-fill-picker-scale"),X=J?.querySelector(".fig-fill-picker-image-preview");if(Z)Z.value=this.#z.scaleMode;if($)$.setAttribute("value",this.#z.scale),$.style.display=this.#z.scaleMode==="tile"?"block":"none";if(X)this.#zJ(X);let Y=this.#J.querySelector('[data-tab="video"]'),Q=Y?.querySelector(".fig-fill-picker-scale-mode"),W=Y?.querySelector(".fig-fill-picker-video-preview");if(Q)Q.value=this.#X.scaleMode;if(W)this.#kJ(W)}#mJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Z=this.getAttribute("alpha")!=="false",$=_("canvas",{width:"200",height:"200"}),X=_("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#WJ({...this.#W,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),Y=_("fig-preview",{className:"fig-fill-picker-color-area"},[$,X]),Q=_("fig-tooltip",{text:"Sample color"},_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},I("eyedropper"))),W=_("div",{className:`fig-fill-picker-sliders${Z?"":" is-hue-only"}`},[Q,_("fig-slider",{type:"hue",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#W.h}),Z?_("fig-slider",{type:"opacity",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#W.a*100,color:this.#WJ(this.#W)}):null]),K=_("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([q,z])=>_("fig-select-option",{value:q},z))),j=_("fig-field",{className:"fig-fill-picker-inputs"},[_("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#_},K),_("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(Y,W,j),this.#B=J.querySelector("canvas"),this.#N=J.querySelector("fig-handle"),this.#a(),this.#o(),this.#s(),this.#DJ(),this.#P=J.querySelector('fig-slider[type="hue"]'),this.#P.addEventListener("input",(q)=>{this.#W.h=parseFloat(q.target.value),this.#o(),this.#s(),this.#VJ(),this.#O()}),this.#P.addEventListener("change",()=>{this.#n()}),Z)this.#T=J.querySelector('fig-slider[type="opacity"]'),this.#T.addEventListener("input",(q)=>{this.#W.a=parseFloat(q.target.value)/100,this.#VJ(),this.#O()}),this.#T.addEventListener("change",()=>{this.#n()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(q)=>{let z=typeof q.detail==="string"?q.detail:q.target?.value;if(!z)return;this.#_=z,this.#RJ()}),this.#RJ();let L=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)L.addEventListener("click",async()=>{try{let z=await new EyeDropper().open();this.#W={...this.#NJ(z.sRGBHex),a:this.#W.a},this.#o(),this.#s(),this.#VJ(),this.#O()}catch(q){}});else L.setAttribute("disabled",""),L.title="EyeDropper not supported in this browser"}#vJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Z=J.querySelector("canvas");if(Z){let $=document.createElement("canvas");$.width=Z.width,$.height=Z.height,Z.replaceWith($),this.#B=$,this.#DJ()}this.#o(),this.#s()}this.#PJ(),this.#O()}#o(){if(!this.#B&&this.#J)this.#B=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#B)return;let J=this.#L==="display-p3"?"display-p3":"srgb",Z=this.#B.getContext("2d",{colorSpace:J});if(!Z)return;let $=this.#B.width,X=this.#B.height;Z.clearRect(0,0,$,X);let Y=this.#W.h,Q=this.#L==="display-p3",W=Z.createLinearGradient(0,0,$,0);if(Q){W.addColorStop(0,"color(display-p3 1 1 1)");let j=r(Y,100,50),U=i(j.r,j.g,j.b,{from:"srgb",to:"display-p3"});W.addColorStop(1,`color(display-p3 ${U.r/255} ${U.g/255} ${U.b/255})`)}else W.addColorStop(0,"#FFFFFF"),W.addColorStop(1,`hsl(${Y}, 100%, 50%)`);Z.fillStyle=W,Z.fillRect(0,0,$,X);let K=Z.createLinearGradient(0,0,0,X);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Z.fillStyle=K,Z.fillRect(0,0,$,X)}#s(J=0){if(!this.#N||!this.#B)return;this.#a();let Z=this.#B.getBoundingClientRect();if((Z.width===0||Z.height===0)&&J<5){this.#I(()=>this.#s(J+1));return}let $=Math.max(0,Math.min(100,this.#W.s)),X=Math.max(0,Math.min(100,100-this.#W.v));this.#N.setAttribute("value",`${$}% ${X}%`),this.#N.setAttribute("color",this.#WJ({...this.#W,a:1}))}#a(){if(!this.#N)return;this.#N.setAttribute("aria-valuenow",String(Math.round(this.#W.v))),this.#N.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#W.s)}%, brightness ${Math.round(this.#W.v)}%`),this.#N.removeAttribute("aria-pressed")}#XJ(J,Z,$={}){let{updateHandle:X=!0,emitInput:Y=!0,emitChange:Q=!1}=$;if(this.#W.s=Math.max(0,Math.min(100,J*100)),this.#W.v=Math.max(0,Math.min(100,(1-Z)*100)),this.#N)this.#N.setAttribute("color",this.#WJ({...this.#W,a:1})),this.#a();if(X)this.#s();if(this.#VJ(),Y)this.#O();if(Q)this.#n()}#DJ(){if(this.#S)this.#S(),this.#S=null;if(!this.#B||!this.#N)return;let J=this.#B.parentElement||this.#B,Z=this.#N,$=!1,X=(U,L={})=>{let q=J.getBoundingClientRect();if(q.width===0||q.height===0)return;let z=Math.max(0,Math.min(U.clientX-q.left,q.width)),H=Math.max(0,Math.min(U.clientY-q.top,q.height));this.#XJ(z/q.width,H/q.height,L)},Y=(U)=>{if(U.button!==0)return;if(U.target===Z||Z.contains(U.target))return;$=!0,this.#f=!0,J.setPointerCapture(U.pointerId),X(U,{updateHandle:!0,emitInput:!0})},Q=(U)=>{if(!$)return;if(U.buttons===0){W();return}X(U,{updateHandle:!0,emitInput:!0})},W=()=>{if(!$)return;$=!1,this.#f=!1,this.#n()},K=(U)=>{this.#f=!0;let L=U.detail?.px,q=U.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(q))return;Z.setAttribute("value",`${L*100}% ${q*100}%`),this.#XJ(L,q,{updateHandle:!1,emitInput:!0})},j=(U)=>{let L=U.detail?.px,q=U.detail?.py;if(Number.isFinite(L)&&Number.isFinite(q))Z.setAttribute("value",`${L*100}% ${q*100}%`),this.#XJ(L,q,{updateHandle:!1,emitInput:!1});this.#f=!1,this.#n()};J.addEventListener("pointerdown",Y),J.addEventListener("pointermove",Q),J.addEventListener("pointerup",W),J.addEventListener("pointercancel",W),J.addEventListener("lostpointercapture",W),Z.addEventListener("input",K),Z.addEventListener("change",j),this.#S=()=>{J.removeEventListener("pointerdown",Y),J.removeEventListener("pointermove",Q),J.removeEventListener("pointerup",W),J.removeEventListener("pointercancel",W),J.removeEventListener("lostpointercapture",W),Z.removeEventListener("input",K),Z.removeEventListener("change",j),this.#f=!1}}#RJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=(K,j)=>_("fig-tooltip",{text:K},j),$=(K,j,U,L,q,z)=>_("fig-input-number",{className:K,"aria-label":j,min:U,max:L,step:q,units:z}),X=this.getAttribute("alpha")!=="false",Y=()=>X?Z("Alpha",$("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Q=(K,j="")=>_("div",{className:["input-combo",j].filter(Boolean).join(" ")},K),W;switch(this.#_){case"rgb":W=Q([Z("Red",$("fig-fill-picker-ci-r","Red",0,255)),Z("Green",$("fig-fill-picker-ci-g","Green",0,255)),Z("Blue",$("fig-fill-picker-ci-b","Blue",0,255)),Y()]);break;case"hsl":W=Q([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Lightness",$("fig-fill-picker-ci-l","Lightness",0,100)),Y()]);break;case"hsb":W=Q([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Brightness",$("fig-fill-picker-ci-v","Brightness",0,100)),Y()]);break;case"lab":W=Q([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Green-Red axis",$("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Z("Blue-Yellow axis",$("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),Y()]);break;case"lch":W=Q([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Chroma",$("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Z("Hue",$("fig-fill-picker-ci-okh","Hue",0,360)),Y()]);break;case"css":W=_("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=_("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});W=X?_("fig-input-combo",{className:"input-combo fig-fill-picker-ci-hex-row",full:!0},[K,Y()]):K}break}J.replaceChildren(W),this.#nJ(),this.#I(()=>this.#VJ())}#nJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=()=>{if(this.#f)return;let Y=this.#eJ();if(!Y)return;let Q=Number.isFinite(Y.a)?Y.a:this.#W.a;if(this.#W={...Y,a:Q},this.#o(),this.#s(),this.#P)this.#P.setAttribute("value",this.#W.h);if(this.#T&&Number.isFinite(Y.a))this.#T.setAttribute("value",this.#W.a*100);this.#O()},$=()=>this.#n();J.querySelectorAll("fig-input-number, fig-input-text").forEach((Y)=>{Y.addEventListener("input",Z),Y.addEventListener("change",$)})}#tJ(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Z=parseFloat(J.value);if(!Number.isFinite(Z))return;return Math.max(0,Math.min(1,Z/100))}#eJ(){let J=(X)=>this.#J?.querySelector(`.${X}`),Z=(X)=>parseFloat(J(X)?.value??0),$=(X)=>{if(!X)return null;let Y=this.#tJ();return{...X,a:Y??X.a??this.#W.a}};switch(this.#_){case"rgb":return $(this.#BJ({r:Z("fig-fill-picker-ci-r"),g:Z("fig-fill-picker-ci-g"),b:Z("fig-fill-picker-ci-b")}));case"hsl":{let X=this.#fZ({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),l:Z("fig-fill-picker-ci-l")});return $(this.#BJ(X))}case"hsb":return $({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),v:Z("fig-fill-picker-ci-v")});case"lab":{let X=this.#DZ({l:Z("fig-fill-picker-ci-okl")/100,a:Z("fig-fill-picker-ci-oka"),b:Z("fig-fill-picker-ci-okb")});return $(this.#BJ(X))}case"lch":{let X=this.#CZ({l:Z("fig-fill-picker-ci-okl")/100,c:Z("fig-fill-picker-ci-okc"),h:Z("fig-fill-picker-ci-okh")});return $(this.#BJ(X))}case"css":{let X=J("fig-fill-picker-ci-css");if(!X)return null;return this.#GZ(X.value)}default:{let X=J("fig-fill-picker-ci-hex");if(!X)return null;let Y=X.value.replace(/^#/,"");if(Y.length===3)Y=Y[0]+Y[0]+Y[1]+Y[1]+Y[2]+Y[2];if(Y.length===8){let Q=parseInt(Y.slice(6,8),16)/255;if(Y=Y.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(Y))return null;return{...this.#NJ(`#${Y}`),a:Q}}if(Y.length!==6||!/^[0-9a-fA-F]{6}$/.test(Y))return null;return $(this.#NJ(`#${Y}`))}}}#VJ(){if(!this.#J)return;let J=this.#WJ(this.#W),Z=this.#lJ(this.#W),$=(Y)=>this.#J.querySelector(`.${Y}`),X=(Y,Q)=>{let W=$(Y);if(W)W.setAttribute("value",Q)};switch(this.#_){case"rgb":X("fig-fill-picker-ci-r",Z.r),X("fig-fill-picker-ci-g",Z.g),X("fig-fill-picker-ci-b",Z.b);break;case"hsl":{let Y=this.#NZ(Z);X("fig-fill-picker-ci-h",Math.round(Y.h)),X("fig-fill-picker-ci-s",Math.round(Y.s)),X("fig-fill-picker-ci-l",Math.round(Y.l));break}case"hsb":X("fig-fill-picker-ci-h",Math.round(this.#W.h)),X("fig-fill-picker-ci-s",Math.round(this.#W.s)),X("fig-fill-picker-ci-v",Math.round(this.#W.v));break;case"lab":{let Y=this.#FZ(Z);X("fig-fill-picker-ci-okl",Math.round(Y.l*100)),X("fig-fill-picker-ci-oka",+Y.a.toFixed(3)),X("fig-fill-picker-ci-okb",+Y.b.toFixed(3));break}case"lch":{let Y=this.#TZ(Z);X("fig-fill-picker-ci-okl",Math.round(Y.l*100)),X("fig-fill-picker-ci-okc",+Y.c.toFixed(3)),X("fig-fill-picker-ci-okh",Math.round(Y.h));break}case"css":X("fig-fill-picker-ci-css",this.#kZ(this.#W));break;default:X("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#_!=="css"){let Y=Math.round(this.#W.a*1000)/10;X("fig-fill-picker-ci-a",Number.isInteger(Y)?Y:+Y.toFixed(1))}if(this.#T)this.#T.setAttribute("color",J);this.#G()}#JZ(){{let U=this.#J.querySelector('[data-tab="gradient"]'),L=document.createElement("fig-gradient-editor");L.value=w(this.#$),L.setAttribute("color-space",this.#L),L.toggleAttribute("disabled",this.#C()),L.pickerAnchor=this.#J;let q=(z)=>{if(z.stopPropagation(),!z.detail?.gradient)return;if(this.#$=u(z.detail.gradient),this.#G(),z.type==="change")this.#n();else this.#O()};L.addEventListener("input",q),L.addEventListener("change",q),U.replaceChildren(L);return}let J=this.#J.querySelector('[data-tab="gradient"]'),Z=_("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#$.type,variant:"ghost"},_("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,L])=>_("fig-select-option",{value:U},L)))),$=(U,L,q)=>_("fig-tooltip",{text:U},_("fig-button",{icon:!0,variant:"ghost",className:L,"aria-label":U},I(q))),X=_("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[$("Flip gradient","fig-fill-picker-gradient-flip","swap"),$("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),Y=_("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[Z,X]),Q=_("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:w(this.#$)})}),W=_("fig-preview",{className:"fig-fill-picker-gradient-preview"},Q),K=_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},I("add")),j=_("div",{className:"fig-fill-picker-gradient-stops"},[_("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[_("h3",{},"Stops"),K]),_("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(Y,W,j),this.#YJ(),this.#ZZ(J)}#PZ(){let J=({value:X,title:Y,subtitle:Q,advanced:W=!1})=>_("fig-select-option",{value:X,label:`${Y} — ${Q}`,className:W?"fig-fill-picker-gradient-interpolation-advanced":null},[_("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),_("span",{className:"fig-fill-picker-gradient-interpolation-label"},[_("span",{className:"fig-fill-picker-gradient-interpolation-title"},Y),_("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Q)])]),Z=_("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),$=P.#Z;return[...$.filter((X)=>!X.advanced).map(J),Z,...$.filter((X)=>X.advanced).map(J)]}#ZZ(J){let Z=(O)=>typeof O.detail==="string"?O.detail:O.target?.value,$=J.querySelector(".fig-fill-picker-gradient-bar-input"),X=(O)=>{if(!$)return;this.#D=!0;try{$.value={type:"gradient",gradient:w(O)}}finally{this.#D=!1}},Y=()=>{X(this.#$)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(O)=>{let V=Z(O);if(!V)return;this.#$.type=V,this.#YJ(),this.#O()});let W=J.querySelector(".fig-fill-picker-gradient-space"),K=W?.querySelector("fig-select-options"),j="fig-fill-picker-gradient-interpolation-collapsed",U=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),L=()=>Boolean(K?.classList.contains(j)),q=(O)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",O?"Show all color interpolation options":"Scroll down")},z=()=>{if(!K)return;K.classList.remove(j),K.style.removeProperty("max-height"),q(!1),K.syncOverflow?.()},H=()=>{if(!K||!U)return;K.style.removeProperty("max-height"),K.classList.add(j),K.scrollTop=0;let O=K.getBoundingClientRect().top,V=U.getBoundingClientRect().top,T=K.querySelector(".fig-overflow-end")?.offsetHeight||0,R=V-O;if(R>0)K.style.maxHeight=`${Math.round(R+T)}px`;q(!0),K.syncOverflow?.()},M=(O)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${O}"]`)),B=()=>{if(M(n(this.#$)))z();else H()};if(K?.addEventListener("click",(O)=>{if(!L())return;if(!O.target?.closest?.(".fig-overflow-end"))return;O.preventDefault(),O.stopPropagation(),z()},!0),K?.addEventListener("focusin",(O)=>{if(!L())return;if(O.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))z()}),K?.addEventListener("scroll",()=>{if(L()&&K.scrollTop!==0)K.scrollTop=0}),W?.querySelectorAll("fig-select-option").forEach((O)=>{let V=()=>{let T=S(O.getAttribute("value")||"srgb");X(C({...this.#$,...T}))};O.addEventListener("pointerenter",V),O.addEventListener("pointerleave",()=>{if(document.activeElement!==O)Y()}),O.addEventListener("focus",V),O.addEventListener("blur",()=>{if(!O.matches(":hover"))Y()})}),this.#d?.disconnect(),W)this.#d=new MutationObserver(()=>{if(!W.hasAttribute("open"))Y();else this.#I(B)}),this.#d.observe(W,{attributes:!0,attributeFilter:["open"]});let G=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(G?.addEventListener("change",(O)=>{let V=typeof O.detail==="string"?O.detail:O.target?.value;if(!V)return;let T=S(V);this.#$=C({...this.#$,...T}),this.#YJ(),this.#O()}),G?.querySelectorAll("fig-segment").forEach((O)=>{let V=()=>{X(C({...this.#$,...S(O.getAttribute("value")||"srgb")}))};O.addEventListener("pointerenter",V),O.addEventListener("pointerleave",Y)}),W?.addEventListener("change",(O)=>{let V=Z(O);if(!V)return;let T=S(V);this.#$=C({...this.#$,...T}),this.#YJ(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#$.angle=(Number(this.#$.angle)+90)%360,this.#YJ(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#$.stops.forEach((O)=>{O.position=100-O.position}),this.#$.stops.sort((O,V)=>O.position-V.position),this.#YJ(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#$.stops.push({position:50,color:"#888888",opacity:100}),this.#$.stops.sort((V,T)=>V.position-T.position),this.#YJ(),this.#O()}),$){let O=(V)=>{if(V.stopPropagation(),this.#D)return;let T=V.detail;if(!T?.gradient)return;this.#$=u({...this.#$,...T.gradient}),this.#G(),this.#CJ(),this.#iJ()};$.addEventListener("input",(V)=>{O(V),this.#O()}),$.addEventListener("change",(V)=>{O(V),this.#n()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(O)=>{this.#QZ(O)})}#pJ(J){let Z=String(J.color||"#888888").replace(/^#/,"").slice(0,6),$=J.opacity??100;if($>=100)return`#${Z}`;let X=Math.round($/100*255).toString(16).padStart(2,"0");return`#${Z}${X}`}#$Z(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#cJ(J.hexOpaque);let Z=J.value;if(typeof Z==="string"&&Z.startsWith("#"))return this.#cJ(Z.length>7?Z.slice(0,7):Z);let $=J.querySelector('fig-input-text:not([type="number"])'),X=String($?.value??$?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(X))return`#${X.toUpperCase()}`;let Y=J.getAttribute("value");if(typeof Y==="string"&&Y.startsWith("#"))return this.#cJ(Y.length>7?Y.slice(0,7):Y);return"#888888"}#cJ(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Z))return"#888888";return`#${Z.toUpperCase()}`}#XZ(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=parseFloat(Z?.value??Z?.getAttribute("value")??"0")||0,Y=this.#$Z($),Q=100;if($ instanceof HTMLElement&&$.rgba?.a!==void 0)Q=Math.round($.rgba.a*100);else{let W=parseInt(J.dataset.index,10);if(!isNaN(W)&&this.#$.stops[W])Q=this.#$.stops[W].opacity??100}return{position:X,color:Y,opacity:Q}}#sJ(J){let Z=parseInt(J.dataset.index,10);if(isNaN(Z)||Z<0||Z>=this.#$.stops.length)return;let $={...this.#$.stops[Z],...this.#XZ(J)};this.#$.stops[Z]=$,this.#YZ(J,$)}#YZ(J,Z){let $=J.querySelector(".fig-fill-picker-stop-position");if($)$.setAttribute("value",String(Z.position));let X=J.querySelector(".fig-fill-picker-stop-color");if(X)X.setAttribute("value",this.#pJ(Z))}#QZ(J){let{oldIndex:Z,newIndex:$}=J.detail??{};if(Z==null||$==null||Z===$||Z<0||$<0||Z>=this.#$.stops.length||$>=this.#$.stops.length)return;let Y=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Y.forEach((W)=>this.#sJ(W));let[Q]=this.#$.stops.splice(Z,1);this.#$.stops.splice($,0,Q),Y.forEach((W,K)=>{W.dataset.index=String(K)}),this.#D=!0;try{this.#CJ(),this.#PJ(),this.#O()}finally{this.#D=!1}}#YJ(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#$=u(this.#$);let Z=J.querySelector("fig-gradient-editor");if(Z){Z.value=this.#$,Z.setAttribute("color-space",this.#L),Z.toggleAttribute("disabled",this.#C()),Z.pickerAnchor=this.#J;return}let $=n(this.#$),X=J.querySelector(".fig-fill-picker-gradient-space");if(X)X.value=$;let Y=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(Y){let Q=P.#Y($),W=Y.querySelector(`fig-segment[value="${$}"]`)||Y.querySelector(`fig-segment[data-space="${Q.space}"]`);if(W){let K=`${Q.title} — ${Q.subtitle}`;W.setAttribute("value",$),W.setAttribute("aria-label",K);let j=W.closest("fig-tooltip");if(j)j.setAttribute("text",K);Y.value=$}}this.#CJ(),this.#PJ(),this.#iJ()}#WZ(){let J=Array.isArray(this.#$.stops)?[...this.#$.stops].sort((Z,$)=>(Z.position??0)-($.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Z)=>({color:String(Z.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Z.position??0}))}#CJ(){if(!this.#J)return;let J=this.#WZ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Z)=>{let $=Z.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",X=S($),Y={type:"linear",stops:J,interpolationSpace:X.interpolationSpace};if(x.has(X.interpolationSpace))Y.hueInterpolation=X.hueInterpolation;Z.value={type:"gradient",gradient:Y}})}#PJ(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"] > fig-gradient-editor');if(J){J.value=this.#$,J.setAttribute("color-space",this.#L),this.#G();return}let Z=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(Z)this.#D=!0,Z.value={type:"gradient",gradient:w(this.#$)},this.#D=!1;this.#G()}#iJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Z=J?.querySelector("fig-reorder");if(!J||!Z)return;let $=Z.querySelectorAll(".fig-fill-picker-gradient-stop-row");if($.length===this.#$.stops.length){this.#$.stops.forEach((X,Y)=>{let Q=$[Y];Q.dataset.index=Y;let W=Q.querySelector(".fig-fill-picker-stop-position");if(W)W.setAttribute("value",X.position);let K=Q.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#pJ(X));let j=Q.querySelector(".fig-fill-picker-stop-remove");if(j)if(this.#$.stops.length<=2)j.setAttribute("disabled","");else j.removeAttribute("disabled")});return}this.#KZ(J)}#KZ(J){let Z=J.querySelector("fig-reorder");if(!Z)return;let $=this.#$.stops.map((X,Y)=>_("fig-property",{className:"fig-fill-picker-gradient-stop-row","data-index":Y,leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},_("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[_("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%"}),_("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.#pJ(X)})])));Z.replaceChildren(...$),Z.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{X.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#sJ(X),this.#CJ(),this.#PJ(),this.#O()});let Y=X.querySelector(".fig-fill-picker-stop-color"),Q=Y.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#J;else this.#I(()=>{let j=Y.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#J});let W=()=>{this.#sJ(X),this.#D=!0;try{this.#CJ(),this.#PJ(),this.#O()}finally{this.#D=!1}};Y.addEventListener("input",W),Y.addEventListener("change",W);let K=X.querySelector(':scope > [data-fig-property-action="remove"]');K.classList.add("fig-fill-picker-stop-remove"),K.setAttribute("aria-label","Remove gradient stop"),K.toggleAttribute("disabled",this.#$.stops.length<=2),X.addEventListener("remove",(j)=>{j.stopPropagation();let U=parseInt(X.dataset.index,10);if(this.#$.stops.length>2)this.#$.stops.splice(U,1),this.#YJ(),this.#O()})})}#AZ(J,Z=!0){let $=C({...this.#$,interpolationSpace:J??this.#$.interpolationSpace}),X=this.#L==="display-p3",Y=$.stops.map((K)=>{let j=(K.opacity??100)/100;return`${X?this.#BZ(K.color,j):this.#MZ(K.color,j)} ${K.position}%`}).join(", "),Q=RJ($),W=Z&&Q?` ${Q}`:"";switch($.type){case"linear":return`linear-gradient(${$.angle}deg${W}, ${Y})`;case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%${W}, ${Y})`;case"angular":return`conic-gradient(from ${$.angle}deg${W}, ${Y})`;default:return`linear-gradient(${$.angle}deg${W}, ${Y})`}}static#rJ=new Map;#RZ(J){let Z=P.#rJ.get(J);if(Z!==void 0)return Z;let $=document.createElement("div");$.style.background=J;let X=!!$.style.background;return P.#rJ.set(J,X),X}#oJ(){return v(this.#$,{colorSpace:this.#L})}#jZ(){let J=this.#J.querySelector('[data-tab="image"]'),Z=_("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#z.scaleMode},_("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Q,W])=>_("fig-select-option",{value:Q},W)))),$=_("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#z.scale,units:"%"});if(this.#z.scaleMode!=="tile")$.style.display="none";let X=_("fig-field",{className:"fig-fill-picker-media-header"},[Z,$]),Y=_("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,Y),this.#UZ(J)}#UZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-scale"),X=J.querySelector(".fig-fill-picker-image-preview");Z.addEventListener("change",(Y)=>{let Q=typeof Y.detail==="string"?Y.detail:Y.target?.value;if(!Q)return;this.#z.scaleMode=Q,$.style.display=Q==="tile"?"block":"none",this.#zJ(X),this.#G(),this.#O()}),$.addEventListener("input",(Y)=>{this.#z.scale=parseFloat(Y.target.value)||100,this.#zJ(X),this.#G(),this.#O()}),X.addEventListener("loaded",(Y)=>{let Q=Y.detail?.src||X.src;if(!Q)return;let W=Q!==this.#z.url;if(this.#z.url=Q,this.#zJ(X),this.#G(),W)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:Y.detail??{src:Q}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#z.url=null,this.#zJ(X),this.#G(),this.#O()}),this.#zJ(X)}#zJ(J){if(!this.#z.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.#z.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#z.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.#z.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#z.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#kJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#X.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#X.url),this.#X.poster)J.setAttribute("poster",this.#X.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#X.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.#X.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#qZ(){let J=this.#J.querySelector('[data-tab="video"]'),Z=_("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#X.scaleMode},_("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([Y,Q])=>_("fig-select-option",{value:Y},Q)))),$=_("fig-field",{className:"fig-fill-picker-media-header"},Z),X=_("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($,X),this.#LZ(J),this.#EJ({emit:!1})}#GJ(){if(this.#X.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#X.poster),this.#w.delete(this.#X.poster);this.#X.poster=null,this.#g=null}#yJ(){if(!this.#X.poster)return;if(this.#g&&this.#g===this.#X.url)return;this.#GJ()}#dJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#kJ(J)}#EJ({emit:J=!1}={}){if(this.#X.url){if(this.#X.missing=!1,this.#yJ(),!this.#X.poster)this.#SJ(this.#X.url);else this.#dJ();return}let Z=this.getAttribute("default-video");if(!Z){this.#X.missing=!0;return}if(this.#X.url=Z,this.#X.missing=!1,this.#dJ(),this.#SJ(Z),J)this.#O()}#aJ(){if(this.#j!=="video")return;let J=this.#X.url;if(!J)return;if(this.#yJ(),this.#X.poster)return;this.#SJ(J)}async#zZ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Z)=>J.requestVideoFrameCallback(()=>Z())),new Promise((Z)=>setTimeout(Z,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#_Z(J){let Z=await this.#zZ(J),$=Z?.width||J.videoWidth,X=Z?.height||J.videoHeight;if(!$||!X)return Z?.close?.(),null;let Y=typeof OffscreenCanvas==="function"?new OffscreenCanvas($,X):Object.assign(document.createElement("canvas"),{width:$,height:X}),Q=Y.getContext("2d");if(!Q)return Z?.close?.(),null;try{Q.drawImage(Z||J,0,0,$,X)}finally{Z?.close?.()}return Y.convertToBlob?Y.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((W)=>Y.toBlob(W,"image/jpeg",0.85))}async#SJ(J,{emit:Z=!1}={}){if(!J||this.#i===J)return;this.#i=J;let $=document.createElement("video");$.muted=!0,$.playsInline=!0,$.preload="auto",$.crossOrigin="anonymous";try{if(await new Promise((Y,Q)=>{let W=()=>Q(Error("video poster failed"));$.addEventListener("error",W,{once:!0}),$.addEventListener("loadeddata",Y,{once:!0}),$.src=J}),!$.videoWidth||!$.videoHeight)return;let X=await this.#_Z($);if(!X||this.#X.url!==J)return;if(this.#GJ(),this.#X.poster=URL.createObjectURL(X),this.#g=J,this.#w.add(this.#X.poster),this.#G(),this.#dJ(),Z)this.#O()}catch{}finally{if($.removeAttribute("src"),$.load(),this.#i===J)this.#i=null}}#LZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-video-preview");Z.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#X.scaleMode=Y,this.#kJ($),this.#G(),this.#O()}),$.addEventListener("loaded",(X)=>{let Y=X.detail?.src||$.src;if(!Y)return;let Q=Y!==this.#X.url;if(Q)this.#GJ();if(this.#X.url=Y,this.#X.missing=!1,this.#kJ($),this.#SJ(Y),this.#G(),Q)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),$.addEventListener("change",()=>{if($.src)return;this.#X.url=null,this.#GJ(),this.#EJ(),this.#kJ($),this.#G(),this.#O()}),this.#kJ($)}#OZ(){let J=this.#J.querySelector('[data-tab="webcam"]'),Z=_("fig-field",{className:"fig-fill-picker-webcam-camera"},_("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Z.style.display="none";let $=_("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});$.muted=!0;let X=_("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},_("span",{},"Camera access required")),Y=_("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[$,X]),Q=_("div",{className:"fig-fill-picker-webcam-controls"},_("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Z,Y,Q),this.#HZ(J)}#HZ(J){let Z=J.querySelector(".fig-fill-picker-webcam-video"),$=J.querySelector(".fig-fill-picker-webcam-status"),X=J.querySelector(".fig-fill-picker-webcam-capture"),Y=J.querySelector(".fig-fill-picker-webcam-camera"),Q=J.querySelector(".fig-fill-picker-camera-select"),W=(q)=>{if(q)X.removeAttribute("disabled");else X.setAttribute("disabled","")},K=()=>{let q=!!this.#Q.stream&&Z.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Z.videoWidth>0&&Z.videoHeight>0;if(W(q),q)$.querySelector("span").textContent="Camera ready",$.style.display="none",this.#IJ(Z)};Z.addEventListener("loadedmetadata",K),Z.addEventListener("canplay",K),Z.addEventListener("playing",K);let j=(q)=>{this.#Q.stream=q,Z.srcObject=q,Z.muted=!0,Z.playsInline=!0,Z.style.display="block";let z=Z.play?.();if(z?.catch)z.catch(()=>{});K()},U=async(q,z)=>{let H=await navigator.mediaDevices.enumerateDevices();if(q!=null&&q!==this.#h)return;let M=H.filter((B)=>B.kind==="videoinput");if(M.length>1){Y.style.display="";let B=Q.querySelector(":scope > fig-select-options");if(!B)B=document.createElement("fig-select-options"),Q.append(B);if(B.replaceChildren(),M.forEach((G,f)=>{let O=document.createElement("fig-select-option");O.value=G.deviceId;let V=G.label||(M.length>1?`Camera ${f+1}`:"Camera");O.textContent=V.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(T,R)=>{return` ${/^\d+$/.test(R)?Number.parseInt(R,10).toString():R.replace(/^0+/,"")||"0"}`}),B.append(O)}),z)Q.value=z}else Y.style.display="none",Q.querySelector(":scope > fig-select-options")?.replaceChildren()},L=async(q=null)=>{let z=q||this.#Q.deviceId||null,H=this.#Q.stream,M=H?.getTracks?.().filter((G)=>G.readyState!=="ended")??[];if(H&&M.length){let G=H.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#Q.deviceId||null;if(!z||z===G){j(H),this.#p(),U(null,z||G);return}}this.#qJ({emit:Boolean(H)});let B=this.#h;W(!1),$.querySelector("span").textContent="Starting camera",$.style.display="flex";try{let G={video:z?{deviceId:{exact:z}}:!0},f=await navigator.mediaDevices.getUserMedia(G);if(B!==this.#h||!this.isConnected||this.#q!=="webcam"){f.getTracks().forEach((V)=>V.stop());return}let O=f.getVideoTracks?.()?.[0];this.#Q.deviceId=z||O?.getSettings?.()?.deviceId||null,this.#Q.live=this.#t()==="live",j(f),this.#p(),await U(B,z)}catch(G){if(B!==this.#h)return;console.error("Webcam error:",G.name,G.message);let f="Camera access denied";if(G.name==="NotAllowedError")f="Camera permission denied";else if(G.name==="NotFoundError")f="No camera found";else if(G.name==="NotReadableError")f="Camera in use by another app";else if(G.name==="OverconstrainedError")f="Camera constraints not supported";else if(!window.isSecureContext)f="Camera requires secure context";$.replaceChildren();let O=document.createElement("span");O.textContent=f,$.appendChild(O),$.style.display="flex",Z.style.display="none",W(!1)}};this.#x=L,Q.addEventListener("change",(q)=>{let z=typeof q.detail==="string"?q.detail:q.target?.value;if(!z||z===this.#Q.deviceId)return;L(z)}),X.addEventListener("click",async()=>{if(!this.#Q.stream)return;let q=await this.#LJ(Z);if(!q)return;this.#z.url=q,this.#Q.live=!1;let z=this.#J.querySelector(".fig-fill-picker-image-preview");if(z)this.#zJ(z);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((M)=>M.dataset.tab==="image"))this.#MJ("image");else this.#G(),this.#O();this.#n()})}#lJ(J){return _J(J.h,J.s,J.v)}#BJ(J){return{...MJ(J.r,J.g,J.b),a:1}}#WJ(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Z=this.#lJ(J),$=(X)=>{return(isNaN(X)?217:Math.max(0,Math.min(255,Math.round(X)))).toString(16).padStart(2,"0")};return`#${$(Z.r)}${$(Z.g)}${$(Z.b)}`}#NJ(J){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return this.#BJ({r:Z,g:$,b:X})}#MZ(J,Z=1){let $=parseInt(J.slice(1,3),16),X=parseInt(J.slice(3,5),16),Y=parseInt(J.slice(5,7),16);return`rgba(${$}, ${X}, ${Y}, ${Z})`}#VZ(J){let Z=Math.max(0,Math.min(1,Number(J)||0)),$=Math.round(Z*1000)/1000;return String($)}#kZ(J=this.#W){let Z=this.#lJ(J);return`rgba(${Z.r}, ${Z.g}, ${Z.b}, ${this.#VZ(J.a)})`}#GZ(J){let Z=String(J??"").trim();if(!Z)return null;let $=Z.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if($){let Y=$[1];if(Y.length===3)Y=Y[0]+Y[0]+Y[1]+Y[1]+Y[2]+Y[2];let Q=1;if(Y.length===8)Q=parseInt(Y.slice(6,8),16)/255,Y=Y.slice(0,6);return{...this.#NJ(`#${Y}`),a:Q}}let X=Z.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(X){let Y=Math.max(0,Math.min(255,Math.round(parseFloat(X[1])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(X[2])))),W=Math.max(0,Math.min(255,Math.round(parseFloat(X[3])))),K=X[4]!==void 0?Math.max(0,Math.min(1,parseFloat(X[4]))):1;if(![Y,Q,W,K].every(Number.isFinite))return null;return{...this.#BJ({r:Y,g:Q,b:W}),a:K}}return null}#BZ(J,Z=1){let $=t(J),X=i($.r,$.g,$.b,{from:"srgb",to:"display-p3"}),Y=+(X.r/255).toFixed(4),Q=+(X.g/255).toFixed(4),W=+(X.b/255).toFixed(4);return`color(display-p3 ${Y} ${Q} ${W} / ${Z})`}#NZ(J){return e(J.r,J.g,J.b)}#fZ(J){return r(J.h,J.s,J.l)}#FZ(J){return JJ(J.r,J.g,J.b)}#TZ(J){return VJ(J.r,J.g,J.b)}#DZ(J){return OJ(J.l,J.a,J.b)}#CZ(J){return HJ(J.l,J.c,J.h)}#O(){if(this.#C())return;this.#G(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#n(){if(this.#C())return;this.#y=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#j,colorSpace:this.#L};switch(this.#j){case"solid":return{...J,color:this.#WJ(this.#W),alpha:this.#W.a,hsv:{...this.#W}};case"gradient":return{...J,gradient:w(this.#$),css:this.#oJ()};case"image":return{...J,image:{...this.#z}};case"video":return{...J,video:this.#v()};case"webcam":return{...J,webcam:this.#e()};default:return{...J,...this.#E[this.#j]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Z,$){if(Z===$)return;switch(J){case"value":if(this.#AJ(),this.#G(),this.#aJ(),this.#J?.open&&!this.#f)this.#gJ(),this.#y=JSON.stringify(this.value);break;case"disabled":if(this.#ZJ(),this.#C()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let X=this.#J.open;if(this.#TJ(),X&&this.isConnected)this.#UJ();break}case"webcam-mode":if(this.#j==="webcam")this.#G();break;case"default-video":if(this.#j==="video")this.#EJ({emit:!1}),this.#G();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#OJ());case"aria-labelledby":case"aria-describedby":this.#ZJ();break}}}A("fig-fill-picker",P);class k extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#Y=10;static#K=10;static#U=8;static#J=3;static#V=210;static#q={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#j=!1;#L=null;#W=null;#_={...k.#q};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#_}}}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.#$(),this.#z(),this.#f(),this.#D()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J!=="value")return;if(this.#z(),this.#j)this.#D()}#$(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#z(){let J=this.getAttribute("value");if(!J){this.#_={...k.#q,stops:k.#q.stops.map((Z)=>({...Z}))};return}try{let Z=JSON.parse(J),$=Z?.type==="gradient"&&Z.gradient?Z.gradient:Z?.gradient?Z.gradient:Z;if(!$||typeof $!=="object")return;this.#_=this.#X({...k.#q,...$})}catch{}}#X(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),X=String(Z.hueInterpolation??"shorter").toLowerCase(),Y=Array.isArray(Z.stops)?Z.stops.map((Q)=>({color:String(Q?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q?.position??0,opacity:Q?.opacity??100})):k.#q.stops.map((Q)=>({...Q}));if(Y.length<2)return{...k.#q,stops:k.#q.stops.map((Q)=>({...Q}))};return{type:["linear","radial","angular"].includes(Z.type)?Z.type:"linear",angle:Number.isFinite(Number(Z.angle))?Number(Z.angle):135,interpolationSpace:$,hueInterpolation:X,stops:Y}}#Q(){return k.#Z.has(this.#_.interpolationSpace||"srgb")}#k(J){let{r:Z,g:$,b:X}=t(J);if(this.#_.interpolationSpace==="hsl")return e(Z,$,X).h;let Y=JJ(Z,$,X);return(LJ(Y.l,Y.a,Y.b).h%360+360)%360}#F(){let J=this.#N(),Z=this.#k(J[0]?.color||"#FF0000"),$=this.#k(J[J.length-1]?.color||"#4F9EFF"),X=k.#V-Z,Q=((k.#V-$-X)%360+360)%360,W=Q===0?0:Q-360,K=this.#_.hueInterpolation||"shorter",j;if(K==="increasing")j=W;else if(K==="decreasing")j=Q;else if(K==="longer")j=Q<180?W:Q;else j=Q<=180?Q:W;let U=Math.sign(j),L=Math.asin(k.#J/2/k.#U)*180/Math.PI,q=Math.min(L,Math.max(0,(Math.abs(j)-0.01)/2));return{startDeg:X+U*q,sweepDeg:j-U*q*2}}#H(J){let Z=J*Math.PI/180;return{x:k.#Y+k.#U*Math.cos(Z),y:k.#K+k.#U*Math.sin(Z)}}#M(J,Z){let $=J+Z,X=this.#H(J),Y=this.#H($),Q=Math.abs(Z)>180?1:0,W=Z>=0?1:0;return`M ${X.x} ${X.y} A ${k.#U} ${k.#U} 0 ${Q} ${W} ${Y.x} ${Y.y}`}#E(){let J=this.#H(180),Z=this.#H(0);return`M ${J.x} ${J.y} L ${Z.x} ${Z.y}`}#B(J){let Z=k.#J,$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Z}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent($)}")`}#N(){return[...this.#_.stops].sort((J,Z)=>(J.position??0)-(Z.position??0))}#P(){let J=this.#_.interpolationSpace||"srgb";if(J==="srgb")return"";if(k.#Z.has(J))return` in ${J} ${this.#_.hueInterpolation||"shorter"} hue`;return` in ${J}`}#T(){let J=this.#N(),Z=this.#P();if(this.#Q()){let X=(k.#V+90)%360,Y=this.#_.interpolationSpace,Q=(K)=>Y==="oklch"?`oklch(65% 0.25 ${K})`:`hsl(${K} 100% 50%)`,W=[0,300,240,180,120,60,0].map(Q).join(", ");return`conic-gradient(from ${X}deg in ${Y} decreasing hue, ${W})`}let $=J.map((X)=>`${X.color} ${X.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#f(){if(this.#j)return;let J=k.#J,Z=o("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},o("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),$=_("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Z,$),this.#L=Z,this.#W=$,this.#j=!0}#D(){if(!this.#W)return;let J=this.#Q();if(this.#L)this.#L.style.display=J?"":"none";let Z=J?(()=>{let{startDeg:X,sweepDeg:Y}=this.#F();return this.#M(X,Y)})():this.#E(),$=this.#B(Z);this.#W.style.setProperty("-webkit-mask-image",$),this.#W.style.maskImage=$,this.#W.style.background=this.#T()}}A("fig-interpolation-swatch",k);class D extends HTMLElement{static observedAttributes=["axis","handle","items","indicator","disabled"];static#Z=6;static#Y=['[draggable]:not([draggable="false"])','img:not([draggable="false"])','a[href]:not([draggable="false"])','input[type="range"]',"fig-handle","fig-slider","fig-input-number","fig-input-gradient","fig-easing-curve","fig-angle","fig-audio","fig-audio-waveform","fig-input-wheel","fig-joystick","fig-origin-grid","fig-chooser","fig-canvas-control"];static#K=new Set(["data-reorder-item","data-reorder-generated-role","data-reorder-handle","role","tabindex","aria-label","aria-roledescription"]);#U=null;#J=null;#V=!1;#q=new Map;#j=null;#L=null;#W=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#d(),this.#M(),this.#U=new MutationObserver(()=>this.#M()),this.#U.observe(this,{childList:!0}),this.#_()}disconnectedCallback(){this.#U?.disconnect(),this.#U=null,this.#J?.disconnect(),this.#J=null,this.#p(),this.#r(),this.#m(),this.#W?.remove(),this.#W=null}attributeChangedCallback(J){if(this.isConnected){if(this.#$)this.#r();if(J==="indicator")this.#C();this.#_(),this.#M()}}refresh(){if(this.isConnected)this.#M()}#_(){if(!this.#Q){this.#J?.disconnect(),this.#J=null;return}if(this.#J)return;this.#J=new MutationObserver((J)=>{if(!J.some(($)=>$.target.parentElement===this&&!D.#K.has($.attributeName)&&!($.attributeName==="class"&&$.target===this.#j?.item))||this.#V)return;this.#V=!0,queueMicrotask(()=>{if(this.#V=!1,this.isConnected)this.#M()})}),this.#J.observe(this,{subtree:!0,attributes:!0})}get#$(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#z(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#X(){return(this.getAttribute("handle")||"").trim()}get#Q(){return(this.getAttribute("items")||"").trim()}get#k(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#F(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#H(){let J=this.#F(),Z=this.#Q;if(!Z)return J;try{return J.filter(($)=>$.matches(Z))}catch{return[]}}#M(){let J=this.#F(),Z=this.#H(),$=new Set(Z);for(let[Y,Q]of this.#q)if(!$.has(Y))Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),Q.target.removeEventListener("keydown",Q.onKeyDown),this.#S(Q),this.#q.delete(Y);this.#P(J),this.#E(J),this.#N(J.filter((Y)=>!$.has(Y)));let X=!this.#$&&Z.length>=2;if(this.#B(Z,X),!X){this.#p();return}for(let Y of Z){let Q=this.#f(Y),W=this.#q.get(Y);if(W&&W.target===Q)continue;if(W)W.target.removeEventListener("pointerdown",W.onPointerDown,!0),this.#q.delete(Y);if(!Q)continue;this.#D(Y,Q)}this.#T(Z)}#E(J){for(let Z of J)if(Z.removeAttribute("data-reorder-item"),Z.hasAttribute("data-reorder-generated-role"))Z.removeAttribute("role"),Z.removeAttribute("data-reorder-generated-role")}#B(J,Z=!0){for(let $ of J){if(Z)$.setAttribute("data-reorder-item","");if(!$.hasAttribute("role"))$.setAttribute("role","listitem"),$.setAttribute("data-reorder-generated-role","")}}#N(J){for(let Z of J)if(!Z.hasAttribute("role"))Z.setAttribute("role","none"),Z.setAttribute("data-reorder-generated-role","")}#P(J){for(let Z of J)Z.querySelectorAll("[data-reorder-handle]").forEach(($)=>{$.removeAttribute("data-reorder-handle"),$.removeAttribute("aria-roledescription")})}#T(J){if(!this.#X)return;for(let Z of J){let $=Z.querySelector(this.#X);if($)$.setAttribute("data-reorder-handle",""),$.setAttribute("aria-roledescription","reorder handle")}}#f(J){if(this.#X)return J.querySelector(this.#X);return J}#D(J,Z){let $=(j)=>{if(this.#$||this.#H().length<2)return;if(j.button!==0)return;if(!this.#X&&this.#y(j.target,J))return;this.#l(j,J,Z)},X=Z.getAttribute("tabindex"),Y=Z.getAttribute("aria-label"),Q=Z.getAttribute("role"),W=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Z.setAttribute("tabindex","0"),Z.setAttribute("aria-label",`Move ${W}`),Z!==J&&!Z.hasAttribute("role"))Z.setAttribute("role","button");let K=(j)=>{if(this.#$)return;let U=this.#z==="horizontal",L=U?"ArrowLeft":"ArrowUp",q=U?"ArrowRight":"ArrowDown";if(j.key!==L&&j.key!==q&&j.key!=="Home"&&j.key!=="End")return;j.preventDefault(),j.stopPropagation();let z=this.#H(),H=z.indexOf(J),M=H;if(j.key===L)M=Math.max(0,H-1);else if(j.key===q)M=Math.min(z.length-1,H+1);else if(j.key==="Home")M=0;else if(j.key==="End")M=z.length-1;if(M===H){this.#A(`${W}, position ${H+1} of ${z.length}`);return}this.#v(J,M),this.#M(),this.#f(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:H,newIndex:M,item:J}})),this.#A(`${W}, position ${M+1} of ${z.length}`)};Z.addEventListener("pointerdown",$,!0),Z.addEventListener("keydown",K),this.#q.set(J,{target:Z,onPointerDown:$,onKeyDown:K,originalTabIndex:X,originalAriaLabel:Y,originalRole:Q})}#S(J){let{target:Z,originalTabIndex:$,originalAriaLabel:X,originalRole:Y}=J;if($===null)Z.removeAttribute("tabindex");else Z.setAttribute("tabindex",$);if(X===null)Z.removeAttribute("aria-label");else Z.setAttribute("aria-label",X);if(Y===null)Z.removeAttribute("role");else Z.setAttribute("role",Y)}#d(){if(this.#W?.isConnected)return;let J=document.createElement("span");J.setAttribute("data-reorder-live",""),J.setAttribute("role","status"),J.setAttribute("aria-live","polite"),J.setAttribute("aria-atomic","true"),Object.assign(J.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#W=J,document.body.appendChild(J)}#A(J){if(!this.#W)return;this.#W.textContent="",requestAnimationFrame(()=>{if(this.#W)this.#W.textContent=J})}#y(J,Z){let $=J;while($&&$!==Z){if($ instanceof Element){for(let X of D.#Y)if($.matches(X))return!0}$=$.parentElement}return!1}static#x="fig-reorder-dragging";static#h(J){document.body.classList.toggle(D.#x,J)}#l(J,Z,$){this.#r();let X={item:Z,target:$,pointerId:J.pointerId,oldIndex:this.#H().indexOf(Z),targetIndex:this.#H().indexOf(Z),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};X.onMove=(Y)=>{if(Y.pointerId!==X.pointerId)return;let Q=Y.clientX-X.startX,W=Y.clientY-X.startY;if(!X.active){if(Q*Q+W*W<D.#Z*D.#Z)return;X.active=!0,J.preventDefault(),J.stopPropagation(),Z.classList.add("dragging"),D.#h(!0);try{$.setPointerCapture(X.pointerId)}catch{}}Y.preventDefault();let K=this.#z==="horizontal"?Y.clientX:Y.clientY,j=this.#b(K);X.targetIndex=j,this.#t(j,Z)},X.onKeyDown=(Y)=>{if(Y.key!=="Escape"||!X.active)return;Y.preventDefault(),this.#JJ(X,!0)},X.onUp=(Y)=>{if(Y.pointerId!==X.pointerId)return;this.#JJ(X,Y.type==="pointercancel")},this.#j=X,window.addEventListener("pointermove",X.onMove),window.addEventListener("pointerup",X.onUp),window.addEventListener("pointercancel",X.onUp),window.addEventListener("keydown",X.onKeyDown)}#b(J){let Z=this.#H(),$=this.#z==="horizontal";for(let X=0;X<Z.length;X++){let Y=Z[X].getBoundingClientRect(),Q=$?Y.left+Y.width/2:Y.top+Y.height/2;if(J<Q)return X}return Z.length}#R(J,Z){let $=this.#H(),X=$.indexOf(J);if(X===-1)return!1;let Y=Math.max(0,Math.min(Z,$.length));if(Z===X)return!1;if(Y>=$.length&&X===$.length-1)return!1;return!0}#w(J){if(!J.length)return null;let Z=1/0,$=-1/0,X=1/0,Y=-1/0;for(let Q of J){let W=Q.getBoundingClientRect();Z=Math.min(Z,W.left),$=Math.max($,W.right),X=Math.min(X,W.top),Y=Math.max(Y,W.bottom)}return{left:Z,top:X,width:$-Z,height:Y-X}}#i(){let J=[":popover-open",":modal",":fullscreen"],Z=this.parentElement;while(Z){if(J.some((X)=>{try{return Z.matches(X)}catch{return!1}}))return Z;Z=Z.parentElement}return document.body}#g(){if(this.#L)return this.#L;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#z),J.classList.toggle("fig-reorder-indicator-ring",this.#k==="ring"),this.#i().appendChild(J),this.#L=J,J}#C(){this.#L?.classList.toggle("fig-reorder-indicator-ring",this.#k==="ring")}#t(J,Z){let $=this.#H();if(!this.#R(Z,J)){this.#m();return}let X=this.#w($);if(!X){this.#m();return}let Y=this.#g();if(Y.setAttribute("data-axis",this.#z),this.#z==="horizontal"){let W;if(J<=0)W=$[0].getBoundingClientRect().left;else if(J>=$.length)W=$[$.length-1].getBoundingClientRect().right;else W=$[J].getBoundingClientRect().left;Y.style.left=`${W-1}px`,Y.style.top=`${X.top}px`,Y.style.width="2px",Y.style.height=`${X.height}px`;return}let Q;if(J<=0)Q=$[0].getBoundingClientRect().top;else if(J>=$.length)Q=$[$.length-1].getBoundingClientRect().bottom;else Q=$[J].getBoundingClientRect().top;Y.style.left=`${X.left}px`,Y.style.top=`${Q-1}px`,Y.style.width=`${X.width}px`,Y.style.height="2px"}#m(){this.#L?.remove(),this.#L=null}#e(J,Z){let $=this.#H(),X=Math.max(0,Math.min(Z,$.length));if(X>=$.length){let Q=$[$.length-1];if(Q&&Q!==J)Q.after(J);return}let Y=$[X];if(Y!==J)this.insertBefore(J,Y)}#v(J,Z){let $=this.#H().filter((Y)=>Y!==J),X=$[Z]??null;if(X)this.insertBefore(J,X);else if($.length)$[$.length-1].after(J);else this.appendChild(J)}#JJ(J,Z){let{item:$,oldIndex:X,active:Y,onMove:Q,onUp:W,onKeyDown:K}=J;if(window.removeEventListener("pointermove",Q),window.removeEventListener("pointerup",W),window.removeEventListener("pointercancel",W),window.removeEventListener("keydown",K),Y){if(!Z){this.#e($,J.targetIndex);let j=this.#H().indexOf($);if(j!==-1&&j!==X){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:X,newIndex:j,item:$}}));let U=$.getAttribute("aria-label")||$.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#A(`${U}, position ${j+1} of ${this.#H().length}`)}}}if($.classList.remove("dragging"),D.#h(!1),this.#m(),this.#j===J)this.#j=null}#p(){for(let[,J]of this.#q)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#S(J);this.#q.clear()}#r(){if(!this.#j)return;this.#JJ(this.#j,!0)}}A("fig-reorder",D);

package/fig-gradient-editor.js

@@ -469,7 +469,12 @@ class FigGradientEditor extends HTMLElement {
       this.#handleBarStopSelection,
     );
     this.#gradientBar.addEventListener("click", this.#handleBarStopSelection);
+    this.#gradientBar.addEventListener(
+      "keydown",
+      this.#handleDeleteSelectedStop,
+    );
     this.#reorder.addEventListener("reorder", this.#handleReorder);
+    this.#reorder.addEventListener("keydown", this.#handleDeleteSelectedStop);
     this.addEventListener("pointerdown", this.#handlePointerDown, true);
     this.addEventListener(
       "lostpointercapture",
@@ -580,7 +585,19 @@ class FigGradientEditor extends HTMLElement {
     row.addEventListener("pointerdown", (event) => {
       if (event.button === 0) this.#selectStopRow(row);
     });
-    row.addEventListener("click", () => this.#selectStopRow(row));
+    row.addEventListener("click", (event) => {
+      this.#selectStopRow(row);
+      const fromEditableControl = event.composedPath().some(
+        (target) =>
+          target instanceof Element &&
+          target.matches(
+            'input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])',
+          ),
+      );
+      if (!fromEditableControl && row.isConnected) {
+        row.focus({ preventScroll: true });
+      }
+    });
     row.addEventListener("focusin", () => this.#selectStopRow(row));
     return row;
   }
@@ -839,6 +856,45 @@ class FigGradientEditor extends HTMLElement {
     this.#selectStopRow(this.#stopRows[index]);
   };
 
+  #handleDeleteSelectedStop = (event) => {
+    if (
+      event.defaultPrevented ||
+      !["Delete", "Backspace"].includes(event.key) ||
+      this.#disabled() ||
+      this.#gradient.stops.length <= 2
+    ) {
+      return;
+    }
+    const handle = event.target?.closest?.(
+      "fig-handle[selected]:not(.fig-input-gradient-ghost)",
+    );
+    const row = event.target?.closest?.(
+      ".fig-fill-picker-gradient-stop-row[selected]",
+    );
+    const fromSelectedHandle =
+      handle && this.#gradientBar.contains(handle);
+    const fromEditableControl = event.composedPath().some(
+      (target) =>
+        target instanceof Element &&
+        target.matches(
+          'input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])',
+        ),
+    );
+    const fromSelectedRow =
+      row === this.#selectedStopRow && !fromEditableControl;
+    if (!fromSelectedHandle && !fromSelectedRow) return;
+    event.preventDefault();
+    this.#removeStopRow(this.#selectedStopRow);
+    requestAnimationFrame(() => {
+      const selectedIndex = this.#stopRows.indexOf(this.#selectedStopRow);
+      this.#gradientBar
+        ?.querySelectorAll(
+          ".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)",
+        )
+        [selectedIndex]?.focus();
+    });
+  };
+
   #handleReorder = (event) => {
     event.stopPropagation();
     const { oldIndex, newIndex } = event.detail ?? {};
@@ -851,8 +907,12 @@ class FigGradientEditor extends HTMLElement {
     }
     this.#flushRows();
     const stops = cloneStops(this.#gradient.stops);
+    const positions = stops.map((stop) => stop.position);
     const [stop] = stops.splice(oldIndex, 1);
     stops.splice(newIndex, 0, stop);
+    stops.forEach((reorderedStop, index) => {
+      reorderedStop.position = positions[index];
+    });
     const [row] = this.#stopRows.splice(oldIndex, 1);
     this.#stopRows.splice(newIndex, 0, row);
     this.#applyInternalGradient({ ...this.#gradient, stops }, "input");

package/fig-palette-editor.js

@@ -307,6 +307,7 @@ class FigPaletteEditor extends HTMLElement {
   #addButton = null;
   #rows = [];
   #renderedColors = [];
+  #selectedRow = null;
   #pointerInteractionActive = false;
   #deferredExternalColors = null;
 
@@ -427,7 +428,7 @@ class FigPaletteEditor extends HTMLElement {
     if (focusIndex !== null) this.#focusColorValue(focusIndex);
   }
 
-  #removeRow(row) {
+  #removeRow(row, { focusSelection = false } = {}) {
     const currentIndex = this.#rows.indexOf(row);
     if (
       this.#disabled ||
@@ -438,10 +439,19 @@ class FigPaletteEditor extends HTMLElement {
     ) {
       return;
     }
-    if (row.contains(document.activeElement)) this.#addButton.focus();
+    if (row === this.#selectedRow) {
+      this.#selectedRow =
+        this.#rows[currentIndex + 1] ?? this.#rows[currentIndex - 1] ?? null;
+    }
+    if (!focusSelection && row.contains(document.activeElement)) {
+      this.#addButton.focus();
+    }
     const colors = clonePalette(this.#colors);
     colors.splice(currentIndex, 1);
     this.#applyInternalColors(colors, ["input", "change"]);
+    if (focusSelection) {
+      requestAnimationFrame(() => this.#selectedRow?.focus());
+    }
   }
 
   #createRow() {
@@ -492,9 +502,62 @@ class FigPaletteEditor extends HTMLElement {
       event.stopPropagation();
       this.#removeRow(row);
     });
+    row.addEventListener("pointerdown", (event) => {
+      if (event.button === 0) this.#selectRow(row);
+    });
+    row.addEventListener("click", (event) => {
+      this.#selectRow(row);
+      const fromEditableControl = event.composedPath().some(
+        (target) =>
+          target instanceof Element &&
+          target.matches(
+            'input, textarea, select, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])',
+          ),
+      );
+      if (!fromEditableControl && row.isConnected) {
+        row.focus({ preventScroll: true });
+      }
+    });
+    row.addEventListener("focusin", () => this.#selectRow(row));
     return row;
   }
 
+  #selectRow(row) {
+    if (!row || !this.#rows.includes(row)) return;
+    this.#selectedRow = row;
+    this.#rows.forEach((colorRow) => {
+      colorRow.toggleAttribute("selected", colorRow === row);
+    });
+    row.scrollIntoView({ block: "nearest" });
+  }
+
+  #handleDeleteSelectedRow = (event) => {
+    if (
+      event.defaultPrevented ||
+      !["Delete", "Backspace"].includes(event.key)
+    ) {
+      return;
+    }
+    const row = event.target?.closest?.(".fig-palette-editor-color-row");
+    const fromEditableControl = event.composedPath().some(
+      (target) =>
+        target instanceof Element &&
+        target.matches(
+          'input, textarea, select, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])',
+        ),
+    );
+    if (!row || row !== this.#selectedRow || fromEditableControl) return;
+    if (
+      this.#disabled ||
+      this.#fixed ||
+      this.#colors.length <= this.#min
+    ) {
+      return;
+    }
+    event.preventDefault();
+    this.#removeRow(row, { focusSelection: true });
+  };
+
   #handleReorder = (event) => {
     const oldIndex = Number(event.detail?.oldIndex);
     const newIndex = Number(event.detail?.newIndex);
@@ -547,6 +610,7 @@ class FigPaletteEditor extends HTMLElement {
     this.#addField = createElement("fig-field", {}, this.#addButton);
     this.replaceChildren(this.#reorder);
     this.#reorder.addEventListener("reorder", this.#handleReorder);
+    this.#reorder.addEventListener("keydown", this.#handleDeleteSelectedRow);
     this.#addButton.addEventListener("click", this.#handleAdd);
     this.addEventListener("pointerdown", this.#handlePointerDown, true);
     this.addEventListener(
@@ -605,6 +669,12 @@ class FigPaletteEditor extends HTMLElement {
     this.#rows.forEach((row, index) =>
       this.#syncRow(row, this.#colors[index], index),
     );
+    if (!this.#rows.includes(this.#selectedRow)) {
+      this.#selectedRow = this.#rows[0] ?? null;
+    }
+    this.#rows.forEach((row) => {
+      row.toggleAttribute("selected", row === this.#selectedRow);
+    });
     this.#renderedColors = clonePalette(this.#colors);
     queueMicrotask(() => this.#syncRemoveActions());
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "11.6.2",
+  "version": "11.6.4",
   "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",