@rogieking/figui3 11.6.10 → 11.6.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cursor/skills/fig-editor/SKILL.md +29 -0
- package/.cursor/skills/figui3/react.md +35 -0
- package/CHANGELOG.md +13 -0
- package/components.css +1 -1
- package/dist/components.css +1 -1
- package/dist/fig-editor.js +3 -3
- package/dist/fig.css +1 -1
- package/dist/fig.js +6 -6
- package/package.json +3 -6
package/dist/fig-editor.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
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(`
|
|
1
|
+
import"./fig.js";import"./fig-property.js";import{figConvertRGB as UZ,figHexToRGB as HZ,figHslToRGB as zZ,figHsvToRGB as mZ,figOklabToOklch as uZ,figOklabToRGB as vZ,figOklchToRGB as pZ,figRGBToHsl as MZ,figRGBToHsv as cZ,figRGBToOklab as OZ,figRGBToOklch as sZ}from"./fig-color.js";import"./fig.js";import"./fig-property.js";import{figConvertRGB as DZ,figHexToRGB as TZ}from"./fig-color.js";var S={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};function F(Z,$={},X=[]){let J=document.createElement(Z);for(let[Q,W]of Object.entries($)){if(W===null||W===void 0||W===!1)continue;if(Q==="className")J.className=String(W);else if(W===!0)J.setAttribute(Q,"");else J.setAttribute(Q,String(W))}let Y=Array.isArray(X)?X:[X];for(let Q of Y){if(Q===null||Q===void 0||Q===!1)continue;J.append(Q instanceof Node?Q:String(Q))}return J}function e(Z){return F("fig-icon",{name:Z})}function CZ(Z,$){return{position:Number.isFinite(Number(Z?.position))?Math.max(0,Math.min(100,Number(Z.position))):$*100,color:p(Z?.color),opacity:Number.isFinite(Number(Z?.opacity))?Math.max(0,Math.min(100,Number(Z.opacity))):100}}function p(Z){let $=String(Z||"#888888").replace(/^#/,"").slice(0,6);return/^[0-9A-Fa-f]{6}$/.test($)?`#${$.toUpperCase()}`:"#888888"}function ZZ(Z,$){return Number(Z?.position)===Number($?.position)&&p(Z?.color)===p($?.color)&&Number(Z?.opacity??100)===Number($?.opacity??100)}function c(Z){if(Array.isArray(Z))return Z.map(c);if(!Z||typeof Z!=="object")return Z;return Object.fromEntries(Object.keys(Z).filter(($)=>Z[$]!==void 0).sort().map(($)=>[$,c(Z[$])]))}function v(Z,$){return!!Z&&!!$&&JSON.stringify(c(Z))===JSON.stringify(c($))}function x(Z){return Z.map(($)=>({...$}))}function PZ(Z,$){let X=Z.length,J=$.length,Y=Array.from({length:X+1},()=>Array(J+1).fill(0));for(let q=X-1;q>=0;q-=1)for(let U=J-1;U>=0;U-=1)Y[q][U]=ZZ(Z[q],$[U])?Y[q+1][U+1]+1:Math.max(Y[q+1][U],Y[q][U+1]);let Q=[],W=0,K=0;while(W<X&&K<J)if(ZZ(Z[W],$[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 y(Z){let $=Z;if(typeof $==="string")try{$=JSON.parse($)}catch{$={}}if($?.type==="gradient"&&$.gradient)$=$.gradient;let X=$&&typeof $==="object"?$:{},J=Array.isArray(X.stops)?X.stops.map(CZ):S.stops.map((Y)=>({...Y}));return{...S,...X,type:["linear","radial","angular"].includes(X.type)?X.type:"linear",angle:Number.isFinite(Number(X.angle))?Number(X.angle):S.angle,centerX:Number.isFinite(Number(X.centerX))?Number(X.centerX):S.centerX,centerY:Number.isFinite(Number(X.centerY))?Number(X.centerY):S.centerY,interpolationSpace:"srgb",stops:J.length>=2?J:S.stops.map((Y)=>({...Y}))}}function fZ(Z,$,X){let{r:J,g:Y,b:Q}=TZ(Z);if(X==="display-p3"){let W=DZ(J,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)} / ${$})`}return`rgba(${J}, ${Y}, ${Q}, ${$})`}function d(Z,{colorSpace:$="srgb"}={}){let X=y(Z),J=X.stops.map((Y)=>`${fZ(Y.color,(Y.opacity??100)/100,$)} ${Y.position}%`).join(", ");switch(X.type){case"radial":return`radial-gradient(circle at ${X.centerX}% ${X.centerY}%, ${J})`;case"angular":return`conic-gradient(from ${X.angle}deg, ${J})`;default:return`linear-gradient(${X.angle}deg, ${J})`}}class $Z extends HTMLElement{#Z=y();#X=!1;#U=!1;#q=null;#$=!1;#L=null;#Q=null;#z=null;#H=null;#K=null;#_=null;#J=[];#j=[];#Y=null;#W=!1;#G=null;static get observedAttributes(){return["value","color-space","disabled","overflow","show-rows"]}get value(){return structuredClone(this.#Z)}set value(Z){this.setAttribute("value",typeof Z==="string"?Z:JSON.stringify(Z??{}))}get cssValue(){return d(this.#Z,{colorSpace:this.getAttribute("color-space")||"srgb"})}get pickerAnchor(){return this.#q}set pickerAnchor(Z){this.#q=Z instanceof Element?Z:null,this.#KZ()}connectedCallback(){let Z=y(this.getAttribute("value"));if(!v(this.#Z,Z))this.#Z=Z;this.#f(),this.#w()}attributeChangedCallback(Z,$,X){if($===X||this.#X)return;if(Z==="value"){let J=y(X);if(v(this.#Z,J)){if(this.#W)this.#G=null;return}if(this.#W){this.#G=J;return}this.#G=null,this.#Z=J}if(this.isConnected&&this.#$)this.#w()}disconnectedCallback(){if(this.#jZ({reconcile:!1}),this.#G)this.#Z=this.#G,this.#G=null,this.#A()}refreshLayout(){this.#Q?.refreshLayout?.()}#T(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#M(){return this.getAttribute("overflow")==="visible"?"visible":"fade"}#O(){let Z=Number(this.getAttribute("show-rows"));return Number.isFinite(Z)&&Z>0?Z:null}#A(){this.#X=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#X=!1}#B(){return{type:"gradient",gradient:this.value,css:this.cssValue}}#F(Z){this.#A(),this.dispatchEvent(new CustomEvent(Z,{bubbles:!0,composed:!0,detail:this.#B()}))}#f(){if(this.#$)return;this.#L=F("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",variant:"ghost"},F("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([W,K])=>F("fig-select-option",{value:W},K))));let Z=(W,K,q)=>{let U=F("fig-button",{icon:!0,variant:"ghost",className:K,"aria-label":W},e(q));return{button:U,tooltip:F("fig-tooltip",{text:W},U)}},$=Z("Flip gradient","fig-fill-picker-gradient-flip","swap"),X=Z("Rotate gradient","fig-fill-picker-gradient-rotate","rotate");this.#H=$.button,this.#K=X.button;let J=F("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[this.#L,F("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[$.tooltip,X.tooltip])]);this.#Q=F("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large"});let Y=F("fig-preview",{className:"fig-fill-picker-gradient-preview"},this.#Q);this.#_=F("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},e("add")),this.#z=document.createElement("fig-reorder");let Q=F("div",{className:"fig-fill-picker-gradient-stops"},[F("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[F("h3",{},"Stops"),this.#_]),F("div",{className:"fig-fill-picker-gradient-stops-list"},this.#z)]);this.replaceChildren(J,Y,Q),this.#L.addEventListener("change",this.#i),this.#L.addEventListener("optionhover",(W)=>W.stopPropagation()),this.#K.addEventListener("click",this.#v),this.#H.addEventListener("click",this.#R),this.#_.addEventListener("click",this.#t),this.#Q.addEventListener("input",this.#p),this.#Q.addEventListener("change",this.#p),this.#Q.addEventListener("pointerdown",this.#e),this.#Q.addEventListener("focusin",this.#e),this.#Q.addEventListener("click",this.#e),this.#Q.addEventListener("keydown",this.#c),this.#z.addEventListener("reorder",this.#ZZ),this.#z.addEventListener("keydown",this.#c),this.addEventListener("pointerdown",this.#VZ,!0),this.addEventListener("lostpointercapture",this.#u,!0),this.#$=!0}#C(Z){if((Z.opacity??100)>=100)return Z.color;return`${Z.color}${Math.round((Z.opacity??100)/100*255).toString(16).padStart(2,"0")}`}#V(Z){let $=Z.querySelector(".fig-fill-picker-stop-position"),X=Z.querySelector(".fig-fill-picker-stop-color"),J=this.#Z.stops[Number(Z.dataset.index)]??{},Y=Number($?.value??$?.getAttribute("value")??0),Q=X?.hexOpaque||(typeof X?.value==="string"?X.value:"")||X?.getAttribute("value");return{position:Number.isFinite(Y)?Math.max(0,Math.min(100,Y)):0,color:p(String(Q||J.color).slice(0,7)),opacity:X?.rgba?.a!==void 0?Math.round(X.rgba.a*100):J.opacity??100}}#P(Z){let $=this.#J.indexOf(Z);if(!Number.isInteger($)||!this.#Z.stops[$])return;this.#Z.stops[$]={...this.#Z.stops[$],...this.#V(Z)}}#E(){this.#J.forEach((Z)=>this.#P(Z))}#m(){let Z=F("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",units:"%"}),$=F("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right"}),X=F("fig-property",{className:"fig-fill-picker-gradient-stop-row",leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},F("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[Z,$]));Z.addEventListener("input",(J)=>{J.stopPropagation(),this.#s(X,"input")}),Z.addEventListener("change",(J)=>{J.stopPropagation(),this.#s(X,"change")});for(let J of["input","change"])$.addEventListener(J,(Y)=>{Y.stopPropagation(),this.#s(X,J)});return X.addEventListener("remove",(J)=>{J.stopPropagation(),this.#a(X)}),X.addEventListener("pointerdown",(J)=>{if(J.button===0)this.#S(X)}),X.addEventListener("click",(J)=>{if(this.#S(X),!J.composedPath().some((Q)=>Q instanceof Element&&Q.matches('input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])'))&&X.isConnected)X.focus({preventScroll:!0})}),X.addEventListener("focusin",()=>this.#S(X)),X}#S(Z){if(!Z||!this.#J.includes(Z))return;this.#Y=Z,this.#J.forEach(($)=>{$.toggleAttribute("selected",$===Z)}),this.#y(),Z.scrollIntoView({block:"nearest"})}#y(){let Z=this.#J.indexOf(this.#Y);this.#Q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)").forEach(($,X)=>{if(X===Z)$.select?.();else $.deselect?.()})}#x(){if(!this.#z)return;let Z=this.#Z.stops,$=this.#J.filter((Y)=>Y.isConnected),X;if($.length===Z.length)X=[...$];else{X=Array(Z.length).fill(null);let Y=PZ(this.#j,Z),Q=new Set;for(let[q,U]of Y){let j=$[q];if(!j)continue;X[U]=j,Q.add(q)}let W=$.filter((q,U)=>!Q.has(U));X=X.map((q)=>q??W.shift()??this.#m());let K=new Set(X);$.forEach((q)=>{if(!K.has(q))q.remove()})}let J=this.#z.firstElementChild;for(let Y of X)if(Y===J)J=J.nextElementSibling;else this.#z.insertBefore(Y,J);if(this.#J=X,this.#J.forEach((Y,Q)=>{this.#h(Y,Z[Q],Q)}),!this.#J.includes(this.#Y))this.#Y=this.#J[0]??null;this.#J.forEach((Y)=>{Y.toggleAttribute("selected",Y===this.#Y)}),this.#y(),this.#j=x(Z),this.#KZ()}#h(Z,$,X){let J=this.#T();Z.dataset.index=String(X);let Y=Z.querySelector(".fig-fill-picker-stop-position"),Q=Z.querySelector(".fig-fill-picker-stop-color");this.#I(Y,$.position),this.#I(Q,this.#C($)),Y?.toggleAttribute("disabled",J),Q?.toggleAttribute("disabled",J);let W=Z.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",J||this.#Z.stops.length<=2)}#I(Z,$){if(!Z)return;let X=String($);if(Z.getAttribute("value")===X)return;let J=Z.contains(document.activeElement)?document.activeElement:null,Y=J&&"selectionStart"in J&&typeof J.selectionStart==="number"?{start:J.selectionStart,end:J.selectionEnd,direction:J.selectionDirection}:null;if(Z.setAttribute("value",X),Y&&J===document.activeElement)try{J.setSelectionRange(Y.start,Y.end,Y.direction)}catch{}}#w(){if(!this.#$)return;let Z=this.#T(),$=this.#M()==="fade";this.#z.classList.toggle("fig-overflow-fade",$);let X=this.#O();if(X===null)this.#z.style.removeProperty("--fig-gradient-editor-overflow-show-rows");else this.#z.style.setProperty("--fig-gradient-editor-overflow-show-rows",String(X));this.#I(this.#L,this.#Z.type),this.#L.toggleAttribute("disabled",Z),this.#H.toggleAttribute("disabled",Z),this.#K.toggleAttribute("disabled",Z),this.#_.toggleAttribute("disabled",Z),this.#z.toggleAttribute("disabled",Z),this.#Q.toggleAttribute("disabled",Z);let J=y(this.#Q.value);if(!v(J,this.#Z))this.#U=!0,this.#Q.value={type:"gradient",gradient:this.#Z},this.#U=!1;this.#x()}#N(Z,$,{focusIndex:X=null}={}){let J=y(Z),Y=!v(this.#Z,J);if(Y)this.#Z=J,this.#w();if($==="change"||Y)this.#F($);if(X!==null)this.#b(X)}#b(Z){requestAnimationFrame(()=>{if(!this.isConnected)return;let $=this.querySelector(`.fig-fill-picker-gradient-stop-row[data-index="${Z}"]`),X=$?.querySelector(".fig-fill-picker-stop-color fig-input-text input");this.#S($),X?.focus(),X?.select()})}#i=(Z)=>{Z.stopPropagation();let $=typeof Z.detail==="string"?Z.detail:Z.target?.value;if(!["linear","radial","angular"].includes($))return;this.#N({...this.#Z,type:$},"input")};#v=()=>{this.#N({...this.#Z,angle:(Number(this.#Z.angle)+90)%360},"input")};#R=()=>{let Z=this.#Z.stops.map(($)=>({...$,position:100-$.position})).sort(($,X)=>$.position-X.position);this.#N({...this.#Z,stops:Z},"input")};#t=()=>{let Z=x(this.#Z.stops),$=Math.max(0,this.#J.indexOf(this.#Y)),X=Number(Z[$]?.position)||0,J=Number(Z[$+1]?.position??X),Y={position:(X+J)/2,color:"#888888",opacity:100},Q=$+1;Z.splice(Q,0,Y),this.#N({...this.#Z,stops:Z},"input",{focusIndex:Q})};#p=(Z)=>{if(Z.stopPropagation(),this.#U||!Z.detail?.gradient)return;this.#N({...this.#Z,...Z.detail.gradient},Z.type)};#e=(Z)=>{let $=Z.target?.closest?.("fig-handle:not(.fig-input-gradient-ghost)"),X=Number($?.dataset.stopIndex);if(!Number.isInteger(X))return;this.#S(this.#J[X])};#c=(Z)=>{if(Z.defaultPrevented||!["Delete","Backspace"].includes(Z.key)||this.#T()||this.#Z.stops.length<=2)return;let $=Z.target?.closest?.("fig-handle[selected]:not(.fig-input-gradient-ghost)"),X=Z.target?.closest?.(".fig-fill-picker-gradient-stop-row[selected]"),J=$&&this.#Q.contains($),Y=Z.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=X===this.#Y&&!Y;if(!J&&!Q)return;Z.preventDefault(),this.#a(this.#Y),requestAnimationFrame(()=>{let W=this.#J.indexOf(this.#Y);this.#Q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)")[W]?.focus()})};#ZZ=(Z)=>{Z.stopPropagation();let{oldIndex:$,newIndex:X}=Z.detail??{};if(!Number.isInteger($)||!Number.isInteger(X)||$===X)return;this.#E();let J=x(this.#Z.stops),Y=J.map((K)=>K.position),[Q]=J.splice($,1);J.splice(X,0,Q),J.forEach((K,q)=>{K.position=Y[q]});let[W]=this.#J.splice($,1);this.#J.splice(X,0,W),this.#N({...this.#Z,stops:J},"input")};#s(Z,$){let X=this.#J.indexOf(Z);if(X<0)return;let J=x(this.#Z.stops);J[X]={...J[X],...this.#V(Z)},this.#N({...this.#Z,stops:J},$)}#a(Z){if(this.#Z.stops.length<=2)return;let $=this.#J.indexOf(Z);if($<0)return;if(Z.contains(document.activeElement))this.#_.focus();if(Z===this.#Y)this.#Y=this.#J[$+1]??this.#J[$-1]??null;let X=x(this.#Z.stops);X.splice($,1),this.#N({...this.#Z,stops:X},"input")}#VZ=(Z)=>{if(Z.button!==0||this.#W)return;this.#W=!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.#jZ({reconcile:!0}))};#jZ({reconcile:Z}){window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0);let $=this.#W;if(this.#W=!1,!Z||!$||!this.#G)return;let X=this.#G;this.#G=null,this.#Z=X,this.#A(),this.#w()}#KZ(){requestAnimationFrame(()=>{if(!this.isConnected)return;this.querySelectorAll(".fig-fill-picker-stop-color").forEach((Z)=>{let $=Z.querySelector("fig-fill-picker");if($)$.anchorElement=this.#q})})}}if(!customElements.get("fig-gradient-editor"))customElements.define("fig-gradient-editor",$Z);import"./fig.js";import"./fig-property.js";import{figHexToOklch as XZ,figMapOklchToGamut as AZ,figOklabDistance as RZ,figOklchToHex as SZ,figOklchToOklab as YZ}from"./fig-color.js";function w(Z,$={},X=[]){let J=document.createElement(Z);for(let[Q,W]of Object.entries($)){if(W===null||W===void 0||W===!1)continue;if(Q==="className")J.className=String(W);else if(W===!0)J.setAttribute(Q,"");else J.setAttribute(Q,String(W))}let Y=Array.isArray(X)?X:[X];for(let Q of Y){if(Q===null||Q===void 0||Q===!1)continue;J.append(Q instanceof Node?Q:String(Q))}return J}function JZ(Z,$){return Z.hasAttribute($)&&Z.getAttribute($)!=="false"}function l(Z){let $=Z;if(typeof $==="string"){let X=$.trim();if(!X)return[];try{$=JSON.parse(X)}catch{$=X.includes(",")?X.split(","):[X]}}if(!Array.isArray($))return[];return $.map((X)=>{if(typeof X==="string"){let J=X.trim();return{color:J.slice(0,7)||"#D9D9D9",alpha:J.length>7?Math.max(0,Math.min(1,parseInt(J.slice(7,9),16)/255)):1}}if(X&&typeof X==="object"){let J=X.alpha!==void 0?Number(X.alpha):X.opacity!==void 0?Number(X.opacity)/100:1;return{color:String(X.color||"#D9D9D9").slice(0,7),alpha:Number.isFinite(J)?Math.max(0,Math.min(1,J)):1}}return{color:"#D9D9D9",alpha:1}})}function yZ(Z){let $=String(Z?.color||"#D9D9D9").slice(0,7),X=Math.max(0,Math.min(1,Number(Z?.alpha??1)));if(X>=1)return $;return`${$}${Math.round(X*255).toString(16).padStart(2,"0")}`}function g(Z){let $=[...Z].sort((J,Y)=>J-Y),X=Math.floor($.length/2);return $.length%2?$[X]:($[X-1]+$[X])/2}function EZ(Z,$){let X=Math.abs(Z-$)%360;return Math.min(X,360-X)}function IZ(Z){let $;try{$=XZ(Z?.color||"#D9D9D9")}catch{$=XZ("#D9D9D9")}return{lch:$,lab:YZ($.l,$.c,$.h)}}function i(Z,$,X){let J=AZ(Z,$,X);return{lch:J,lab:YZ(J.l,J.c,J.h)}}function QZ(Z,$){return Math.min(...$.map((X)=>RZ(Z.lab,X.lab)))}function WZ(Z){let $=0,X=0;for(let{lch:J}of Z){let Y=Math.max(J.c,0.001),Q=J.h*Math.PI/180;$+=Math.cos(Q)*Y,X+=Math.sin(Q)*Y}return(Math.atan2(X,$)*180/Math.PI+360)%360}function bZ(Z){let X=[0.08,...Z.map(({lch:Y})=>Y.l).filter((Y)=>Y>0.08&&Y<0.92).sort((Y,Q)=>Y-Q),0.92],J={start:X[0],end:X[1]};for(let Y=1;Y<X.length-1;Y+=1)if(X[Y+1]-X[Y]>J.end-J.start)J={start:X[Y],end:X[Y+1]};return i((J.start+J.end)/2,g(Z.map(({lch:Y})=>Y.c)),WZ(Z))}function xZ(Z){if(Z.length<2)return null;let $=WZ(Z);if(Z.some(({lch:U})=>U.c>=0.025&&EZ(U.h,$)>25))return null;let X=Z.slice(1).map(({lch:U},j)=>U.l-Z[j].lch.l),J=Math.sign(Z.at(-1).lch.l-Z[0].lch.l);if(J===0||X.some((U)=>Math.abs(U)>0.01&&Math.sign(U)!==J))return null;let Y=Math.max(0.06,Math.min(0.18,g(X.map((U)=>Math.abs(U))))),Q=Z[0].lch,W=Z.at(-1).lch,K=W.l+J*Y,q=W.c;if(K<0.08||K>0.92)K=Q.l-J*Y,q=Q.c;return i(Math.max(0.08,Math.min(0.92,K)),q,$)}function wZ(Z){let $=g(Z.map(({lch:W})=>W.l)),X=Z.filter(({lch:W})=>W.c>=0.025),J=Math.max(0.06,Math.min(0.22,g((X.length?X:Z).map(({lch:W})=>W.c)))),Y=[$,Math.max(0.2,$-0.06),Math.min(0.88,$+0.06)],Q=null;for(let W of Y)for(let K=0;K<360;K+=2){let q=i(W,J,K),j=QZ(q,Z)-Math.abs(q.lch.l-$)*0.12-Math.abs(q.lch.c-J)*0.08;if(!Q||j>Q.score)Q={...q,score:j}}return Q}function hZ(Z){if(!Z.length)return{color:"#D9D9D9",alpha:1};let $=Z.map(IZ),X=g(Z.map((Y)=>Number(Y.alpha??1))),J;if($.every(({lch:Y})=>Y.c<0.025))J=bZ($);else if(J=xZ($),!J||QZ(J,$)<0.035)J=wZ($);return{color:SZ(J.lch.l,J.lch.c,J.lch.h),alpha:X}}function s(Z,$){let X=(J)=>Math.round(Math.max(0,Math.min(1,Number(J??1)))*255);return Z.length===$.length&&Z.every((J,Y)=>String(J.color).toUpperCase()===String($[Y]?.color).toUpperCase()&&X(J.alpha)===X($[Y]?.alpha))}function h(Z){return Z.map(($)=>({...$}))}function gZ(Z,$){let X=Z.length,J=$.length,Y=Array.from({length:X+1},()=>Array(J+1).fill(0)),Q=(U,j)=>s([U],[j]);for(let U=X-1;U>=0;U-=1)for(let j=J-1;j>=0;j-=1)Y[U][j]=Q(Z[U],$[j])?Y[U+1][j+1]+1:Math.max(Y[U+1][j],Y[U][j+1]);let W=[],K=0,q=0;while(K<X&&q<J)if(Q(Z[K],$[q]))W.push([K,q]),K+=1,q+=1;else if(Y[K+1][q]>=Y[K][q+1])K+=1;else q+=1;return W}class KZ extends HTMLElement{#Z=[];#X=!1;#U=!1;#q=null;#$=null;#L=null;#Q=[];#z=[];#H=null;#K=!1;#_=null;static get observedAttributes(){return["value","min","max","fixed","disabled","overflow","show-rows"]}get#J(){let Z=Number.parseInt(this.getAttribute("min"),10);return Number.isFinite(Z)?Math.max(0,Z):2}get#j(){let Z=Number.parseInt(this.getAttribute("max"),10);return Number.isFinite(Z)?Math.max(this.#J,Z):1/0}get#Y(){return JZ(this,"fixed")}get#W(){return JZ(this,"disabled")}get#G(){return this.getAttribute("overflow")==="visible"?"visible":"fade"}get#T(){let Z=Number(this.getAttribute("show-rows"));return Number.isFinite(Z)&&Z>0?Z:null}get value(){return this.#Z.map((Z)=>({...Z}))}set value(Z){this.setAttribute("value",typeof Z==="string"?Z:JSON.stringify(Z??[]))}connectedCallback(){let Z=l(this.getAttribute("value"));if(!s(this.#Z,Z))this.#Z=Z;this.#E(),this.#I()}attributeChangedCallback(Z,$,X){if($===X||this.#X)return;if(Z==="value"){let J=l(X);if(s(this.#Z,J)){if(this.#K)this.#_=null;return}if(this.#K){this.#_=J;return}this.#_=null,this.#Z=J}if(this.isConnected&&this.#U)this.#I()}disconnectedCallback(){if(this.#b({reconcile:!1}),this.#_)this.#Z=this.#_,this.#_=null,this.#M()}#M(){this.#X=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#X=!1}#O(Z){this.dispatchEvent(new CustomEvent(Z,{bubbles:!0,detail:this.value}))}#A(Z,$,{focusIndex:X=null}={}){let J=l(Z),Y=!s(this.#Z,J);if(Y)this.#Z=J,this.#I();this.#M();for(let Q of Array.isArray($)?$:[$])if(Q==="change"||Y)this.#O(Q);if(X!==null)this.#P(X)}#B(Z,{focusSelection:$=!1}={}){let X=this.#Q.indexOf(Z);if(this.#W||this.#Y||this.#Z.length<=this.#J||!Number.isInteger(X)||X<0)return;if(Z===this.#H)this.#H=this.#Q[X+1]??this.#Q[X-1]??null;if(!$&&Z.contains(document.activeElement))this.#L.focus();let J=h(this.#Z);if(J.splice(X,1),this.#A(J,["input","change"]),$)requestAnimationFrame(()=>this.#H?.focus())}#F(){let Z=w("fig-input-color",{className:"fig-palette-editor-color",slot:"input",text:!0,alpha:!0,full:!0}),$=(J,Y)=>{J.stopPropagation();let Q=Z.closest(".fig-palette-editor-color-row"),W=this.#Q.indexOf(Q);if(!Number.isInteger(W)||!this.#Z[W])return;let K=h(this.#Z),q=K[W]?.alpha??1,U=Z.rgba?.a??q,j=Math.round(U*255)===Math.round(q*255)?q:U;K[W]={color:Z.hexOpaque||K[W]?.color||"#D9D9D9",alpha:j},this.#A(K,Y)};Z.addEventListener("input",(J)=>$(J,"input")),Z.addEventListener("change",(J)=>$(J,"change"));let X=w("fig-property",{className:"fig-palette-editor-color-row",leading:"drag"},Z);return X.addEventListener("remove",(J)=>{J.stopPropagation(),this.#B(X)}),X.addEventListener("pointerdown",(J)=>{if(J.button===0)this.#f(X)}),X.addEventListener("click",(J)=>{if(this.#f(X),!J.composedPath().some((Q)=>Q instanceof Element&&Q.matches('input, textarea, select, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])'))&&X.isConnected)X.focus({preventScroll:!0})}),X.addEventListener("focusin",()=>this.#f(X)),X}#f(Z){if(!Z||!this.#Q.includes(Z))return;this.#H=Z,this.#Q.forEach(($)=>{$.toggleAttribute("selected",$===Z)}),Z.scrollIntoView({block:"nearest"})}#C=(Z)=>{if(Z.defaultPrevented||!["Delete","Backspace"].includes(Z.key))return;let $=Z.target?.closest?.(".fig-palette-editor-color-row"),X=Z.composedPath().some((J)=>J instanceof Element&&J.matches('input, textarea, select, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])'));if(!$||$!==this.#H||X)return;if(this.#W||this.#Y||this.#Z.length<=this.#J)return;Z.preventDefault(),this.#B($,{focusSelection:!0})};#V=(Z)=>{let $=Number(Z.detail?.oldIndex),X=Number(Z.detail?.newIndex);if(!Number.isInteger($)||!Number.isInteger(X)||$===X||$<0||X<0||$>=this.#Z.length||X>=this.#Z.length)return;let J=h(this.#Z),[Y]=J.splice($,1);J.splice(X,0,Y);let[Q]=this.#Q.splice($,1);this.#Q.splice(X,0,Q),this.#A(J,["input","change"])};#P(Z){requestAnimationFrame(()=>{if(!this.isConnected)return;let $=this.querySelector(`.fig-palette-editor-color-row[data-index="${Z}"] .fig-palette-editor-color fig-input-text input`);$?.focus(),$?.select()})}#E(){if(this.#U)return;this.#q=w("fig-reorder",{axis:"vertical",items:".fig-palette-editor-color-row","aria-label":"Palette colors"}),this.#L=w("fig-button",{className:"fig-palette-editor-add",variant:"secondary",full:!0},"Add color"),this.#$=w("fig-field",{},this.#L),this.replaceChildren(this.#q),this.#q.addEventListener("reorder",this.#V),this.#q.addEventListener("keydown",this.#C),this.#L.addEventListener("click",this.#m),this.addEventListener("pointerdown",this.#w,!0),this.addEventListener("lostpointercapture",this.#N,!0),this.#U=!0}#m=()=>{if(this.#W||this.#Z.length>=this.#j)return;let Z=h(this.#Z),$=Z.length;Z.push(hZ(Z)),this.#A(Z,["input","change"],{focusIndex:$})};#S(){let Z=this.#Q.filter((J)=>J.isConnected),$;if(Z.length===this.#Z.length)$=[...Z];else{$=Array(this.#Z.length).fill(null);let J=gZ(this.#z,this.#Z),Y=new Set;for(let[K,q]of J){let U=Z[K];if(!U)continue;$[q]=U,Y.add(K)}let Q=Z.filter((K,q)=>!Y.has(q));$=$.map((K)=>K??Q.shift()??this.#F());let W=new Set($);Z.forEach((K)=>{if(!W.has(K))K.remove()})}let X=this.#q.firstElementChild;for(let J of $)if(J===X)X=X.nextElementSibling;else this.#q.insertBefore(J,X);if(this.#Q=$,this.#Q.forEach((J,Y)=>this.#y(J,this.#Z[Y],Y)),!this.#Q.includes(this.#H))this.#H=this.#Q[0]??null;this.#Q.forEach((J)=>{J.toggleAttribute("selected",J===this.#H)}),this.#z=h(this.#Z),queueMicrotask(()=>this.#h())}#y(Z,$,X){if(Z.dataset.index=String(X),this.#Y){if(Z.querySelector(':scope > [data-fig-property-action="remove"]')?.contains(document.activeElement))Z.querySelector(".fig-palette-editor-color")?.focus();Z.removeAttribute("trailing"),Z.removeAttribute("show-trailing")}else Z.setAttribute("trailing","remove"),Z.setAttribute("show-trailing","");let J=Z.querySelector(".fig-palette-editor-color"),Y=yZ($);this.#x(J,Y),J?.setAttribute("aria-label",`Palette color ${X+1}`),J?.toggleAttribute("disabled",this.#W)}#x(Z,$){if(!Z||Z.getAttribute("value")===$)return;let X=Z.contains(document.activeElement)?document.activeElement:null,J=X&&"selectionStart"in X&&typeof X.selectionStart==="number"?{start:X.selectionStart,end:X.selectionEnd,direction:X.selectionDirection}:null;if(Z.setAttribute("value",$),J&&X===document.activeElement)try{X.setSelectionRange(J.start,J.end,J.direction)}catch{}}#h(){if(!this.isConnected)return;this.#Q.forEach((Z,$)=>{let X=Z.querySelector(':scope > [data-fig-property-action="remove"]');if(!X)return;X.classList.add("fig-palette-editor-remove"),X.setAttribute("aria-label",`Remove color ${$+1}`),X.toggleAttribute("disabled",this.#W||this.#Z.length<=this.#J)})}#I(){if(!this.#U)return;let Z=this.#G==="fade";this.#q.classList.toggle("fig-overflow-fade",Z);let $=this.#T;if($===null)this.#q.style.removeProperty("--fig-palette-editor-overflow-show-rows");else this.#q.style.setProperty("--fig-palette-editor-overflow-show-rows",String($));if(this.#q.toggleAttribute("disabled",this.#W),this.#S(),this.#L.toggleAttribute("disabled",this.#W||this.#Z.length>=this.#j),this.#Y){if(this.#$.contains(document.activeElement))this.#Q[0]?.querySelector(".fig-palette-editor-color")?.focus();this.#$.remove()}else if(!this.#$.isConnected)this.append(this.#$)}#w=(Z)=>{if(Z.button!==0||this.#K)return;this.#K=!0,window.addEventListener("pointerup",this.#N,!0),window.addEventListener("pointercancel",this.#N,!0),window.addEventListener("blur",this.#N,!0)};#N=()=>{window.removeEventListener("pointerup",this.#N,!0),window.removeEventListener("pointercancel",this.#N,!0),window.removeEventListener("blur",this.#N,!0),queueMicrotask(()=>this.#b({reconcile:!0}))};#b({reconcile:Z}){window.removeEventListener("pointerup",this.#N,!0),window.removeEventListener("pointercancel",this.#N,!0),window.removeEventListener("blur",this.#N,!0);let $=this.#K;if(this.#K=!1,!Z||!$||!this.#_)return;this.#Z=this.#_,this.#_=null,this.#M(),this.#I()}}if(!customElements.get("fig-palette-editor"))customElements.define("fig-palette-editor",KZ);import"./fig.js";var a=["value","mode","precision","edit","presets","text"];customElements.whenDefined("fig-popup").then(()=>{if(customElements.get("fig-popup-easing"))return;let Z=customElements.get("fig-popup");class $ extends Z{#Z=null;#X=!1;static get observedAttributes(){return[...new Set([...super.observedAttributes||[],...a])]}get value(){return this.#Z?.value??this.getAttribute("value")??""}set value(X){this.setAttribute("value",X&&typeof X==="object"?JSON.stringify(X):String(X??""))}connectedCallback(){this.#q(),this.#U(),super.connectedCallback(),this.#$()}attributeChangedCallback(X,J,Y){if(super.attributeChangedCallback(X,J,Y),J!==Y&&a.includes(X)&&!this.#X)this.#L(X)}#U(){if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Edit easing");if(!this.hasAttribute("position"))this.setAttribute("position","bottom left");if(!this.hasAttribute("offset"))this.setAttribute("offset","0 8");if(!this.hasAttribute("viewport-margin"))this.setAttribute("viewport-margin","8");if(!this.hasAttribute("popover"))this.setAttribute("popover","manual")}#q(){if(this.#Z?.isConnected)return;let X=this.querySelector(":scope > fig-content.fig-easing-curve-content"),J=X?.querySelector(":scope > fig-easing-curve");if(!X)X=document.createElement("fig-content"),X.className="fig-easing-curve-content",this.append(X);if(!J)J=document.createElement("fig-easing-curve"),J.setAttribute("aspect-ratio","4/3"),X.append(J);J.setAttribute("aspect-ratio","4/3"),J.addEventListener("input",this.#Q),J.addEventListener("change",this.#Q),this.#Z=J}#$(){for(let X of a)this.#L(X)}#L(X){if(!this.#Z)return;let J=this.getAttribute(X);if(J===null)this.#Z.removeAttribute(X);else this.#Z.setAttribute(X,J)}#Q=(X)=>{X.stopPropagation();let J=this.#Z?.value??X.detail;this.#X=!0,this.setAttribute("value",String(J??"")),this.#X=!1,this.dispatchEvent(new CustomEvent(X.type,{bubbles:!0,composed:!0,detail:X.detail}))}}customElements.define("fig-popup-easing",$,{extends:"dialog"})});import"./fig.js";var r=["value","color-space","disabled","overflow","show-rows"];customElements.whenDefined("fig-popup").then(()=>{if(customElements.get("fig-popup-gradient"))return;let Z=customElements.get("fig-popup");class $ extends Z{#Z=null;#X=!1;static get observedAttributes(){return[...new Set([...super.observedAttributes||[],...r])]}get value(){return this.#Z?.value??{}}set value(X){this.setAttribute("value",typeof X==="string"?X:JSON.stringify(X??{}))}connectedCallback(){this.#q(),this.#U(),super.connectedCallback(),this.#$()}attributeChangedCallback(X,J,Y){if(super.attributeChangedCallback(X,J,Y),J!==Y&&r.includes(X)&&!this.#X)this.#L(X)}#U(){if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Edit gradient");if(!this.hasAttribute("position"))this.setAttribute("position","bottom left");if(!this.hasAttribute("offset"))this.setAttribute("offset","0 8");if(!this.hasAttribute("viewport-margin"))this.setAttribute("viewport-margin","8");if(!this.hasAttribute("popover"))this.setAttribute("popover","manual")}#q(){if(this.#Z?.isConnected)return;let X=this.querySelector(":scope > fig-content.fig-gradient-editor-content"),J=X?.querySelector(":scope > fig-gradient-editor");if(!X)X=document.createElement("fig-content"),X.className="fig-gradient-editor-content",this.append(X);if(!J)J=document.createElement("fig-gradient-editor"),X.append(J);J.pickerAnchor=this,J.addEventListener("input",this.#Q),J.addEventListener("change",this.#Q),this.#Z=J}#$(){for(let X of r)this.#L(X);if(this.#Z)this.#Z.pickerAnchor=this}#L(X){if(!this.#Z)return;let J=this.getAttribute(X);if(J===null)this.#Z.removeAttribute(X);else this.#Z.setAttribute(X,J)}#Q=(X)=>{X.stopPropagation();let J=X.detail??{type:"gradient",gradient:this.#Z?.value,css:this.#Z?.cssValue};this.#X=!0,this.setAttribute("value",JSON.stringify(J.gradient??{})),this.#X=!1,this.dispatchEvent(new CustomEvent(X.type,{bubbles:!0,composed:!0,detail:J}))}}customElements.define("fig-popup-gradient",$,{extends:"dialog"})});import"./fig.js";var o=["value","min","max","fixed","disabled","overflow","show-rows"];function qZ(Z){let $=Z;if(typeof $==="string"){let X=$.trim();if(!X)return[];try{$=JSON.parse(X)}catch{$=X.includes(",")?X.split(","):[X]}}if(!Array.isArray($))return[];return $.map((X)=>{if(typeof X==="string"){let J=X.trim();return{color:J.slice(0,7)||"#D9D9D9",alpha:J.length>7?Math.max(0,Math.min(1,parseInt(J.slice(7,9),16)/255)):1}}if(X&&typeof X==="object"){let J=X.alpha!==void 0?Number(X.alpha):X.opacity!==void 0?Number(X.opacity)/100:1;return{color:String(X.color||"#D9D9D9").slice(0,7),alpha:Number.isFinite(J)?Math.max(0,Math.min(1,J)):1}}return{color:"#D9D9D9",alpha:1}})}customElements.whenDefined("fig-popup").then(()=>{if(customElements.get("fig-popup-palette"))return;let Z=customElements.get("fig-popup");class $ extends Z{#Z=null;#X=!1;static get observedAttributes(){return[...new Set([...super.observedAttributes||[],...o])]}get value(){return qZ(this.getAttribute("value"))}set value(X){this.setAttribute("value",typeof X==="string"?X:JSON.stringify(X??[]))}connectedCallback(){this.#q(),this.#U(),super.connectedCallback(),this.#$()}attributeChangedCallback(X,J,Y){if(super.attributeChangedCallback(X,J,Y),J!==Y&&o.includes(X)&&!this.#X)this.#L(X)}#U(){if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Edit palette");if(!this.hasAttribute("position"))this.setAttribute("position","bottom left");if(!this.hasAttribute("offset"))this.setAttribute("offset","0 8");if(!this.hasAttribute("viewport-margin"))this.setAttribute("viewport-margin","8");if(!this.hasAttribute("popover"))this.setAttribute("popover","manual");this.classList.add("fig-palette-editor-popup")}#q(){if(this.#Z?.isConnected)return;let X=this.querySelector(":scope > fig-content.fig-palette-editor-content"),J=X?.querySelector(":scope > fig-palette-editor");if(!X)X=document.createElement("fig-content"),X.className="fig-palette-editor-content",this.append(X);if(!J)J=document.createElement("fig-palette-editor"),X.append(J);J.addEventListener("input",this.#Q),J.addEventListener("change",this.#Q),this.#Z=J}#$(){for(let X of o)this.#L(X)}#L(X){if(!this.#Z)return;let J=this.getAttribute(X);if(J===null)this.#Z.removeAttribute(X);else this.#Z.setAttribute(X,J)}#Q=(X)=>{X.stopPropagation();let J=qZ(X.detail);this.#X=!0,this.setAttribute("value",JSON.stringify(J)),this.#X=!1,this.dispatchEvent(new CustomEvent(X.type,{bubbles:!0,composed:!0,detail:J}))}}customElements.define("fig-popup-palette",$,{extends:"dialog"})});function A(Z,$){if(!customElements.get(Z))customElements.define(Z,$)}function D(Z,$){return Z.hasAttribute($)&&Z.getAttribute($)!=="false"}function dZ(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function n(Z){if(!Z)return"";return`url("${String(Z).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function lZ(Z){let $=String(Z??"").trim();if(!$||$.startsWith("{")||$.startsWith("#"))return!1;if($.startsWith("data:video/"))return!0;try{let X=new URL($,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test(X)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test($)}}function I(Z,$={}){let X=document.createElement("fig-icon");if(Z)X.setAttribute("name",Z);if($.size)X.setAttribute("size",$.size);if($.className)X.className=$.className;return X}function kZ(Z,$){let X=(J)=>{if(J===null||J===void 0||J===!1)return;if(Array.isArray(J)){J.forEach(X);return}Z.append(J instanceof Node?J:String(J))};return X($),Z}function iZ(Z,$={}){for(let[X,J]of Object.entries($)){if(J===null||J===void 0||J===!1)continue;if(X==="className")Z.className=String(J);else if(J===!0)Z.setAttribute(X,"");else Z.setAttribute(X,String(J))}return Z}function L(Z,$,X){let J=document.createElement(Z);return iZ(J,$),kZ(J,X)}class GZ extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#X(),this.#U()}attributeChangedCallback(Z,$,X){if($===X||!this.isConnected)return;if(Z==="units")this.#$();else this.#q(Z)}get value(){return{x:this.#L("x"),y:this.#L("y")}}#X(){if(this.#Z.x&&this.#Z.y)return;let Z=($)=>{let X=$.toUpperCase(),J=L("fig-input-number",{full:!0,"aria-label":`${X} coordinate`,"data-axis":$},L("span",{slot:"prepend"},X));return J.addEventListener("input",(Y)=>this.#Q($,Y)),J.addEventListener("change",(Y)=>this.#Q($,Y)),this.#Z[$]=J,J};this.replaceChildren(L("fig-input-combo",{full:!0},["x","y"].map(Z)))}#U(){this.#q("x"),this.#q("y"),this.#$()}#q(Z){let $=this.#Z[Z];if(!$)return;let X=String(this.#L(Z));if($.getAttribute("value")!==X)$.setAttribute("value",X)}#$(){let Z=this.getAttribute("units");for(let $ of Object.values(this.#Z))if(Z===null)$.removeAttribute("units");else $.setAttribute("units",Z)}#L(Z){let $=Number(this.getAttribute(Z));return Number.isFinite($)?$:0}#Q(Z,$){$.stopPropagation();let X=Number($.detail);this.setAttribute(Z,String(Number.isFinite(X)?X:0)),this.dispatchEvent(new CustomEvent($.type,{bubbles:!0,detail:this.value}))}}A("fig-input-point",GZ);var aZ="http://www.w3.org/2000/svg";function _Z(Z,$,X){let J=document.createElementNS(aZ,Z);for(let[Y,Q]of Object.entries($||{})){if(Q===null||Q===void 0||Q===!1)continue;if(Y==="className")J.setAttribute("class",String(Q));else if(Q===!0)J.setAttribute(Y,"");else J.setAttribute(Y,String(Q))}return kZ(J,X)}function rZ({owner:Z,onStart:$,onEnd:X,startClass:J="",endClass:Y="",chevronClass:Q="",startLabel:W="Scroll back",endLabel:K="Scroll forward"}={}){let q=(U,j)=>{let z=document.createElement("button");if(z.type="button",z.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?J:Y].filter(Boolean).join(" "),z.dataset.figOverflow=U,Z)z.setAttribute(`data-fig-${Z}-nav`,U);return z.setAttribute("tabindex","-1"),z.setAttribute("aria-label",U==="start"?W:K),z.appendChild(I("chevron",{size:"small",className:["fig-overflow-chevron",Q].filter(Boolean).join(" ")})),z.addEventListener("click",(_)=>{_.preventDefault(),_.stopPropagation(),j?.(_)}),z};return{start:q("start",$),end:q("end",X)}}function t(Z,$,X="x",J=2){if(!Z||!$)return!1;let Y=X==="x",Q=Y?$.scrollWidth:$.scrollHeight,W=Y?$.clientWidth:$.clientHeight,K=Y?$.scrollLeft:$.scrollTop,q=Q-W>J,U=!q||K<=J,j=!q||K+W>=Q-J;return Z.classList.toggle("overflow-start",!U),Z.classList.toggle("overflow-end",!j),q}function jZ(Z,$="x",X=1){if(!Z)return;let J=$==="x",Q=(J?Z.clientWidth:Z.clientHeight)*0.8*X;Z.scrollBy({[J?"left":"top"]:Q,behavior:"smooth"})}function oZ(Z,$,X="y",J="auto"){if(!Z||!$||!Z.contains($))return;requestAnimationFrame(()=>{if(!Z.isConnected||!$.isConnected)return;let Y=X==="x",Q=Y?Z.scrollWidth:Z.scrollHeight,W=Y?Z.clientWidth:Z.clientHeight;if(Q<=W+1){t(Z,Z,X);return}let K=$.getBoundingClientRect(),q=Z.getBoundingClientRect(),U=Y?Z.scrollLeft:Z.scrollTop,j=(Y?K.left-q.left:K.top-q.top)+U,z=Y?K.width:K.height,_=Q-W,M=Math.max(0,Math.min(j+z/2-W/2,_));Z.scrollTo({[Y?"left":"top"]:M,behavior:J}),t(Z,Z,X)})}function nZ(Z){let $=Z||"";if($.startsWith("["))try{let J=JSON.parse($);return Array.isArray(J)?J:[]}catch{}let X=$.includes(`
|
|
2
2
|
`)?`
|
|
3
|
-
`:",";return
|
|
3
|
+
`:",";return $.split(X).map((J)=>J.trim()).filter(Boolean)}function tZ(Z){if(Z&&typeof Z==="object")return String(Z.value??Z.label??"");return String(Z??"")}function eZ(Z){if(Z&&typeof Z==="object")return String(Z.label??Z.value??"");return String(Z??"")}function NZ(Z){let $=Z.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if($)return $;return $=I("checkmark",{size:"small",className:"fig-select-option-checkmark"}),$.setAttribute("slot","prepend"),$.setAttribute("aria-hidden","true"),$.setAttribute("data-fig-select-checkmark",""),Z.append($),$}class BZ extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let Z=this.getAttribute("value");if(Z!==null)return Z;return(this.textContent||"").trim()}set value(Z){if(Z===null||Z===void 0)this.removeAttribute("value");else this.setAttribute("value",String(Z))}get disabled(){return D(this,"disabled")}set disabled(Z){if(Z)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return D(this,"selected")}set selected(Z){if(Z)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");NZ(this),this.#Z()}attributeChangedCallback(Z,$,X){if($===X)return;if(Z==="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",BZ);class FZ extends HTMLElement{#Z=null;#X=null;#U=null;#q=null;#$=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#L(),this.#Q(),this.addEventListener("scroll",this.#$,{passive:!0}),this.#U?.disconnect(),this.#U=new ResizeObserver(()=>this.syncOverflow()),this.#U.observe(this),this.#q?.disconnect(),this.#q=new MutationObserver(()=>{if(!this.isConnected)return;this.#Q(),this.syncOverflow()}),this.#q.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#$),this.#U?.disconnect(),this.#U=null,this.#q?.disconnect(),this.#q=null,this.#H()}syncOverflow(){return t(this,this,"y")}scrollToOption(Z,$="auto"){oZ(this,Z,"y",$)}#L(){let Z=this.querySelector(":scope > fig-chooser");if(!Z)return;while(Z.firstChild)this.insertBefore(Z.firstChild,Z);Z.remove()}#Q(){if(this.#Z&&this.#X&&this.contains(this.#Z)&&this.contains(this.#X)){this.#z();return}this.#H();let Z=rZ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>jZ(this,"y",-1),onEnd:()=>jZ(this,"y",1)});this.#Z=Z.start,this.#X=Z.end,this.#z()}#z(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#X)this.append(this.#X)}#H(){this.#Z?.remove(),this.#X?.remove(),this.#Z=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",FZ);class VZ extends HTMLElement{#Z=null;#X=null;#U=null;#q=null;#$=null;#L=null;#Q=null;#z=null;#H=null;#K=!1;#_=-1;#J=!1;#j=!1;#Y=null;#W=!1;#G=null;#T=null;#M=!1;#O=null;#A=this.#zZ.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"))})};#F=()=>this.removeAttribute("data-focus-visible");#f=this.#gZ.bind(this);#C=this.#OZ.bind(this);#V=this.#mZ.bind(this);#P=this.#uZ.bind(this);#E=this.#HZ.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(Z){if(Z===null||Z===void 0)this.removeAttribute("value");else this.setAttribute("value",String(Z))}get open(){return D(this,"open")}set open(Z){if(Z)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#O??this.getAttribute("menu-anchor")}set menuAnchor(Z){if(Z instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#O=Z}else if(typeof Z==="string"&&Z.trim())this.#O=null,this.setAttribute("menu-anchor",Z);else this.#O=null,this.removeAttribute("menu-anchor");this.#c()}connectedCallback(){if(!this.#K)this.#N();if(this.#y(),this.#w(),this.#UZ(),this.#m(),this.#MZ(),this.#XZ(),this.#xZ(),this.#$Z(),this.open)this.#CZ()}disconnectedCallback(){this.#wZ(),document.removeEventListener("keydown",this.#V,!0),this.#H?.disconnect(),this.#H=null}attributeChangedCallback(Z,$,X){if($===X||!this.#K)return;if(Z==="options"){this.#w(),this.#XZ();return}if(Z==="value"||Z==="label"||Z==="aria-label"){this.#XZ();return}if(Z==="disabled"){this.#UZ();return}if(Z==="size"){this.#m();return}if(Z==="open"){if(X===null||X==="false")this.#RZ();else this.#CZ();return}if(Z==="menu-anchor"){this.#O=null,this.#c();return}if(Z==="position"||Z==="offset"||Z==="closedby"){if(this.#MZ(),this.open)this.#g()}}focus(Z){this.#Z?.focus(Z)}blur(){this.#Z?.blur()}#m(){if(!this.#Z)return;let Z=this.getAttribute("size");if(Z)this.#Z.setAttribute("size",Z);else this.#Z.removeAttribute("size")}#S(Z){return Z?.nodeType===1&&(Z.tagName==="FIG-SELECT-OPTION"||Z.tagName==="FIG-SEPARATOR"||Z.tagName==="FIG-SELECT-OPTIONS")}#y(){for(let Z of this.querySelectorAll(":scope > fig-select-options"))if(!Z.hasAttribute("slot"))Z.setAttribute("slot","panel")}#x(){let $=(this.#z?.assignedElements({flatten:!0})??[]).find((X)=>X.tagName==="FIG-SELECT-OPTIONS");if($)return $;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])"))}#I(){let Z=this.#x();if(Z){if(!Z.hasAttribute("slot"))Z.setAttribute("slot","panel");return Z}return Z=document.createElement("fig-select-options"),Z.setAttribute("slot","panel"),Z.setAttribute("data-fig-generated",""),this.appendChild(Z),Z}#w(){if(this.#h())return;let Z=this.hasAttribute("options"),$=Z?this.#I():this.#x();if(!$)return;this.#M=!0;try{for(let Y of $.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))Y.remove();if(!Z)return;let X=nZ(this.getAttribute("options")),J=$.querySelector(":scope > .fig-overflow-end");for(let Y of X){let Q=document.createElement("fig-select-option");if(Q.setAttribute("data-fig-generated",""),Q.setAttribute("value",tZ(Y)),Q.textContent=eZ(Y),J)$.insertBefore(Q,J);else $.appendChild(Q)}}finally{this.#M=!1}}#N(){this.#K=!0;let Z=this.attachShadow({mode:"open"}),$=document.createElement("style");$.textContent=`
|
|
4
4
|
:host {
|
|
5
5
|
display: inline-flex;
|
|
6
6
|
position: relative;
|
|
@@ -105,4 +105,4 @@ import"./fig.js";import"./fig-property.js";import{figConvertRGB as i,figHexToRGB
|
|
|
105
105
|
min-height: 0;
|
|
106
106
|
max-height: inherit;
|
|
107
107
|
}
|
|
108
|
-
`,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);
|
|
108
|
+
`,Z.appendChild($);let X=document.createElement("fig-button");X.className="fig-select-trigger",X.setAttribute("part","trigger"),X.setAttribute("variant","ghost"),X.setAttribute("aria-haspopup","listbox"),X.setAttribute("aria-expanded","false");let J=document.createElement("span");J.className="fig-select-prepend",J.setAttribute("part","prepend"),J.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",J.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,X.append(J,W,K);let q=document.createElement("dialog",{is:"fig-popup"});if(q.setAttribute("is","fig-popup"),q.setAttribute("part","listbox"),q.setAttribute("theme","menu"),q.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)q.setAttribute("popover","manual");q.id=dZ(),X.setAttribute("aria-controls",q.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),q.appendChild(U),Z.append(X,q),this.#Z=X,this.#U=J,this.#q=Y,this.#$=Q,this.#L=K,this.#Q=W,this.#X=q,this.#z=U,this.#c(),this.#y(),this.#b(),!this.hasAttribute("value")){let j=this.#QZ().find((z)=>D(z,"selected"));if(j)this.setAttribute("value",j.value)}}#b(){if(!this.#X||this.#j)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.#g()},this.#j=!0}#i(Z){if(!Z)return null;let $=document.createRange();$.selectNodeContents(Z);let X=[...$.getClientRects()].filter((J)=>J.width>0&&J.height>0);if(X.length)return X[0];return Z.getBoundingClientRect()}#v(){if(typeof this.#X?.parseViewportMargins==="function")return this.#X.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#R(){if(this.#O?.isConnected)return this.#O;let Z=this.getAttribute("menu-anchor");if(Z)try{let $=this.parentElement?.querySelector(Z);if($&&$!==this&&!this.contains($))return $;let J=this.getRootNode()?.querySelector?.(Z);if(J&&J!==this&&!this.contains(J))return J}catch{}return null}#t(){return this.#R()||this.#Z}#p(){return Boolean(this.#R())}#e(){return!this.#LZ()&&this.#p()}#c(){if(!this.#X)return;if(this.#X.anchor=this.#t(),this.#JZ(),!this.open)return;this.#W=!1,this.#G=null,this.#T=null,this.#X.setupObservers?.(),this.#X.queueReposition?.()}#ZZ(){let Z=this.#Q?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;let $=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if($?.width&&$?.height)return $;return this.#U?.getBoundingClientRect()??null}#s(){let $=(this.#e()?this.#R():null)?.getBoundingClientRect()??this.#ZZ();if(!$)return null;return{x:$.x,y:$.y,width:$.width,height:$.height}}#a(){let Z=window.visualViewport;return{width:Z?.width??window.innerWidth,height:Z?.height??window.innerHeight,offsetLeft:Z?.offsetLeft??0,offsetTop:Z?.offsetTop??0}}#VZ(Z,$,X=0.25){if(!Z&&!$)return!1;if(!Z||!$)return!0;return Math.abs(Z.x-$.x)>X||Math.abs(Z.y-$.y)>X||Math.abs(Z.width-$.width)>X||Math.abs(Z.height-$.height)>X}#u(Z,$,X=0.25){if(!Z&&!$)return!1;if(!Z||!$)return!0;return Math.abs(Z.width-$.width)>X||Math.abs(Z.height-$.height)>X||Math.abs(Z.offsetLeft-$.offsetLeft)>X||Math.abs(Z.offsetTop-$.offsetTop)>X}#jZ(){if(!this.#W)return!1;let Z=this.#VZ(this.#G,this.#s()),$=this.#u(this.#T,this.#a());return!Z&&!$}#KZ(){this.#G=this.#s(),this.#T=this.#a()}#LZ(){let Z=this.getAttribute("position");return Boolean(Z&&Z.trim())}#IZ(){if(!this.#X)return;this.#X.style.removeProperty("left"),this.#X.style.removeProperty("top"),this.#X.style.removeProperty("right"),this.#X.style.removeProperty("bottom")}#g(){if(this.#LZ()){if(this.#W=!1,this.#G=null,this.#T=null,this.#JZ(),this.#IZ(),this.#bZ())return;this.#Y?.(),this.#DZ();return}this.#qZ()}#bZ(){let Z=this.#X,$=this.#R();if(!Z||!$||typeof Z.parsePosition!=="function"||typeof Z.parseOffset!=="function"||typeof Z.computeCoords!=="function")return!1;let X=Z.getBoundingClientRect(),J=$.getBoundingClientRect();if(!X.width||!X.height)return!1;let{vertical:Y,horizontal:Q,shorthand:W}=Z.parsePosition(),K=Z.parseOffset(),{left:q,top:U}=Z.computeCoords(J,X,Y,Q,K,W),j=this.#v();if(typeof Z.clampToViewport==="function")({left:q,top:U}=Z.clampToViewport({left:q,top:U},X,j));return Z.style.setProperty("right","auto","important"),Z.style.setProperty("bottom","auto","important"),Z.style.setProperty("left",`${Math.round(q)}px`,"important"),Z.style.setProperty("top",`${Math.round(U)}px`,"important"),!0}#DZ(){let Z=this.#X;if(!Z||typeof Z.clampToViewport!=="function")return;let $=Z.getBoundingClientRect();if(!$.width||!$.height)return;let X=this.#v(),{left:J,top:Y}=Z.clampToViewport({left:$.left,top:$.top},$,X);Z.style.setProperty("right","auto","important"),Z.style.setProperty("bottom","auto","important"),Z.style.setProperty("left",`${Math.round(J)}px`,"important"),Z.style.setProperty("top",`${Math.round(Y)}px`,"important")}#qZ(){if(this.#jZ()){this.#DZ();return}let Z=this.#X,$=this.#Q;if(!Z||!$){this.#Y?.();return}let X=this.#QZ(),J=X.find((O)=>this.#d(O)===this.value)||X[0];if(!J){this.#Y?.();return}let Y=this.#e()?this.#R():null;if(Y)this.#JZ();this.#Y?.();let Q=Z.getBoundingClientRect(),W=J.getBoundingClientRect();if(!Q.width||!Q.height||!W.height)return;let K,q,U;if(Y){let O=Y.getBoundingClientRect();U=O,K=O.left+(O.width-Q.width)/2,q=O.top+(O.height-W.height)/2-(W.top-Q.top)}else{let O=this.#ZZ(),B=this.#i(J);if(!O?.width||!B)return;U=O;let N=B.left-Q.left,V=B.top-Q.top;K=D(this,"full")?this.getBoundingClientRect().left:O.left-N,q=O.top-V}let j=this.#v();if(typeof Z.clampToViewport==="function")({left:K,top:q}=Z.clampToViewport({left:K,top:q},Q,j));else{let{left:O,top:B}=j,N=window.innerWidth-Q.width-j.right,V=window.innerHeight-Q.height-j.bottom;K=Math.min(Math.max(K,O),Math.max(O,N)),q=Math.min(Math.max(q,B),Math.max(B,V))}Z.style.setProperty("right","auto","important"),Z.style.setProperty("bottom","auto","important"),Z.style.setProperty("left",`${Math.round(K)}px`,"important"),Z.style.setProperty("top",`${Math.round(q)}px`,"important");let z=this.#x(),_=J.getBoundingClientRect(),M=Y?null:this.#i(J);if(z&&z.scrollHeight>z.clientHeight+1){let O=Y?_.top+_.height/2-(U.top+U.height/2):M?M.top-U.top:0;if(Math.abs(O)>0.5)z.scrollTop+=O;z.syncOverflow?.()}if(this.#W||this.open)this.#KZ()}#xZ(){this.#Z?.addEventListener("click",this.#A),this.#Z?.addEventListener("keydown",this.#V),this.#Z?.addEventListener("focus",this.#B),this.#Z?.addEventListener("blur",this.#F),this.addEventListener("click",this.#f),this.addEventListener("pointerover",this.#C),this.#X?.addEventListener("keydown",this.#V),this.#X?.addEventListener("close",this.#P),this.#z?.addEventListener("slotchange",this.#E)}#wZ(){this.#Z?.removeEventListener("click",this.#A),this.#Z?.removeEventListener("keydown",this.#V),this.#Z?.removeEventListener("focus",this.#B),this.#Z?.removeEventListener("blur",this.#F),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#f),this.removeEventListener("pointerover",this.#C),this.#X?.removeEventListener("keydown",this.#V),this.#X?.removeEventListener("close",this.#P),this.#z?.removeEventListener("slotchange",this.#E)}#HZ(){this.#y(),this.#XZ()}#$Z(){if(this.#H)return;this.#H=new MutationObserver((Z)=>{if(this.#J||this.#M)return;let $=!1;for(let X of Z){if(X.type==="childList"){if([...X.addedNodes].some((J)=>this.#S(J))||[...X.removedNodes].some((J)=>this.#S(J))||X.target?.closest?.("fig-select-option"))$=!0}if(X.type==="attributes"&&X.target?.tagName==="FIG-SELECT-OPTION"){if(X.attributeName==="value"||X.attributeName==="disabled"||X.attributeName==="label")$=!0;else if(X.attributeName==="selected"){if(D(X.target,"selected")){let J=this.#d(X.target);if((this.getAttribute("value")??"")!==J)this.setAttribute("value",J),$=!0}else if(this.#d(X.target)===(this.getAttribute("value")??""))$=!0}}if(X.type==="characterData"&&X.target?.parentElement?.tagName==="FIG-SELECT-OPTION")$=!0}if($)this.#XZ()}),this.#H.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#QZ({enabledOnly:Z=!1}={}){let $=this.#x(),X=$?Array.from($.querySelectorAll(":scope > fig-select-option")):[];if(!Z)return X;return X.filter((J)=>!D(J,"disabled"))}#d(Z){if(!Z)return"";if(typeof Z.value==="string")return Z.value;let $=Z.getAttribute?.("value");if($!=null)return $;return(Z.textContent||"").trim()}#AZ(Z){if(!Z)return"";let $=Z.getAttribute?.("label");if($!=null&&$!=="")return $.trim();let X=[];for(let J of Z.childNodes){if(J.nodeType===Node.TEXT_NODE){let W=J.textContent?.trim();if(W)X.push(W);continue}if(!(J instanceof Element))continue;let Y=J.getAttribute("slot");if(Y==="prepend"||Y==="append")continue;let Q=J.textContent?.trim();if(Q)X.push(Q)}if(X.length)return X.join(" ").trim();return(Z.textContent||"").trim()}#D(Z){if(!this.#U||!this.#q||!this.#$||!this.#L)return;let $=this.querySelector(':scope > [slot="trigger"]'),X=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),J=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),Y=Z?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#L.hidden=!$,this.#Q.hidden=Boolean($),this.#U.hidden=Boolean($),$){X?.remove(),this.#U.classList.remove("has-content"),this.#q.hidden=!0,this.#$.replaceChildren();return}if(!J&&Y?.childNodes.length){let W=X||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);J=W}else if(J)X?.remove();else X?.remove();let Q=Boolean(J);if(this.#U.classList.toggle("has-content",Q),this.#q.hidden=!J,this.#$.hidden=Boolean(J),J){this.#$.replaceChildren();return}this.#$.replaceChildren()}#MZ(){if(!this.#X)return;this.#X.setAttribute("position",this.getAttribute("position")||"bottom left");let Z=this.getAttribute("offset");if(Z)this.#X.setAttribute("offset",Z);else this.#X.removeAttribute("offset");let $=this.getAttribute("closedby");if($)this.#X.setAttribute("closedby",$);else this.#X.removeAttribute("closedby")}#UZ(){let Z=D(this,"disabled");if(this.#Z)if(Z)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(Z&&this.open)this.open=!1}#hZ(Z){if(!Z.length)return null;let $=Z.find((X)=>D(X,"selected"));if($&&!D($,"disabled"))return $;return Z.find((X)=>!D(X,"disabled"))||Z[0]||null}#TZ(Z){this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,composed:!0}))}#XZ(){if(this.#J)return;this.#J=!0;try{let Z=this.#QZ(),$=this.hasAttribute("value"),X=$?this.getAttribute("value"):null,J=$?Z.find((K)=>this.#d(K)===X):null,Y=!1;if(!J){if($){if(!Z.length){if(this.#Q)this.#Q.textContent=X||this.getAttribute("label")||"";return}if(J=this.#hZ(Z),J){let K=this.#d(J);if(X!==K)this.setAttribute("value",K),Y=!0}else this.removeAttribute("value"),Y=!0}else if(J=Z.find((K)=>D(K,"selected")),J)this.setAttribute("value",this.#d(J)),Y=!0}for(let K of Z){NZ(K);let q=K===J;if(K.setAttribute("aria-selected",q?"true":"false"),q)K.setAttribute("selected","");else K.removeAttribute("selected")}let Q=J&&this.#AZ(J)||this.getAttribute("label")||"";if(this.#Q)this.#Q.textContent=Q;this.#D(J);let W=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",W),this.#x()?.syncOverflow?.(),Y)this.#TZ(this.getAttribute("value")??"")}finally{this.#J=!1}}#zZ(Z){if(D(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation();let $=!this.open;if($)this.#c();this.open=$}#gZ(Z){let X=(typeof Z.composedPath==="function"?Z.composedPath():[]).find((J)=>J?.tagName==="FIG-SELECT-OPTION");if(!X||!this.contains(X))return;if(D(X,"disabled"))return;this.#vZ(X)}#OZ(Z){let X=(typeof Z.composedPath==="function"?Z.composedPath():[]).find((J)=>J?.tagName==="FIG-SELECT-OPTION");if(!X||!this.contains(X))return;if(D(X,"disabled"))return;if(Z.relatedTarget instanceof Node&&X.contains(Z.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#d(X),bubbles:!0,composed:!0}))}#mZ(Z){if(Z.currentTarget===document&&Z.key!=="Escape")return;if(!(this.open&&(this.#X?.matches?.(":open")??!1))){if(this.#Z?.contains(Z.target)&&(Z.key==="ArrowDown"||Z.key==="Enter"||Z.key===" "))Z.preventDefault(),this.#c(),this.open=!0,requestAnimationFrame(()=>{let Y=this.#QZ({enabledOnly:!0}).findIndex((Q)=>this.#d(Q)===this.value);this.#o(Y>=0?Y:0)});return}let X=this.#QZ({enabledOnly:!0});if(!X.length)return;switch(Z.key){case"ArrowDown":Z.preventDefault(),this.#l(),this.#o(this.#_+1,!0);break;case"ArrowUp":Z.preventDefault(),this.#l(),this.#o(this.#_-1,!0);break;case"Home":Z.preventDefault(),this.#o(0,!0);break;case"End":Z.preventDefault(),this.#o(X.length-1,!0);break;case"Escape":Z.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#l();let J=X[this.#_];if(!J)return;Z.preventDefault(),this.#vZ(J);break}}}#uZ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#_=-1}#vZ(Z){let $=this.#d(Z);this.setAttribute("value",$),this.#XZ(),this.#TZ($),this.open=!1}#r(){return this.#QZ({enabledOnly:!0})}#l(){let Z=this.#r();if(!Z.length){this.#_=-1;return}let $=Z.find((J)=>J===document.activeElement),X=$?Z.indexOf($):-1;this.#_=X>=0?X:this.#_}#o(Z,$=!1){let X=this.#r();if(!X.length)return;let J=(Z%X.length+X.length)%X.length,Y=X[J],Q=document.activeElement!==Y;if(this.#_=J,Y?.focus(),$&&Q)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#d(Y),bubbles:!0,composed:!0}))}#JZ(){if(!this.#X||!this.#Z)return;let Z=Math.ceil(this.getBoundingClientRect().width),$=Math.ceil(this.#Z.getBoundingClientRect().width),X=Math.max(Z,$,96),J=this.#p()?this.#R():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))),q=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"),J){let j=J.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 z=this.#X.getBoundingClientRect().width,_=Math.min(K,Math.max(X,z)),M=Math.max(j,_);this.#X.style.setProperty("width",`${M}px`,"important"),this.#X.style.setProperty("min-width",`${M}px`,"important"),this.#X.style.setProperty("max-width",`${M}px`,"important")}else this.#X.style.setProperty("width","max-content","important"),this.#X.style.setProperty("min-width",`${X}px`,"important"),this.#X.style.setProperty("max-width",`${K}px`,"important");this.#X.style.setProperty("max-height",`${q}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>q)this.#X.style.setProperty("height",`${q}px`,"important");if(!J&&U.width>K)this.#X.style.setProperty("width",`${K}px`,"important")}#CZ(){if(!this.#X||D(this,"disabled"))return;this.#c(),this.#b(),this.#W=!1,this.#G=null,this.#T=null,this.#XZ(),this.#JZ(),this.#X.open=!0,document.addEventListener("keydown",this.#V,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#_=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#JZ(),this.#g(),this.#JZ(),this.#DZ();let Z=this.#x(),X=this.#r().findIndex((J)=>this.#d(J)===this.value);if(X>=0)this.#o(X);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#o(0);if(Z?.syncOverflow?.(),!this.#LZ())this.#W=!0,this.#KZ()})})}#RZ(){if(!this.#X)return;this.#W=!1,this.#G=null,this.#T=null,document.removeEventListener("keydown",this.#V,!0),this.#X.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}A("fig-select",VZ);var Z0=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],$0=["shorter","longer","increasing","decreasing"],b=new Set(["oklch","hsl"]);function P(Z){let $={...Z??{}},X=String($.interpolationSpace??"srgb").toLowerCase();if(!Z0.includes(X))X="srgb";$.interpolationSpace=X;let J=String($.hueInterpolation??"shorter").toLowerCase();return $.hueInterpolation=$0.includes(J)?J:"shorter",$}function u(Z){let $=P(Z);return $.interpolationSpace="srgb",delete $.hueInterpolation,$}function m(Z){let $=u(Z),X={...$,interpolationSpace:$.interpolationSpace};if(b.has($.interpolationSpace))X.hueInterpolation=$.hueInterpolation;else delete X.hueInterpolation;return X}function X0(Z){let $=P(Z);if($.interpolationSpace==="srgb")return"";if(b.has($.interpolationSpace))return`in ${$.interpolationSpace} ${$.hueInterpolation} hue`;return`in ${$.interpolationSpace}`}function LZ(Z){let $=P(Z);if(b.has($.interpolationSpace))return`${$.interpolationSpace}-${$.hueInterpolation||"shorter"}`;return $.interpolationSpace}function E(Z){let $=String(Z??"");for(let X of b){let J=`${X}-`;if($.startsWith(J))return{interpolationSpace:X,hueInterpolation:$.slice(J.length)||"shorter"}}return{interpolationSpace:$||"srgb",hueInterpolation:"shorter"}}var J0=0;class f 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(Z){let $=f.#Z,X=$.find((K)=>K.value===Z);if(X)return X;let J=E(Z),Y=$.find((K)=>K.space===J.interpolationSpace),Q=Y?.subtitle.split(" ")[0]??J.interpolationSpace.toUpperCase(),W=J.hueInterpolation;return{value:Z,space:J.interpolationSpace,title:Y?.title??"Custom",subtitle:b.has(J.interpolationSpace)?`${Q} ${W.charAt(0).toUpperCase()}${W.slice(1)}`:Q}}#U=null;#q=null;#$=null;#L=`fig-fill-picker-dialog-${++J0}`;#Q="solid";anchorElement=null;#z="solid";#H="srgb";#K={h:0,s:0,v:85,a:1};#_="hex";#J={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}]};#j={url:null,scaleMode:"fill",scale:50};#Y={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#W={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#G=null;#T=!1;#M=null;#O={};#A={};#B=null;#F=null;#f=null;#C=null;#V=!1;#P=!1;#E=null;#m=null;#S=null;#y=null;#x=null;#h=0;#I=null;#w=null;#N=new Set;#b=new Set;#i=null;#v=null;constructor(){super();this.#I=this.#QZ.bind(this),this.#w=this.#d.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#g(()=>{this.#wZ(),this.#AZ(),this.#D(),this.#oZ()})}disconnectedCallback(){if(this.#TZ({stopWebcam:!0}),this.#bZ(),this.#DZ(),this.#qZ(this.#q))this.#q.removeAttribute("selected");if(this.#U)this.#U.removeEventListener("click",this.#I),this.#U.removeEventListener("keydown",this.#w);this.#U=null,this.#q=null}#R(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#t(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#p(){return this.#z==="webcam"&&this.#t()==="live"&&this.#W.live!==!1}#e(){return{live:this.#t()==="live"&&this.#W.live!==!1,snapshot:this.#W.snapshot??null,deviceId:this.#W.deviceId??null,scaleMode:this.#W.scaleMode||"fill",scale:this.#W.scale??50,opacity:this.#W.opacity??1}}#c(){let Z=this.#Y.url??null;return{url:Z,poster:this.#Y.poster??null,scaleMode:this.#Y.scaleMode||"fill",scale:this.#Y.scale??50,opacity:this.#Y.opacity??1,...Z?{}:{missing:!0}}}#ZZ(Z){if(Z.webcam&&typeof Z.webcam==="object"){let{stream:$,snapshot:X,...J}=Z.webcam;if(Object.assign(this.#W,J),typeof X==="string"&&X)this.#W.snapshot=X;return}if(Z.type==="webcam"&&Z.image){if(Z.image.url!=null)this.#W.snapshot=Z.image.url;if(Z.image.scaleMode)this.#W.scaleMode=Z.image.scaleMode;if(Z.image.scale!=null)this.#W.scale=Z.image.scale}}#s(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#W.stream,deviceId:this.#W.deviceId??null}}))}get webcamStream(){return this.#W.stream}releaseWebcam(){this.#zZ()}#a(Z){if(!Z)return null;if(this.#W.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#W.snapshot),this.#b.delete(this.#W.snapshot);return this.#W.snapshot=URL.createObjectURL(Z),this.#b.add(this.#W.snapshot),this.#W.snapshot}#VZ(Z,$,X){if(typeof Z.getImageData!=="function")return!1;let J;try{J=Z.getImageData(0,0,$,X).data}catch{return!1}let Y=Math.max(1,Math.floor($*X/256)),Q=0,W=0,K=0;for(let q=0;q<J.length;q+=Y*4){let U=Math.max(J[q],J[q+1],J[q+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(Z){let $=[],X=this.#W.stream?.getVideoTracks?.()?.[0];if(X&&typeof ImageCapture==="function")try{if(this.#M?.track!==X)this.#M=new ImageCapture(X);$.push(await this.#M.grabFrame())}catch{this.#M=null}if(typeof createImageBitmap==="function")try{$.push(await createImageBitmap(Z))}catch{}return $.push(Z),$.filter(Boolean)}async#jZ(Z,$,X,J){let Y=await this.#u($);for(let Q of Y){try{Z.drawImage(Q,0,0,X,J)}catch{continue}finally{Q.close?.()}if(!this.#VZ(Z,X,J))return!0}return!1}#KZ(Z){return new Promise(($)=>{if(typeof Z.requestVideoFrameCallback==="function"){let X=setTimeout(()=>$(!1),400);Z.requestVideoFrameCallback(()=>{clearTimeout(X),$(!0)});return}setTimeout(()=>$(!1),200)})}async#LZ(Z){if(!Z?.videoWidth||!Z.videoHeight)return null;let $=document.createElement("canvas");$.width=Z.videoWidth,$.height=Z.videoHeight;let X=$.getContext("2d",{willReadFrequently:!0});if(!X)return null;if(!await this.#jZ(X,Z,$.width,$.height))return null;let Y=await new Promise((Q)=>$.toBlob(Q,"image/png"));return this.#a(Y)}#IZ(Z){if(this.#z!=="webcam")return;let $=this.#W.stream;if(!$)return;if(this.#G===$&&this.#W.snapshot){this.#D();return}if(this.#T)return;this.#T=!0;let X=(Y)=>{if(this.#T=!1,!Y||this.#z!=="webcam"||this.#W.stream!==$)return;this.#G=$,this.#D()},J=async()=>{let Y=await this.#LZ(Z);if(Y){X(Y);return}if(this.#z!=="webcam"||this.#W.stream!==$){this.#T=!1;return}return await this.#KZ(Z),J()};J()}#g(Z){let $=requestAnimationFrame(()=>{if(this.#N.delete($),this.isConnected)Z()});return this.#N.add($),$}#bZ(){this.#N.forEach((Z)=>cancelAnimationFrame(Z)),this.#N.clear()}#DZ(){let Z=new Set([this.#W.snapshot,this.#Y.poster,this.#j.url].filter(($)=>typeof $==="string"&&$.startsWith("blob:")));this.#b.forEach(($)=>{if(!Z.has($))URL.revokeObjectURL($)}),this.#b.clear(),Z.forEach(($)=>this.#b.add($))}#qZ(Z){return Z?.matches("fig-swatch, fig-chit")??!1}#xZ(Z){return this.#qZ(Z)||(Z?.matches("[data-fig-fill-picker-swatch]")??!1)}#wZ(){let Z=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Z)this.#q=document.createElement("fig-swatch"),this.#q.setAttribute("background","#D9D9D9"),this.appendChild(this.#q),this.#U=this.#q;else if(this.#xZ(Z))this.#q=Z,this.#U=Z;else this.#U=Z,this.#q=null;if(this.#$Z(),this.#U.removeEventListener("click",this.#I),this.#U.addEventListener("click",this.#I),this.#U.removeEventListener("keydown",this.#w),this.#U.addEventListener("keydown",this.#w),this.#qZ(this.#q))this.#g(()=>{let $=this.#q.querySelector('input[type="color"]');if($)$.remove();this.#$Z()})}#HZ(){return this.getAttribute("aria-label")||"Fill picker"}#$Z(){if(!this.#U)return;let Z=this.#R(),$=this.getAttribute("aria-labelledby");if(!this.#U.hasAttribute("role"))this.#U.setAttribute("role","button");if(this.#U.setAttribute("tabindex",Z?"-1":"0"),this.#U.setAttribute("aria-disabled",Z?"true":"false"),this.#U.setAttribute("aria-haspopup","dialog"),this.#U.setAttribute("aria-expanded",this.#$?.open?"true":"false"),this.#U.setAttribute("aria-controls",this.#L),this.#U.removeAttribute("aria-hidden"),$)this.#U.setAttribute("aria-labelledby",$),this.#U.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#U.setAttribute("aria-label",`Open ${this.#HZ()}`),this.#U.removeAttribute("aria-labelledby");else if(this.#U.removeAttribute("aria-labelledby"),!this.#U.hasAttribute("aria-label"))this.#U.setAttribute("aria-label",`Open ${this.#HZ()}`);let X=this.getAttribute("aria-describedby");if(X)this.#U.setAttribute("aria-describedby",X);else this.#U.removeAttribute("aria-describedby")}#QZ(Z){if(this.#R())return;Z.stopPropagation(),Z.preventDefault(),this.#UZ()}#d(Z){if(Z.key!=="Enter"&&Z.key!==" ")return;if(this.#R())return;Z.preventDefault(),Z.stopPropagation(),this.#UZ()}#AZ(){let Z=this.getAttribute("value");if(!Z)return;let $=["solid","gradient","image","video","webcam"];try{let X=JSON.parse(Z);if(X.type)this.#z=X.type;if(X.color){if(typeof X.color==="string")this.#K=this.#FZ(X.color);else if(typeof X.color==="object"&&X.color.h!==void 0)this.#K=X.color}let J=X.alpha!==void 0?Number(X.alpha):X.opacity!==void 0?Number(X.opacity)/100:void 0;if(Number.isFinite(J))this.#K.a=Math.max(0,Math.min(1,J));if(this.#H="srgb",X.gradient)this.#J=u({...this.#J,...X.gradient});if(X.image)this.#j={...this.#j,...X.image};if(X.video){let Y=this.#Y.url;if(this.#Y={...this.#Y,...X.video},this.#Y.missing=!this.#Y.url,X.video.poster!=null&&X.video.poster!=="")this.#v=this.#Y.url;else if(this.#Y.url!==Y)this.#NZ();else this.#SZ()}if(this.#ZZ(X),X.type&&!$.includes(X.type)){let{type:Y,...Q}=X;this.#A[X.type]=Q}}catch(X){if(Z.startsWith("#")){this.#z="solid",this.#K=this.#FZ(Z);return}if(lZ(Z)){let J=this.#Y.url;if(this.#z="video",this.#Y.url=Z.trim(),this.#Y.missing=!1,this.#Y.url!==J)this.#NZ();else this.#SZ()}}}#D(){if(!this.#q)return;let Z,$="cover",X="center";switch(this.#z){case"solid":Z=this.#WZ(this.#K);break;case"gradient":Z=this.#rZ();break;case"image":if(this.#j.url){Z=n(this.#j.url);let J=this.#MZ(this.#j.scaleMode,this.#j.scale);$=J.size,X=J.position}else Z="";break;case"video":if(this.#Y.poster){Z=n(this.#Y.poster);let J=this.#MZ(this.#Y.scaleMode,this.#Y.scale);$=J.size,X=J.position}else Z="";break;case"webcam":if(this.#W.snapshot){Z=n(this.#W.snapshot);let J=this.#MZ(this.#W.scaleMode,this.#W.scale);$=J.size,X=J.position}else Z="";break;default:{Z=(this.#O[this.#z]?.element||this.querySelector(`[slot="mode-${this.#z}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#q.setAttribute("background",Z),this.#q.style.setProperty("--swatch-bg-size",$),this.#q.style.setProperty("--swatch-bg-position",X),this.#z==="solid")this.#q.setAttribute("alpha",this.#K.a);else this.#q.removeAttribute("alpha")}#MZ(Z,$){switch(Z){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:`${$}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#UZ(){if(this.#R())return;if(!this.#$)this.#gZ();else this.#$.anchor=this.anchorElement||this.#U;if(this.#OZ(this.#z,{emit:!1}),this.#S=JSON.stringify(this.value),this.#y=this.#S,this.#qZ(this.#q))this.#q.setAttribute("selected","true");this.#$.open=!0,this.#$Z(),this.#g(()=>{this.#$?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#g(()=>{this.#r(),this.#l()})})}open(){this.#UZ()}close(){if(this.#$)this.#$.open=!1,this.#$Z()}#hZ(){if(!this.#$)return;for(let[Z,{element:$}]of Object.entries(this.#O)){let X=Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).find((J)=>J.dataset.tab===Z);if(!X)continue;while(X.firstChild)$.appendChild(X.firstChild)}}#TZ({stopWebcam:Z=!1}={}){if(this.#E)this.#E(),this.#E=null;if(this.#m?.disconnect(),this.#m=null,!Z&&this.#p())this.#XZ();else this.#zZ();if(!this.#$)return;this.#hZ(),this.#$.remove(),this.#$=null,this.#x=null,this.#S=null,this.#y=null,this.#B=null,this.#F=null,this.#f=null,this.#C=null,this.#P=!1,this.#$Z()}#XZ(){this.#h+=1;let Z=this.#$?.querySelector(".fig-fill-picker-webcam-video");if(Z)Z.srcObject=null}#zZ({emit:Z=!0}={}){this.#h+=1;let $=Boolean(this.#W.stream);if(this.#W.stream)this.#W.stream.getTracks().forEach((J)=>J.stop()),this.#W.stream=null;this.#G=null,this.#T=!1,this.#M=null;let X=this.#$?.querySelector(".fig-fill-picker-webcam-video");if(X)X.srcObject=null;if($&&Z)this.#s()}#gZ(){this.#O={},this.querySelectorAll('[slot^="mode-"]').forEach((_)=>{let M=_.getAttribute("slot").slice(5);this.#O[M]={element:_,label:_.getAttribute("label")||M.charAt(0).toUpperCase()+M.slice(1)}}),this.#$=document.createElement("dialog",{is:"fig-popup"}),this.#$.setAttribute("is","fig-popup"),this.#$.id=this.#L,this.#$.setAttribute("aria-label",this.#HZ()),this.#$.setAttribute("drag","true"),this.#$.setAttribute("handle","fig-header"),this.#$.setAttribute("autoresize","false"),this.#$.classList.add("fig-fill-picker-dialog"),this.#$.anchor=this.anchorElement||this.#U;let Z=this.getAttribute("dialog-position")||"left";this.#$.setAttribute("position",Z),this.#$.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let $=["solid","gradient","image","video","webcam"],X={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},J=this.getAttribute("mode"),Y;if(J){if(Y=J.split(",").map((M)=>M.trim().toLowerCase()).filter((M)=>$.includes(M)||this.#O[M]),Y.length===0)Y=[...$]}else Y=[...$];let Q={...X};for(let[_,{label:M}]of Object.entries(this.#O))Q[_]=M;if(!Y.includes(this.#z))this.#z=Y[0],this.#Q=Y[0];let W;if(Y.length===1)W=L("h3",{className:"fig-fill-picker-type-label"},Q[Y[0]]);else{let _=L("fig-select-options",{},Y.map((M)=>L("fig-select-option",{value:M},Q[M])));W=L("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#z},_)}let K=Y.map((_)=>L("div",{className:"fig-fill-picker-tab","data-tab":_})),q=L("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},I("close"));this.#$.replaceChildren(L("fig-header",{},[W,q]),L("fig-content",{},K)),document.body.appendChild(this.#$);for(let[_,{element:M}]of Object.entries(this.#O)){let O=Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).find((B)=>B.dataset.tab===_);if(!O)continue;while(M.firstChild)O.appendChild(M.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:_,container:O}}))}let U=this.#$.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(_)=>{let M=typeof _.detail==="string"?_.detail:_.target?.value;if(M)this.#OZ(M)});this.#$.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#$.open=!1});let j=()=>{if(this.#qZ(this.#q))this.#q.removeAttribute("selected");if(this.#p())this.#XZ();else this.#zZ();let _=JSON.stringify(this.value);if(this.#y!==null&&this.#y!==_)this.#n();this.#S=null,this.#y=null,this.#$Z();let M=this.#U;this.#g(()=>{if(M?.isConnected)HTMLElement.prototype.focus.call(M)}),this.dispatchEvent(new CustomEvent("close"))};this.#$.addEventListener("close",j);let z={solid:()=>this.#uZ(),gradient:()=>this.#Z0(),image:()=>this.#q0(),video:()=>this.#z0(),webcam:()=>this.#H0()};for(let[_,M]of Object.entries(z))if(!this.#O[_]&&Y.includes(_))M();for(let _ of Object.keys(this.#O)){if($.includes(_))continue;let M=Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).find((O)=>O.dataset.tab===_);if(!M)continue;M.addEventListener("input",(O)=>{if(O.target===this)return;if(O.stopPropagation(),O.detail)this.#A[_]=O.detail;this.#k()}),M.addEventListener("change",(O)=>{if(O.target===this)return;if(O.stopPropagation(),O.detail)this.#A[_]=O.detail;this.#n()})}}#OZ(Z,{emit:$=!0}={}){let X=Array.from(this.#$?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===Z);if(!X)return;let J=this.#Q;if(this.#Q=Z,this.#z=Z,J==="webcam"&&Z!=="webcam")this.#zZ();let Y=this.#$.querySelector(".fig-fill-picker-type");if(Y&&Y.value!==Z)Y.value=Z;this.#$.querySelectorAll(".fig-fill-picker-tab").forEach((K)=>{if(K.dataset.tab===Z)K.style.display="block";else K.style.display="none"});let W=this.#$.querySelector("fig-content");if(W)W.style.padding=this.#O[Z]?"0":"";if(Z==="gradient")this.#g(()=>{this.#YZ();let K=X.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#g(()=>{K?.refreshLayout?.()})});if(Z==="video")this.#yZ({emit:!1});if(Z==="webcam")this.#W.live=this.#t()==="live",this.#x?.(this.#W.deviceId);if(this.#D(),$)this.#k()}#mZ(){if(!this.#$?.open)return;if(this.#OZ(this.#z,{emit:!1}),this.#r(),this.#l(),this.#kZ(),this.#f)this.#f.setAttribute("value",this.#K.h);if(this.#C)this.#C.setAttribute("value",this.#K.a*100),this.#C.setAttribute("color",this.#WZ(this.#K));this.#YZ();let Z=this.#$.querySelector('[data-tab="image"]'),$=Z?.querySelector(".fig-fill-picker-scale-mode"),X=Z?.querySelector(".fig-fill-picker-scale"),J=Z?.querySelector(".fig-fill-picker-image-preview");if($)$.value=this.#j.scaleMode;if(X)X.setAttribute("value",this.#j.scale),X.style.display=this.#j.scaleMode==="tile"?"block":"none";if(J)this.#_Z(J);let Y=this.#$.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.#GZ(W)}#uZ(){let Z=this.#$.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false",X=L("canvas",{width:"200",height:"200"}),J=L("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#WZ({...this.#K,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),Y=L("fig-preview",{className:"fig-fill-picker-color-area"},[X,J]),Q=L("fig-tooltip",{text:"Sample color"},L("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},I("eyedropper"))),W=L("div",{className:`fig-fill-picker-sliders${$?"":" is-hue-only"}`},[Q,L("fig-slider",{type:"hue",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#K.h}),$?L("fig-slider",{type:"opacity",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#K.a*100,color:this.#WZ(this.#K)}):null]),K=L("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([z,_])=>L("fig-select-option",{value:z},_))),q=L("fig-field",{className:"fig-fill-picker-inputs"},[L("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#_},K),L("span",{className:"fig-fill-picker-input-fields"})]);if(Z.replaceChildren(Y,W,q),this.#B=Z.querySelector("canvas"),this.#F=Z.querySelector("fig-handle"),this.#o(),this.#r(),this.#l(),this.#CZ(),this.#f=Z.querySelector('fig-slider[type="hue"]'),this.#f.addEventListener("input",(z)=>{this.#K.h=parseFloat(z.target.value),this.#r(),this.#l(),this.#kZ(),this.#k()}),this.#f.addEventListener("change",()=>{this.#n()}),$)this.#C=Z.querySelector('fig-slider[type="opacity"]'),this.#C.addEventListener("input",(z)=>{this.#K.a=parseFloat(z.target.value)/100,this.#kZ(),this.#k()}),this.#C.addEventListener("change",()=>{this.#n()});Z.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(z)=>{let _=typeof z.detail==="string"?z.detail:z.target?.value;if(!_)return;this.#_=_,this.#RZ()}),this.#RZ();let j=Z.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)j.addEventListener("click",async()=>{try{let _=await new EyeDropper().open();this.#K={...this.#FZ(_.sRGBHex),a:this.#K.a},this.#r(),this.#l(),this.#kZ(),this.#k()}catch(z){}});else j.setAttribute("disabled",""),j.title="EyeDropper not supported in this browser"}#vZ(){let Z=this.#$?.querySelector('[data-tab="solid"]');if(Z){let $=Z.querySelector("canvas");if($){let X=document.createElement("canvas");X.width=$.width,X.height=$.height,$.replaceWith(X),this.#B=X,this.#CZ()}this.#r(),this.#l()}this.#fZ(),this.#k()}#r(){if(!this.#B&&this.#$)this.#B=this.#$.querySelector('[data-tab="solid"] canvas');if(!this.#B)return;let Z=this.#H==="display-p3"?"display-p3":"srgb",$=this.#B.getContext("2d",{colorSpace:Z});if(!$)return;let X=this.#B.width,J=this.#B.height;$.clearRect(0,0,X,J);let Y=this.#K.h,Q=this.#H==="display-p3",W=$.createLinearGradient(0,0,X,0);if(Q){W.addColorStop(0,"color(display-p3 1 1 1)");let q=zZ(Y,100,50),U=UZ(q.r,q.g,q.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%)`);$.fillStyle=W,$.fillRect(0,0,X,J);let K=$.createLinearGradient(0,0,0,J);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),$.fillStyle=K,$.fillRect(0,0,X,J)}#l(Z=0){if(!this.#F||!this.#B)return;this.#o();let $=this.#B.getBoundingClientRect();if(($.width===0||$.height===0)&&Z<5){this.#g(()=>this.#l(Z+1));return}let X=Math.max(0,Math.min(100,this.#K.s)),J=Math.max(0,Math.min(100,100-this.#K.v));this.#F.setAttribute("value",`${X}% ${J}%`),this.#F.setAttribute("color",this.#WZ({...this.#K,a:1}))}#o(){if(!this.#F)return;this.#F.setAttribute("aria-valuenow",String(Math.round(this.#K.v))),this.#F.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#K.s)}%, brightness ${Math.round(this.#K.v)}%`),this.#F.removeAttribute("aria-pressed")}#JZ(Z,$,X={}){let{updateHandle:J=!0,emitInput:Y=!0,emitChange:Q=!1}=X;if(this.#K.s=Math.max(0,Math.min(100,Z*100)),this.#K.v=Math.max(0,Math.min(100,(1-$)*100)),this.#F)this.#F.setAttribute("color",this.#WZ({...this.#K,a:1})),this.#o();if(J)this.#l();if(this.#kZ(),Y)this.#k();if(Q)this.#n()}#CZ(){if(this.#E)this.#E(),this.#E=null;if(!this.#B||!this.#F)return;let Z=this.#B.parentElement||this.#B,$=this.#F,X=!1,J=(U,j={})=>{let z=Z.getBoundingClientRect();if(z.width===0||z.height===0)return;let _=Math.max(0,Math.min(U.clientX-z.left,z.width)),M=Math.max(0,Math.min(U.clientY-z.top,z.height));this.#JZ(_/z.width,M/z.height,j)},Y=(U)=>{if(U.button!==0)return;if(U.target===$||$.contains(U.target))return;X=!0,this.#V=!0,Z.setPointerCapture(U.pointerId),J(U,{updateHandle:!0,emitInput:!0})},Q=(U)=>{if(!X)return;if(U.buttons===0){W();return}J(U,{updateHandle:!0,emitInput:!0})},W=()=>{if(!X)return;X=!1,this.#V=!1,this.#n()},K=(U)=>{this.#V=!0;let j=U.detail?.px,z=U.detail?.py;if(!Number.isFinite(j)||!Number.isFinite(z))return;$.setAttribute("value",`${j*100}% ${z*100}%`),this.#JZ(j,z,{updateHandle:!1,emitInput:!0})},q=(U)=>{let j=U.detail?.px,z=U.detail?.py;if(Number.isFinite(j)&&Number.isFinite(z))$.setAttribute("value",`${j*100}% ${z*100}%`),this.#JZ(j,z,{updateHandle:!1,emitInput:!1});this.#V=!1,this.#n()};Z.addEventListener("pointerdown",Y),Z.addEventListener("pointermove",Q),Z.addEventListener("pointerup",W),Z.addEventListener("pointercancel",W),Z.addEventListener("lostpointercapture",W),$.addEventListener("input",K),$.addEventListener("change",q),this.#E=()=>{Z.removeEventListener("pointerdown",Y),Z.removeEventListener("pointermove",Q),Z.removeEventListener("pointerup",W),Z.removeEventListener("pointercancel",W),Z.removeEventListener("lostpointercapture",W),$.removeEventListener("input",K),$.removeEventListener("change",q),this.#V=!1}}#RZ(){let Z=this.#$?.querySelector(".fig-fill-picker-input-fields");if(!Z)return;let $=(K,q)=>L("fig-tooltip",{text:K},q),X=(K,q,U,j,z,_)=>L("fig-input-number",{className:K,"aria-label":q,min:U,max:j,step:z,units:_}),J=this.getAttribute("alpha")!=="false",Y=()=>J?$("Alpha",X("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Q=(K,q="")=>L("div",{className:["input-combo",q].filter(Boolean).join(" ")},K),W;switch(this.#_){case"rgb":W=Q([$("Red",X("fig-fill-picker-ci-r","Red",0,255)),$("Green",X("fig-fill-picker-ci-g","Green",0,255)),$("Blue",X("fig-fill-picker-ci-b","Blue",0,255)),Y()]);break;case"hsl":W=Q([$("Hue",X("fig-fill-picker-ci-h","Hue",0,360)),$("Saturation",X("fig-fill-picker-ci-s","Saturation",0,100)),$("Lightness",X("fig-fill-picker-ci-l","Lightness",0,100)),Y()]);break;case"hsb":W=Q([$("Hue",X("fig-fill-picker-ci-h","Hue",0,360)),$("Saturation",X("fig-fill-picker-ci-s","Saturation",0,100)),$("Brightness",X("fig-fill-picker-ci-v","Brightness",0,100)),Y()]);break;case"lab":W=Q([$("Lightness",X("fig-fill-picker-ci-okl","Lightness",0,100)),$("Green-Red axis",X("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),$("Blue-Yellow axis",X("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),Y()]);break;case"lch":W=Q([$("Lightness",X("fig-fill-picker-ci-okl","Lightness",0,100)),$("Chroma",X("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),$("Hue",X("fig-fill-picker-ci-okh","Hue",0,360)),Y()]);break;case"css":W=L("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=L("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});W=J?L("fig-input-combo",{className:"input-combo fig-fill-picker-ci-hex-row",full:!0},[K,Y()]):K}break}Z.replaceChildren(W),this.#nZ(),this.#g(()=>this.#kZ())}#nZ(){let Z=this.#$?.querySelector(".fig-fill-picker-input-fields");if(!Z)return;let $=()=>{if(this.#V)return;let Y=this.#eZ();if(!Y)return;let Q=Number.isFinite(Y.a)?Y.a:this.#K.a;if(this.#K={...Y,a:Q},this.#r(),this.#l(),this.#f)this.#f.setAttribute("value",this.#K.h);if(this.#C&&Number.isFinite(Y.a))this.#C.setAttribute("value",this.#K.a*100);this.#k()},X=()=>this.#n();Z.querySelectorAll("fig-input-number, fig-input-text").forEach((Y)=>{Y.addEventListener("input",$),Y.addEventListener("change",X)})}#tZ(){let Z=this.#$?.querySelector(".fig-fill-picker-ci-a");if(!Z)return;let $=parseFloat(Z.value);if(!Number.isFinite($))return;return Math.max(0,Math.min(1,$/100))}#eZ(){let Z=(J)=>this.#$?.querySelector(`.${J}`),$=(J)=>parseFloat(Z(J)?.value??0),X=(J)=>{if(!J)return null;let Y=this.#tZ();return{...J,a:Y??J.a??this.#K.a}};switch(this.#_){case"rgb":return X(this.#BZ({r:$("fig-fill-picker-ci-r"),g:$("fig-fill-picker-ci-g"),b:$("fig-fill-picker-ci-b")}));case"hsl":{let J=this.#V0({h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),l:$("fig-fill-picker-ci-l")});return X(this.#BZ(J))}case"hsb":return X({h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),v:$("fig-fill-picker-ci-v")});case"lab":{let J=this.#C0({l:$("fig-fill-picker-ci-okl")/100,a:$("fig-fill-picker-ci-oka"),b:$("fig-fill-picker-ci-okb")});return X(this.#BZ(J))}case"lch":{let J=this.#P0({l:$("fig-fill-picker-ci-okl")/100,c:$("fig-fill-picker-ci-okc"),h:$("fig-fill-picker-ci-okh")});return X(this.#BZ(J))}case"css":{let J=Z("fig-fill-picker-ci-css");if(!J)return null;return this.#N0(J.value)}default:{let J=Z("fig-fill-picker-ci-hex");if(!J)return null;let Y=J.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.#FZ(`#${Y}`),a:Q}}if(Y.length!==6||!/^[0-9a-fA-F]{6}$/.test(Y))return null;return X(this.#FZ(`#${Y}`))}}}#kZ(){if(!this.#$)return;let Z=this.#WZ(this.#K),$=this.#lZ(this.#K),X=(Y)=>this.#$.querySelector(`.${Y}`),J=(Y,Q)=>{let W=X(Y);if(W)W.setAttribute("value",Q)};switch(this.#_){case"rgb":J("fig-fill-picker-ci-r",$.r),J("fig-fill-picker-ci-g",$.g),J("fig-fill-picker-ci-b",$.b);break;case"hsl":{let Y=this.#F0($);J("fig-fill-picker-ci-h",Math.round(Y.h)),J("fig-fill-picker-ci-s",Math.round(Y.s)),J("fig-fill-picker-ci-l",Math.round(Y.l));break}case"hsb":J("fig-fill-picker-ci-h",Math.round(this.#K.h)),J("fig-fill-picker-ci-s",Math.round(this.#K.s)),J("fig-fill-picker-ci-v",Math.round(this.#K.v));break;case"lab":{let Y=this.#D0($);J("fig-fill-picker-ci-okl",Math.round(Y.l*100)),J("fig-fill-picker-ci-oka",+Y.a.toFixed(3)),J("fig-fill-picker-ci-okb",+Y.b.toFixed(3));break}case"lch":{let Y=this.#T0($);J("fig-fill-picker-ci-okl",Math.round(Y.l*100)),J("fig-fill-picker-ci-okc",+Y.c.toFixed(3)),J("fig-fill-picker-ci-okh",Math.round(Y.h));break}case"css":J("fig-fill-picker-ci-css",this.#G0(this.#K));break;default:J("fig-fill-picker-ci-hex",Z.replace(/^#/,"").toUpperCase());break}if(this.#_!=="css"){let Y=Math.round(this.#K.a*1000)/10;J("fig-fill-picker-ci-a",Number.isInteger(Y)?Y:+Y.toFixed(1))}if(this.#C)this.#C.setAttribute("color",Z);this.#D()}#Z0(){{let U=this.#$.querySelector('[data-tab="gradient"]'),j=document.createElement("fig-gradient-editor");j.value=m(this.#J),j.setAttribute("color-space",this.#H),j.toggleAttribute("disabled",this.#R()),j.pickerAnchor=this.#$;let z=(_)=>{if(_.stopPropagation(),!_.detail?.gradient)return;if(this.#J=u(_.detail.gradient),this.#D(),_.type==="change")this.#n();else this.#k()};j.addEventListener("input",z),j.addEventListener("change",z),U.replaceChildren(j);return}let Z=this.#$.querySelector('[data-tab="gradient"]'),$=L("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#J.type,variant:"ghost"},L("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,j])=>L("fig-select-option",{value:U},j)))),X=(U,j,z)=>L("fig-tooltip",{text:U},L("fig-button",{icon:!0,variant:"ghost",className:j,"aria-label":U},I(z))),J=L("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[X("Flip gradient","fig-fill-picker-gradient-flip","swap"),X("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),Y=L("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[$,J]),Q=L("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:m(this.#J)})}),W=L("fig-preview",{className:"fig-fill-picker-gradient-preview"},Q),K=L("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},I("add")),q=L("div",{className:"fig-fill-picker-gradient-stops"},[L("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[L("h3",{},"Stops"),K]),L("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);Z.replaceChildren(Y,W,q),this.#YZ(),this.#$0(Z)}#f0(){let Z=({value:J,title:Y,subtitle:Q,advanced:W=!1})=>L("fig-select-option",{value:J,label:`${Y} — ${Q}`,className:W?"fig-fill-picker-gradient-interpolation-advanced":null},[L("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),L("span",{className:"fig-fill-picker-gradient-interpolation-label"},[L("span",{className:"fig-fill-picker-gradient-interpolation-title"},Y),L("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Q)])]),$=L("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),X=f.#Z;return[...X.filter((J)=>!J.advanced).map(Z),$,...X.filter((J)=>J.advanced).map(Z)]}#$0(Z){let $=(H)=>typeof H.detail==="string"?H.detail:H.target?.value,X=Z.querySelector(".fig-fill-picker-gradient-bar-input"),J=(H)=>{if(!X)return;this.#P=!0;try{X.value={type:"gradient",gradient:m(H)}}finally{this.#P=!1}},Y=()=>{J(this.#J)};Z.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(H)=>{let k=$(H);if(!k)return;this.#J.type=k,this.#YZ(),this.#k()});let W=Z.querySelector(".fig-fill-picker-gradient-space"),K=W?.querySelector("fig-select-options"),q="fig-fill-picker-gradient-interpolation-collapsed",U=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),j=()=>Boolean(K?.classList.contains(q)),z=(H)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",H?"Show all color interpolation options":"Scroll down")},_=()=>{if(!K)return;K.classList.remove(q),K.style.removeProperty("max-height"),z(!1),K.syncOverflow?.()},M=()=>{if(!K||!U)return;K.style.removeProperty("max-height"),K.classList.add(q),K.scrollTop=0;let H=K.getBoundingClientRect().top,k=U.getBoundingClientRect().top,T=K.querySelector(".fig-overflow-end")?.offsetHeight||0,R=k-H;if(R>0)K.style.maxHeight=`${Math.round(R+T)}px`;z(!0),K.syncOverflow?.()},O=(H)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${H}"]`)),B=()=>{if(O(LZ(this.#J)))_();else M()};if(K?.addEventListener("click",(H)=>{if(!j())return;if(!H.target?.closest?.(".fig-overflow-end"))return;H.preventDefault(),H.stopPropagation(),_()},!0),K?.addEventListener("focusin",(H)=>{if(!j())return;if(H.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))_()}),K?.addEventListener("scroll",()=>{if(j()&&K.scrollTop!==0)K.scrollTop=0}),W?.querySelectorAll("fig-select-option").forEach((H)=>{let k=()=>{let T=E(H.getAttribute("value")||"srgb");J(P({...this.#J,...T}))};H.addEventListener("pointerenter",k),H.addEventListener("pointerleave",()=>{if(document.activeElement!==H)Y()}),H.addEventListener("focus",k),H.addEventListener("blur",()=>{if(!H.matches(":hover"))Y()})}),this.#m?.disconnect(),W)this.#m=new MutationObserver(()=>{if(!W.hasAttribute("open"))Y();else this.#g(B)}),this.#m.observe(W,{attributes:!0,attributeFilter:["open"]});let N=Z.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(N?.addEventListener("change",(H)=>{let k=typeof H.detail==="string"?H.detail:H.target?.value;if(!k)return;let T=E(k);this.#J=P({...this.#J,...T}),this.#YZ(),this.#k()}),N?.querySelectorAll("fig-segment").forEach((H)=>{let k=()=>{J(P({...this.#J,...E(H.getAttribute("value")||"srgb")}))};H.addEventListener("pointerenter",k),H.addEventListener("pointerleave",Y)}),W?.addEventListener("change",(H)=>{let k=$(H);if(!k)return;let T=E(k);this.#J=P({...this.#J,...T}),this.#YZ(),this.#k()}),Z.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#J.angle=(Number(this.#J.angle)+90)%360,this.#YZ(),this.#k()}),Z.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#J.stops.forEach((H)=>{H.position=100-H.position}),this.#J.stops.sort((H,k)=>H.position-k.position),this.#YZ(),this.#k()}),Z.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#J.stops.push({position:50,color:"#888888",opacity:100}),this.#J.stops.sort((k,T)=>k.position-T.position),this.#YZ(),this.#k()}),X){let H=(k)=>{if(k.stopPropagation(),this.#P)return;let T=k.detail;if(!T?.gradient)return;this.#J=u({...this.#J,...T.gradient}),this.#D(),this.#PZ(),this.#iZ()};X.addEventListener("input",(k)=>{H(k),this.#k()}),X.addEventListener("change",(k)=>{H(k),this.#n()})}Z.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(H)=>{this.#Q0(H)})}#pZ(Z){let $=String(Z.color||"#888888").replace(/^#/,"").slice(0,6),X=Z.opacity??100;if(X>=100)return`#${$}`;let J=Math.round(X/100*255).toString(16).padStart(2,"0");return`#${$}${J}`}#X0(Z){if(!(Z instanceof HTMLElement))return"#888888";if(Z.hexOpaque)return this.#cZ(Z.hexOpaque);let $=Z.value;if(typeof $==="string"&&$.startsWith("#"))return this.#cZ($.length>7?$.slice(0,7):$);let X=Z.querySelector('fig-input-text:not([type="number"])'),J=String(X?.value??X?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(J))return`#${J.toUpperCase()}`;let Y=Z.getAttribute("value");if(typeof Y==="string"&&Y.startsWith("#"))return this.#cZ(Y.length>7?Y.slice(0,7):Y);return"#888888"}#cZ(Z){let $=String(Z||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test($))return"#888888";return`#${$.toUpperCase()}`}#J0(Z){let $=Z.querySelector(".fig-fill-picker-stop-position"),X=Z.querySelector(".fig-fill-picker-stop-color"),J=parseFloat($?.value??$?.getAttribute("value")??"0")||0,Y=this.#X0(X),Q=100;if(X instanceof HTMLElement&&X.rgba?.a!==void 0)Q=Math.round(X.rgba.a*100);else{let W=parseInt(Z.dataset.index,10);if(!isNaN(W)&&this.#J.stops[W])Q=this.#J.stops[W].opacity??100}return{position:J,color:Y,opacity:Q}}#sZ(Z){let $=parseInt(Z.dataset.index,10);if(isNaN($)||$<0||$>=this.#J.stops.length)return;let X={...this.#J.stops[$],...this.#J0(Z)};this.#J.stops[$]=X,this.#Y0(Z,X)}#Y0(Z,$){let X=Z.querySelector(".fig-fill-picker-stop-position");if(X)X.setAttribute("value",String($.position));let J=Z.querySelector(".fig-fill-picker-stop-color");if(J)J.setAttribute("value",this.#pZ($))}#Q0(Z){let{oldIndex:$,newIndex:X}=Z.detail??{};if($==null||X==null||$===X||$<0||X<0||$>=this.#J.stops.length||X>=this.#J.stops.length)return;let Y=Z.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Y.forEach((W)=>this.#sZ(W));let[Q]=this.#J.stops.splice($,1);this.#J.stops.splice(X,0,Q),Y.forEach((W,K)=>{W.dataset.index=String(K)}),this.#P=!0;try{this.#PZ(),this.#fZ(),this.#k()}finally{this.#P=!1}}#YZ(){if(!this.#$)return;let Z=this.#$.querySelector('[data-tab="gradient"]');if(!Z)return;this.#J=u(this.#J);let $=Z.querySelector("fig-gradient-editor");if($){$.value=this.#J,$.setAttribute("color-space",this.#H),$.toggleAttribute("disabled",this.#R()),$.pickerAnchor=this.#$;return}let X=LZ(this.#J),J=Z.querySelector(".fig-fill-picker-gradient-space");if(J)J.value=X;let Y=Z.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(Y){let Q=f.#X(X),W=Y.querySelector(`fig-segment[value="${X}"]`)||Y.querySelector(`fig-segment[data-space="${Q.space}"]`);if(W){let K=`${Q.title} — ${Q.subtitle}`;W.setAttribute("value",X),W.setAttribute("aria-label",K);let q=W.closest("fig-tooltip");if(q)q.setAttribute("text",K);Y.value=X}}this.#PZ(),this.#fZ(),this.#iZ()}#W0(){let Z=Array.isArray(this.#J.stops)?[...this.#J.stops].sort(($,X)=>($.position??0)-(X.position??0)):[];if(Z.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return Z.map(($)=>({color:String($.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:$.position??0}))}#PZ(){if(!this.#$)return;let Z=this.#W0();this.#$.querySelectorAll("fig-interpolation-swatch").forEach(($)=>{let X=$.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",J=E(X),Y={type:"linear",stops:Z,interpolationSpace:J.interpolationSpace};if(b.has(J.interpolationSpace))Y.hueInterpolation=J.hueInterpolation;$.value={type:"gradient",gradient:Y}})}#fZ(){if(!this.#$)return;let Z=this.#$.querySelector('[data-tab="gradient"] > fig-gradient-editor');if(Z){Z.value=this.#J,Z.setAttribute("color-space",this.#H),this.#D();return}let $=this.#$.querySelector(".fig-fill-picker-gradient-bar-input");if($)this.#P=!0,$.value={type:"gradient",gradient:m(this.#J)},this.#P=!1;this.#D()}#iZ(){if(!this.#$)return;let Z=this.#$.querySelector(".fig-fill-picker-gradient-stops-list"),$=Z?.querySelector("fig-reorder");if(!Z||!$)return;let X=$.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(X.length===this.#J.stops.length){this.#J.stops.forEach((J,Y)=>{let Q=X[Y];Q.dataset.index=Y;let W=Q.querySelector(".fig-fill-picker-stop-position");if(W)W.setAttribute("value",J.position);let K=Q.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#pZ(J));let q=Q.querySelector(".fig-fill-picker-stop-remove");if(q)if(this.#J.stops.length<=2)q.setAttribute("disabled","");else q.removeAttribute("disabled")});return}this.#K0(Z)}#K0(Z){let $=Z.querySelector("fig-reorder");if(!$)return;let X=this.#J.stops.map((J,Y)=>L("fig-property",{className:"fig-fill-picker-gradient-stop-row","data-index":Y,leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},L("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[L("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:J.position,units:"%"}),L("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.#pZ(J)})])));$.replaceChildren(...X),$.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((J)=>{J.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#sZ(J),this.#PZ(),this.#fZ(),this.#k()});let Y=J.querySelector(".fig-fill-picker-stop-color"),Q=Y.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#$;else this.#g(()=>{let q=Y.querySelector("fig-fill-picker");if(q)q.anchorElement=this.#$});let W=()=>{this.#sZ(J),this.#P=!0;try{this.#PZ(),this.#fZ(),this.#k()}finally{this.#P=!1}};Y.addEventListener("input",W),Y.addEventListener("change",W);let K=J.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.#J.stops.length<=2),J.addEventListener("remove",(q)=>{q.stopPropagation();let U=parseInt(J.dataset.index,10);if(this.#J.stops.length>2)this.#J.stops.splice(U,1),this.#YZ(),this.#k()})})}#A0(Z,$=!0){let X=P({...this.#J,interpolationSpace:Z??this.#J.interpolationSpace}),J=this.#H==="display-p3",Y=X.stops.map((K)=>{let q=(K.opacity??100)/100;return`${J?this.#B0(K.color,q):this.#O0(K.color,q)} ${K.position}%`}).join(", "),Q=X0(X),W=$&&Q?` ${Q}`:"";switch(X.type){case"linear":return`linear-gradient(${X.angle}deg${W}, ${Y})`;case"radial":return`radial-gradient(circle at ${X.centerX}% ${X.centerY}%${W}, ${Y})`;case"angular":return`conic-gradient(from ${X.angle}deg${W}, ${Y})`;default:return`linear-gradient(${X.angle}deg${W}, ${Y})`}}static#aZ=new Map;#R0(Z){let $=f.#aZ.get(Z);if($!==void 0)return $;let X=document.createElement("div");X.style.background=Z;let J=!!X.style.background;return f.#aZ.set(Z,J),J}#rZ(){return d(this.#J,{colorSpace:this.#H})}#q0(){let Z=this.#$.querySelector('[data-tab="image"]'),$=L("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#j.scaleMode},L("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Q,W])=>L("fig-select-option",{value:Q},W)))),X=L("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#j.scale,units:"%"});if(this.#j.scaleMode!=="tile")X.style.display="none";let J=L("fig-field",{className:"fig-fill-picker-media-header"},[$,X]),Y=L("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"});Z.replaceChildren(J,Y),this.#U0(Z)}#U0(Z){let $=Z.querySelector(".fig-fill-picker-scale-mode"),X=Z.querySelector(".fig-fill-picker-scale"),J=Z.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(Y)=>{let Q=typeof Y.detail==="string"?Y.detail:Y.target?.value;if(!Q)return;this.#j.scaleMode=Q,X.style.display=Q==="tile"?"block":"none",this.#_Z(J),this.#D(),this.#k()}),X.addEventListener("input",(Y)=>{this.#j.scale=parseFloat(Y.target.value)||100,this.#_Z(J),this.#D(),this.#k()}),J.addEventListener("loaded",(Y)=>{let Q=Y.detail?.src||J.src;if(!Q)return;let W=Q!==this.#j.url;if(this.#j.url=Q,this.#_Z(J),this.#D(),W)this.#k();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:Y.detail??{src:Q}}))}),J.addEventListener("change",()=>{if(J.src)return;this.#j.url=null,this.#_Z(J),this.#D(),this.#k()}),this.#_Z(J)}#_Z(Z){if(!this.#j.url){Z.removeAttribute("src"),Z.classList.remove("has-media","is-tiled"),Z.style.backgroundImage="",Z.style.backgroundPosition="",Z.style.backgroundRepeat="",Z.style.backgroundSize="";return}Z.setAttribute("src",this.#j.url),Z.classList.add("has-media"),Z.style.backgroundImage="",Z.style.backgroundPosition="",Z.style.backgroundRepeat="",Z.style.backgroundSize="",Z.mediaEl?.style.removeProperty("opacity");let $=Z.querySelector("fig-input-file[data-generated]");if($)$.setAttribute("label","Replace"),$.removeAttribute("url");switch(this.#j.scaleMode){case"fill":Z.classList.remove("is-tiled"),Z.setAttribute("fit","cover");break;case"crop":Z.classList.remove("is-tiled"),Z.setAttribute("fit","cover");break;case"fit":Z.classList.remove("is-tiled"),Z.setAttribute("fit","contain");break;case"tile":if(Z.classList.add("is-tiled"),Z.setAttribute("fit","none"),Z.style.backgroundImage=`url(${this.#j.url})`,Z.style.backgroundPosition="top left",Z.style.backgroundSize=`${this.#j.scale}%`,Z.style.backgroundRepeat="repeat",Z.mediaEl)Z.mediaEl.style.opacity="0";break}}#GZ(Z){if(Z.tagName==="FIG-MEDIA"){if(!this.#Y.url){Z.removeAttribute("src"),Z.classList.remove("has-media");return}if(Z.setAttribute("src",this.#Y.url),this.#Y.poster)Z.setAttribute("poster",this.#Y.poster);else Z.removeAttribute("poster");Z.classList.add("has-media");let $=Z.querySelector("fig-input-file[data-generated]");if($)$.setAttribute("label","Replace"),$.removeAttribute("url");switch(this.#Y.scaleMode){case"fill":case"crop":Z.setAttribute("fit","cover");break;case"fit":Z.setAttribute("fit","contain");break}return}switch(Z.style.objectPosition="center",Z.style.width="100%",Z.style.height="100%",this.#Y.scaleMode){case"fill":case"crop":Z.style.objectFit="cover";break;case"fit":Z.style.objectFit="contain";break}}#z0(){let Z=this.#$.querySelector('[data-tab="video"]'),$=L("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#Y.scaleMode},L("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([Y,Q])=>L("fig-select-option",{value:Y},Q)))),X=L("fig-field",{className:"fig-fill-picker-media-header"},$),J=L("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"});Z.replaceChildren(X,J),this.#L0(Z),this.#yZ({emit:!1})}#NZ(){if(this.#Y.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#Y.poster),this.#b.delete(this.#Y.poster);this.#Y.poster=null,this.#v=null}#SZ(){if(!this.#Y.poster)return;if(this.#v&&this.#v===this.#Y.url)return;this.#NZ()}#dZ(){let Z=this.#$?.querySelector(".fig-fill-picker-video-preview");if(Z)this.#GZ(Z)}#yZ({emit:Z=!1}={}){if(this.#Y.url){if(this.#Y.missing=!1,this.#SZ(),!this.#Y.poster)this.#EZ(this.#Y.url);else this.#dZ();return}let $=this.getAttribute("default-video");if(!$){this.#Y.missing=!0;return}if(this.#Y.url=$,this.#Y.missing=!1,this.#dZ(),this.#EZ($),Z)this.#k()}#oZ(){if(this.#z!=="video")return;let Z=this.#Y.url;if(!Z)return;if(this.#SZ(),this.#Y.poster)return;this.#EZ(Z)}async#_0(Z){if(typeof Z.requestVideoFrameCallback==="function")await Promise.race([new Promise(($)=>Z.requestVideoFrameCallback(()=>$())),new Promise(($)=>setTimeout($,80))]);else try{await Z.play(),Z.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(Z)}catch{}return null}async#j0(Z){let $=await this.#_0(Z),X=$?.width||Z.videoWidth,J=$?.height||Z.videoHeight;if(!X||!J)return $?.close?.(),null;let Y=typeof OffscreenCanvas==="function"?new OffscreenCanvas(X,J):Object.assign(document.createElement("canvas"),{width:X,height:J}),Q=Y.getContext("2d");if(!Q)return $?.close?.(),null;try{Q.drawImage($||Z,0,0,X,J)}finally{$?.close?.()}return Y.convertToBlob?Y.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((W)=>Y.toBlob(W,"image/jpeg",0.85))}async#EZ(Z,{emit:$=!1}={}){if(!Z||this.#i===Z)return;this.#i=Z;let X=document.createElement("video");X.muted=!0,X.playsInline=!0,X.preload="auto",X.crossOrigin="anonymous";try{if(await new Promise((Y,Q)=>{let W=()=>Q(Error("video poster failed"));X.addEventListener("error",W,{once:!0}),X.addEventListener("loadeddata",Y,{once:!0}),X.src=Z}),!X.videoWidth||!X.videoHeight)return;let J=await this.#j0(X);if(!J||this.#Y.url!==Z)return;if(this.#NZ(),this.#Y.poster=URL.createObjectURL(J),this.#v=Z,this.#b.add(this.#Y.poster),this.#D(),this.#dZ(),$)this.#k()}catch{}finally{if(X.removeAttribute("src"),X.load(),this.#i===Z)this.#i=null}}#L0(Z){let $=Z.querySelector(".fig-fill-picker-scale-mode"),X=Z.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(J)=>{let Y=typeof J.detail==="string"?J.detail:J.target?.value;if(!Y)return;this.#Y.scaleMode=Y,this.#GZ(X),this.#D(),this.#k()}),X.addEventListener("loaded",(J)=>{let Y=J.detail?.src||X.src;if(!Y)return;let Q=Y!==this.#Y.url;if(Q)this.#NZ();if(this.#Y.url=Y,this.#Y.missing=!1,this.#GZ(X),this.#EZ(Y),this.#D(),Q)this.#k();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:J.detail??{src:Y}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#Y.url=null,this.#NZ(),this.#yZ(),this.#GZ(X),this.#D(),this.#k()}),this.#GZ(X)}#H0(){let Z=this.#$.querySelector('[data-tab="webcam"]'),$=L("fig-field",{className:"fig-fill-picker-webcam-camera"},L("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));$.style.display="none";let X=L("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});X.muted=!0;let J=L("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},L("span",{},"Camera access required")),Y=L("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,J]),Q=L("div",{className:"fig-fill-picker-webcam-controls"},L("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));Z.replaceChildren($,Y,Q),this.#M0(Z)}#M0(Z){let $=Z.querySelector(".fig-fill-picker-webcam-video"),X=Z.querySelector(".fig-fill-picker-webcam-status"),J=Z.querySelector(".fig-fill-picker-webcam-capture"),Y=Z.querySelector(".fig-fill-picker-webcam-camera"),Q=Z.querySelector(".fig-fill-picker-camera-select"),W=(z)=>{if(z)J.removeAttribute("disabled");else J.setAttribute("disabled","")},K=()=>{let z=!!this.#W.stream&&$.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&$.videoWidth>0&&$.videoHeight>0;if(W(z),z)X.querySelector("span").textContent="Camera ready",X.style.display="none",this.#IZ($)};$.addEventListener("loadedmetadata",K),$.addEventListener("canplay",K),$.addEventListener("playing",K);let q=(z)=>{this.#W.stream=z,$.srcObject=z,$.muted=!0,$.playsInline=!0,$.style.display="block";let _=$.play?.();if(_?.catch)_.catch(()=>{});K()},U=async(z,_)=>{let M=await navigator.mediaDevices.enumerateDevices();if(z!=null&&z!==this.#h)return;let O=M.filter((B)=>B.kind==="videoinput");if(O.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(),O.forEach((N,V)=>{let H=document.createElement("fig-select-option");H.value=N.deviceId;let k=N.label||(O.length>1?`Camera ${V+1}`:"Camera");H.textContent=k.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(H)}),_)Q.value=_}else Y.style.display="none",Q.querySelector(":scope > fig-select-options")?.replaceChildren()},j=async(z=null)=>{let _=z||this.#W.deviceId||null,M=this.#W.stream,O=M?.getTracks?.().filter((N)=>N.readyState!=="ended")??[];if(M&&O.length){let N=M.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#W.deviceId||null;if(!_||_===N){q(M),this.#s(),U(null,_||N);return}}this.#zZ({emit:Boolean(M)});let B=this.#h;W(!1),X.querySelector("span").textContent="Starting camera",X.style.display="flex";try{let N={video:_?{deviceId:{exact:_}}:!0},V=await navigator.mediaDevices.getUserMedia(N);if(B!==this.#h||!this.isConnected||this.#Q!=="webcam"){V.getTracks().forEach((k)=>k.stop());return}let H=V.getVideoTracks?.()?.[0];this.#W.deviceId=_||H?.getSettings?.()?.deviceId||null,this.#W.live=this.#t()==="live",q(V),this.#s(),await U(B,_)}catch(N){if(B!==this.#h)return;console.error("Webcam error:",N.name,N.message);let V="Camera access denied";if(N.name==="NotAllowedError")V="Camera permission denied";else if(N.name==="NotFoundError")V="No camera found";else if(N.name==="NotReadableError")V="Camera in use by another app";else if(N.name==="OverconstrainedError")V="Camera constraints not supported";else if(!window.isSecureContext)V="Camera requires secure context";X.replaceChildren();let H=document.createElement("span");H.textContent=V,X.appendChild(H),X.style.display="flex",$.style.display="none",W(!1)}};this.#x=j,Q.addEventListener("change",(z)=>{let _=typeof z.detail==="string"?z.detail:z.target?.value;if(!_||_===this.#W.deviceId)return;j(_)}),J.addEventListener("click",async()=>{if(!this.#W.stream)return;let z=await this.#LZ($);if(!z)return;this.#j.url=z,this.#W.live=!1;let _=this.#$.querySelector(".fig-fill-picker-image-preview");if(_)this.#_Z(_);if(Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).some((O)=>O.dataset.tab==="image"))this.#OZ("image");else this.#D(),this.#k();this.#n()})}#lZ(Z){return mZ(Z.h,Z.s,Z.v)}#BZ(Z){return{...cZ(Z.r,Z.g,Z.b),a:1}}#WZ(Z){if(!Z||typeof Z.h!=="number"||typeof Z.s!=="number"||typeof Z.v!=="number")return"#D9D9D9";let $=this.#lZ(Z),X=(J)=>{return(isNaN(J)?217:Math.max(0,Math.min(255,Math.round(J)))).toString(16).padStart(2,"0")};return`#${X($.r)}${X($.g)}${X($.b)}`}#FZ(Z){let $=parseInt(Z.slice(1,3),16),X=parseInt(Z.slice(3,5),16),J=parseInt(Z.slice(5,7),16);return this.#BZ({r:$,g:X,b:J})}#O0(Z,$=1){let X=parseInt(Z.slice(1,3),16),J=parseInt(Z.slice(3,5),16),Y=parseInt(Z.slice(5,7),16);return`rgba(${X}, ${J}, ${Y}, ${$})`}#k0(Z){let $=Math.max(0,Math.min(1,Number(Z)||0)),X=Math.round($*1000)/1000;return String(X)}#G0(Z=this.#K){let $=this.#lZ(Z);return`rgba(${$.r}, ${$.g}, ${$.b}, ${this.#k0(Z.a)})`}#N0(Z){let $=String(Z??"").trim();if(!$)return null;let X=$.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(X){let Y=X[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.#FZ(`#${Y}`),a:Q}}let J=$.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(J){let Y=Math.max(0,Math.min(255,Math.round(parseFloat(J[1])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(J[2])))),W=Math.max(0,Math.min(255,Math.round(parseFloat(J[3])))),K=J[4]!==void 0?Math.max(0,Math.min(1,parseFloat(J[4]))):1;if(![Y,Q,W,K].every(Number.isFinite))return null;return{...this.#BZ({r:Y,g:Q,b:W}),a:K}}return null}#B0(Z,$=1){let X=HZ(Z),J=UZ(X.r,X.g,X.b,{from:"srgb",to:"display-p3"}),Y=+(J.r/255).toFixed(4),Q=+(J.g/255).toFixed(4),W=+(J.b/255).toFixed(4);return`color(display-p3 ${Y} ${Q} ${W} / ${$})`}#F0(Z){return MZ(Z.r,Z.g,Z.b)}#V0(Z){return zZ(Z.h,Z.s,Z.l)}#D0(Z){return OZ(Z.r,Z.g,Z.b)}#T0(Z){return sZ(Z.r,Z.g,Z.b)}#C0(Z){return vZ(Z.l,Z.a,Z.b)}#P0(Z){return pZ(Z.l,Z.c,Z.h)}#k(){if(this.#R())return;this.#D(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#n(){if(this.#R())return;this.#y=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let Z={type:this.#z,colorSpace:this.#H};switch(this.#z){case"solid":return{...Z,color:this.#WZ(this.#K),alpha:this.#K.a,hsv:{...this.#K}};case"gradient":return{...Z,gradient:m(this.#J),css:this.#rZ()};case"image":return{...Z,image:{...this.#j}};case"video":return{...Z,video:this.#c()};case"webcam":return{...Z,webcam:this.#e()};default:return{...Z,...this.#A[this.#z]}}}set value(Z){if(typeof Z==="string")this.setAttribute("value",Z);else this.setAttribute("value",JSON.stringify(Z))}attributeChangedCallback(Z,$,X){if($===X)return;switch(Z){case"value":if(this.#AZ(),this.#D(),this.#oZ(),this.#$?.open&&!this.#V)this.#mZ(),this.#y=JSON.stringify(this.value);break;case"disabled":if(this.#$Z(),this.#R()&&this.#$?.open)this.close();break;case"alpha":case"mode":{if(!this.#$)break;let J=this.#$.open;if(this.#TZ(),J&&this.isConnected)this.#UZ();break}case"webcam-mode":if(this.#z==="webcam")this.#D();break;case"default-video":if(this.#z==="video")this.#yZ({emit:!1}),this.#D();break;case"aria-label":if(this.#$)this.#$.setAttribute("aria-label",this.#HZ());case"aria-labelledby":case"aria-describedby":this.#$Z();break}}}A("fig-fill-picker",f);class G extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#X=10;static#U=10;static#q=8;static#$=3;static#L=210;static#Q={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#z=!1;#H=null;#K=null;#_={...G.#Q};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#_}}}set value(Z){if(Z==null||Z===""){this.removeAttribute("value");return}if(typeof Z==="string"){this.setAttribute("value",Z);return}this.setAttribute("value",JSON.stringify(Z))}connectedCallback(){this.#J(),this.#j(),this.#V(),this.#P()}attributeChangedCallback(Z,$,X){if($===X)return;if(Z!=="value")return;if(this.#j(),this.#z)this.#P()}#J(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#j(){let Z=this.getAttribute("value");if(!Z){this.#_={...G.#Q,stops:G.#Q.stops.map(($)=>({...$}))};return}try{let $=JSON.parse(Z),X=$?.type==="gradient"&&$.gradient?$.gradient:$?.gradient?$.gradient:$;if(!X||typeof X!=="object")return;this.#_=this.#Y({...G.#Q,...X})}catch{}}#Y(Z){let $={...Z??{}},X=String($.interpolationSpace??"srgb").toLowerCase(),J=String($.hueInterpolation??"shorter").toLowerCase(),Y=Array.isArray($.stops)?$.stops.map((Q)=>({color:String(Q?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q?.position??0,opacity:Q?.opacity??100})):G.#Q.stops.map((Q)=>({...Q}));if(Y.length<2)return{...G.#Q,stops:G.#Q.stops.map((Q)=>({...Q}))};return{type:["linear","radial","angular"].includes($.type)?$.type:"linear",angle:Number.isFinite(Number($.angle))?Number($.angle):135,interpolationSpace:X,hueInterpolation:J,stops:Y}}#W(){return G.#Z.has(this.#_.interpolationSpace||"srgb")}#G(Z){let{r:$,g:X,b:J}=HZ(Z);if(this.#_.interpolationSpace==="hsl")return MZ($,X,J).h;let Y=OZ($,X,J);return(uZ(Y.l,Y.a,Y.b).h%360+360)%360}#T(){let Z=this.#F(),$=this.#G(Z[0]?.color||"#FF0000"),X=this.#G(Z[Z.length-1]?.color||"#4F9EFF"),J=G.#L-$,Q=((G.#L-X-J)%360+360)%360,W=Q===0?0:Q-360,K=this.#_.hueInterpolation||"shorter",q;if(K==="increasing")q=W;else if(K==="decreasing")q=Q;else if(K==="longer")q=Q<180?W:Q;else q=Q<=180?Q:W;let U=Math.sign(q),j=Math.asin(G.#$/2/G.#q)*180/Math.PI,z=Math.min(j,Math.max(0,(Math.abs(q)-0.01)/2));return{startDeg:J+U*z,sweepDeg:q-U*z*2}}#M(Z){let $=Z*Math.PI/180;return{x:G.#X+G.#q*Math.cos($),y:G.#U+G.#q*Math.sin($)}}#O(Z,$){let X=Z+$,J=this.#M(Z),Y=this.#M(X),Q=Math.abs($)>180?1:0,W=$>=0?1:0;return`M ${J.x} ${J.y} A ${G.#q} ${G.#q} 0 ${Q} ${W} ${Y.x} ${Y.y}`}#A(){let Z=this.#M(180),$=this.#M(0);return`M ${Z.x} ${Z.y} L ${$.x} ${$.y}`}#B(Z){let $=G.#$,X=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${Z}" fill="none" stroke="white" stroke-width="${$}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(X)}")`}#F(){return[...this.#_.stops].sort((Z,$)=>(Z.position??0)-($.position??0))}#f(){let Z=this.#_.interpolationSpace||"srgb";if(Z==="srgb")return"";if(G.#Z.has(Z))return` in ${Z} ${this.#_.hueInterpolation||"shorter"} hue`;return` in ${Z}`}#C(){let Z=this.#F(),$=this.#f();if(this.#W()){let J=(G.#L+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 ${J}deg in ${Y} decreasing hue, ${W})`}let X=Z.map((J)=>`${J.color} ${J.position??0}%`).join(", ");return`linear-gradient(90deg${$}, ${X})`}#V(){if(this.#z)return;let Z=G.#$,$=_Z("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},_Z("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":Z})),X=L("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren($,X),this.#H=$,this.#K=X,this.#z=!0}#P(){if(!this.#K)return;let Z=this.#W();if(this.#H)this.#H.style.display=Z?"":"none";let $=Z?(()=>{let{startDeg:J,sweepDeg:Y}=this.#T();return this.#O(J,Y)})():this.#A(),X=this.#B($);this.#K.style.setProperty("-webkit-mask-image",X),this.#K.style.maskImage=X,this.#K.style.background=this.#C()}}A("fig-interpolation-swatch",G);class C 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#U=new Set(["data-reorder-item","data-reorder-generated-role","data-reorder-handle","role","tabindex","aria-label","aria-roledescription"]);#q=null;#$=null;#L=!1;#Q=new Map;#z=null;#H=null;#K=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.#m(),this.#O(),this.#q=new MutationObserver(()=>this.#O()),this.#q.observe(this,{childList:!0}),this.#_()}disconnectedCallback(){this.#q?.disconnect(),this.#q=null,this.#$?.disconnect(),this.#$=null,this.#s(),this.#a(),this.#p(),this.#K?.remove(),this.#K=null}attributeChangedCallback(Z){if(this.isConnected){if(this.#J)this.#a();if(Z==="indicator")this.#R();this.#_(),this.#O()}}refresh(){if(this.isConnected)this.#O()}#_(){if(!this.#W){this.#$?.disconnect(),this.#$=null;return}if(this.#$)return;this.#$=new MutationObserver((Z)=>{if(!Z.some((X)=>X.target.parentElement===this&&!C.#U.has(X.attributeName)&&!(X.attributeName==="class"&&X.target===this.#z?.item))||this.#L)return;this.#L=!0,queueMicrotask(()=>{if(this.#L=!1,this.isConnected)this.#O()})}),this.#$.observe(this,{subtree:!0,attributes:!0})}get#J(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#j(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#Y(){return(this.getAttribute("handle")||"").trim()}get#W(){return(this.getAttribute("items")||"").trim()}get#G(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#T(){return[...this.children].filter((Z)=>Z.nodeType===Node.ELEMENT_NODE&&!Z.hasAttribute("data-reorder-live"))}#M(){let Z=this.#T(),$=this.#W;if(!$)return Z;try{return Z.filter((X)=>X.matches($))}catch{return[]}}#O(){let Z=this.#T(),$=this.#M(),X=new Set($);for(let[Y,Q]of this.#Q)if(!X.has(Y))Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),Q.target.removeEventListener("keydown",Q.onKeyDown),this.#E(Q),this.#Q.delete(Y);this.#f(Z),this.#A(Z),this.#F(Z.filter((Y)=>!X.has(Y)));let J=!this.#J&&$.length>=2;if(this.#B($,J),!J){this.#s();return}for(let Y of $){let Q=this.#V(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.#P(Y,Q)}this.#C($)}#A(Z){for(let $ of Z)if($.removeAttribute("data-reorder-item"),$.hasAttribute("data-reorder-generated-role"))$.removeAttribute("role"),$.removeAttribute("data-reorder-generated-role")}#B(Z,$=!0){for(let X of Z){if($)X.setAttribute("data-reorder-item","");if(!X.hasAttribute("role"))X.setAttribute("role","listitem"),X.setAttribute("data-reorder-generated-role","")}}#F(Z){for(let $ of Z)if(!$.hasAttribute("role"))$.setAttribute("role","none"),$.setAttribute("data-reorder-generated-role","")}#f(Z){for(let $ of Z)$.querySelectorAll("[data-reorder-handle]").forEach((X)=>{X.removeAttribute("data-reorder-handle"),X.removeAttribute("aria-roledescription")})}#C(Z){if(!this.#Y)return;for(let $ of Z){let X=$.querySelector(this.#Y);if(X)X.setAttribute("data-reorder-handle",""),X.setAttribute("aria-roledescription","reorder handle")}}#V(Z){if(this.#Y)return Z.querySelector(this.#Y);return Z}#P(Z,$){let X=(q)=>{if(this.#J||this.#M().length<2)return;if(q.button!==0)return;if(!this.#Y&&this.#y(q.target,Z))return;this.#I(q,Z,$)},J=$.getAttribute("tabindex"),Y=$.getAttribute("aria-label"),Q=$.getAttribute("role"),W=Z.getAttribute("aria-label")||Z.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if($.setAttribute("tabindex","0"),$.setAttribute("aria-label",`Move ${W}`),$!==Z&&!$.hasAttribute("role"))$.setAttribute("role","button");let K=(q)=>{if(this.#J)return;let U=this.#j==="horizontal",j=U?"ArrowLeft":"ArrowUp",z=U?"ArrowRight":"ArrowDown";if(q.key!==j&&q.key!==z&&q.key!=="Home"&&q.key!=="End")return;q.preventDefault(),q.stopPropagation();let _=this.#M(),M=_.indexOf(Z),O=M;if(q.key===j)O=Math.max(0,M-1);else if(q.key===z)O=Math.min(_.length-1,M+1);else if(q.key==="Home")O=0;else if(q.key==="End")O=_.length-1;if(O===M){this.#S(`${W}, position ${M+1} of ${_.length}`);return}this.#c(Z,O),this.#O(),this.#V(Z)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:M,newIndex:O,item:Z}})),this.#S(`${W}, position ${O+1} of ${_.length}`)};$.addEventListener("pointerdown",X,!0),$.addEventListener("keydown",K),this.#Q.set(Z,{target:$,onPointerDown:X,onKeyDown:K,originalTabIndex:J,originalAriaLabel:Y,originalRole:Q})}#E(Z){let{target:$,originalTabIndex:X,originalAriaLabel:J,originalRole:Y}=Z;if(X===null)$.removeAttribute("tabindex");else $.setAttribute("tabindex",X);if(J===null)$.removeAttribute("aria-label");else $.setAttribute("aria-label",J);if(Y===null)$.removeAttribute("role");else $.setAttribute("role",Y)}#m(){if(this.#K?.isConnected)return;let Z=document.createElement("span");Z.setAttribute("data-reorder-live",""),Z.setAttribute("role","status"),Z.setAttribute("aria-live","polite"),Z.setAttribute("aria-atomic","true"),Object.assign(Z.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#K=Z,document.body.appendChild(Z)}#S(Z){if(!this.#K)return;this.#K.textContent="",requestAnimationFrame(()=>{if(this.#K)this.#K.textContent=Z})}#y(Z,$){let X=Z;while(X&&X!==$){if(X instanceof Element){for(let J of C.#X)if(X.matches(J))return!0}X=X.parentElement}return!1}static#x="fig-reorder-dragging";static#h(Z){document.body.classList.toggle(C.#x,Z)}#I(Z,$,X){this.#a();let J={item:$,target:X,pointerId:Z.pointerId,oldIndex:this.#M().indexOf($),targetIndex:this.#M().indexOf($),startX:Z.clientX,startY:Z.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};J.onMove=(Y)=>{if(Y.pointerId!==J.pointerId)return;let Q=Y.clientX-J.startX,W=Y.clientY-J.startY;if(!J.active){if(Q*Q+W*W<C.#Z*C.#Z)return;J.active=!0,Z.preventDefault(),Z.stopPropagation(),$.classList.add("dragging"),C.#h(!0);try{X.setPointerCapture(J.pointerId)}catch{}}Y.preventDefault();let K=this.#j==="horizontal"?Y.clientX:Y.clientY,q=this.#w(K);J.targetIndex=q,this.#t(q,$)},J.onKeyDown=(Y)=>{if(Y.key!=="Escape"||!J.active)return;Y.preventDefault(),this.#ZZ(J,!0)},J.onUp=(Y)=>{if(Y.pointerId!==J.pointerId)return;this.#ZZ(J,Y.type==="pointercancel")},this.#z=J,window.addEventListener("pointermove",J.onMove),window.addEventListener("pointerup",J.onUp),window.addEventListener("pointercancel",J.onUp),window.addEventListener("keydown",J.onKeyDown)}#w(Z){let $=this.#M(),X=this.#j==="horizontal";for(let J=0;J<$.length;J++){let Y=$[J].getBoundingClientRect(),Q=X?Y.left+Y.width/2:Y.top+Y.height/2;if(Z<Q)return J}return $.length}#N(Z,$){let X=this.#M(),J=X.indexOf(Z);if(J===-1)return!1;let Y=Math.max(0,Math.min($,X.length));if($===J)return!1;if(Y>=X.length&&J===X.length-1)return!1;return!0}#b(Z){if(!Z.length)return null;let $=1/0,X=-1/0,J=1/0,Y=-1/0;for(let Q of Z){let W=Q.getBoundingClientRect();$=Math.min($,W.left),X=Math.max(X,W.right),J=Math.min(J,W.top),Y=Math.max(Y,W.bottom)}return{left:$,top:J,width:X-$,height:Y-J}}#i(){let Z=[":popover-open",":modal",":fullscreen"],$=this.parentElement;while($){if(Z.some((J)=>{try{return $.matches(J)}catch{return!1}}))return $;$=$.parentElement}return document.body}#v(){if(this.#H)return this.#H;let Z=document.createElement("div");return Z.className="fig-reorder-indicator",Z.setAttribute("data-axis",this.#j),Z.classList.toggle("fig-reorder-indicator-ring",this.#G==="ring"),this.#i().appendChild(Z),this.#H=Z,Z}#R(){this.#H?.classList.toggle("fig-reorder-indicator-ring",this.#G==="ring")}#t(Z,$){let X=this.#M();if(!this.#N($,Z)){this.#p();return}let J=this.#b(X);if(!J){this.#p();return}let Y=this.#v();if(Y.setAttribute("data-axis",this.#j),this.#j==="horizontal"){let W;if(Z<=0)W=X[0].getBoundingClientRect().left;else if(Z>=X.length)W=X[X.length-1].getBoundingClientRect().right;else W=X[Z].getBoundingClientRect().left;Y.style.left=`${W-1}px`,Y.style.top=`${J.top}px`,Y.style.width="2px",Y.style.height=`${J.height}px`;return}let Q;if(Z<=0)Q=X[0].getBoundingClientRect().top;else if(Z>=X.length)Q=X[X.length-1].getBoundingClientRect().bottom;else Q=X[Z].getBoundingClientRect().top;Y.style.left=`${J.left}px`,Y.style.top=`${Q-1}px`,Y.style.width=`${J.width}px`,Y.style.height="2px"}#p(){this.#H?.remove(),this.#H=null}#e(Z,$){let X=this.#M(),J=Math.max(0,Math.min($,X.length));if(J>=X.length){let Q=X[X.length-1];if(Q&&Q!==Z)Q.after(Z);return}let Y=X[J];if(Y!==Z)this.insertBefore(Z,Y)}#c(Z,$){let X=this.#M().filter((Y)=>Y!==Z),J=X[$]??null;if(J)this.insertBefore(Z,J);else if(X.length)X[X.length-1].after(Z);else this.appendChild(Z)}#ZZ(Z,$){let{item:X,oldIndex:J,active:Y,onMove:Q,onUp:W,onKeyDown:K}=Z;if(window.removeEventListener("pointermove",Q),window.removeEventListener("pointerup",W),window.removeEventListener("pointercancel",W),window.removeEventListener("keydown",K),Y){if(!$){this.#e(X,Z.targetIndex);let q=this.#M().indexOf(X);if(q!==-1&&q!==J){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:J,newIndex:q,item:X}}));let U=X.getAttribute("aria-label")||X.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#S(`${U}, position ${q+1} of ${this.#M().length}`)}}}if(X.classList.remove("dragging"),C.#h(!1),this.#p(),this.#z===Z)this.#z=null}#s(){for(let[,Z]of this.#Q)Z.target.removeEventListener("pointerdown",Z.onPointerDown,!0),Z.target.removeEventListener("keydown",Z.onKeyDown),this.#E(Z);this.#Q.clear()}#a(){if(!this.#z)return;this.#ZZ(this.#z,!0)}}A("fig-reorder",C);
|