@rogieking/figui3 2.28.0 → 2.29.1

package/dist/fig.js

@@ -0,0 +1,367 @@
+function S(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function C(){let Q=1000;const $=document.querySelectorAll("*");for(let Z of $){const J=parseInt(getComputedStyle(Z).zIndex,10);if(!isNaN(J)&&J>Q)Q=J}return Q}class P extends HTMLElement{type;#Q;constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
+            <style>
+                button, button:hover, button:active {
+                    padding: 0 var(--spacer-2);
+                    appearance: none;
+                    display: flex;
+                    border: 0;
+                    flex: 1;
+                    text-align: center;
+                    align-items: stretch;
+                    justify-content: center;
+                    font: inherit;
+                    color: inherit;
+                    outline: 0;
+                    place-items: center; 
+                    background: transparent;
+                    margin: calc(var(--spacer-2)*-1);
+                    height: var(--spacer-4);
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 100%;
+                    min-width: 0;
+                }
+                :host([size="large"]) button {
+                    height: var(--spacer-5);
+                }
+                :host([size="large"][icon]) button {
+                    padding: 0;
+                }
+            </style>
+            <button type="${this.type}">
+                <slot></slot>
+            </button>
+            `,this.#Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#Z.bind(this)),this.button.addEventListener("focus",()=>{if(this.button.matches(":focus-visible"))this.setAttribute("data-focus-visible","")}),this.button.addEventListener("blur",()=>{this.removeAttribute("data-focus-visible")})})}get type(){return this.getAttribute("type")||"button"}set type(Q){this.setAttribute("type",Q)}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q)}#Z(){if(this.type==="toggle")this.toggleAttribute("selected",!this.hasAttribute("selected"));if(this.type==="submit"){let Q=this.closest("form");if(Q)Q.submit()}if(this.type==="link"){const Q=this.getAttribute("href"),$=this.getAttribute("target");if(Q)if($)window.open(Q,$);else window.location.href=Q}}static get observedAttributes(){return["disabled","selected"]}attributeChangedCallback(Q,$,Z){if(this.button)switch(this.button[Q]=Z,Q){case"disabled":this.disabled=this.button.disabled=Z!==null&&Z!=="false";break;case"type":this.type=Z,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#Q=Z==="true";break}}}customElements.define("fig-button",P);class y extends HTMLElement{#Q="Menu";#Z=null;#$;#X;#j=!1;#J=null;get label(){return this.#Q}set label(Q){this.#Q=Q}constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"}),this.#$=this.#q.bind(this),this.#X=this.#L.bind(this)}#_(){if(typeof CSS==="undefined"||typeof CSS.supports!=="function")return!1;try{return CSS.supports("appearance: base-select")&&CSS.supports("selector(::picker(select))")}catch{return!1}}#K(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#_()){this.#j=!1;return}const Z=document.createElement("button");Z.setAttribute("type","button"),Z.setAttribute("aria-hidden","true");const J=document.createElement("selectedcontent");Z.appendChild(J),this.select.appendChild(Z),this.#j=!0,this.#J=J}#Y(){if(!this.#J)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#J.textContent="";return}this.#J.innerHTML=Q.innerHTML}#G(){this.select.addEventListener("input",this.#$),this.select.addEventListener("change",this.#X)}#W(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#B(){if(typeof this.select.showPicker==="function")requestAnimationFrame(()=>{try{this.select.showPicker()}catch{}})}connectedCallback(){this.type=this.getAttribute("type")||"select",this.#Q=this.getAttribute("label")||this.#Q,this.select.setAttribute("aria-label",this.#Q),this.appendChild(this.select),this.shadowRoot.appendChild(this.optionsSlot),this.optionsSlot.addEventListener("slotchange",this.slotChange.bind(this)),this.#G()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.#K(),this.type==="dropdown"){const Q=document.createElement("option");Q.setAttribute("hidden","true"),Q.setAttribute("selected","true"),Q.selected=!0,this.select.appendChild(Q)}if(this.optionsSlot.assignedNodes().forEach((Q)=>{if(Q.nodeName==="OPTION"||Q.nodeName==="OPTGROUP")this.select.appendChild(Q.cloneNode(!0))}),this.#N(this.value),this.#Y(),this.type==="dropdown")this.select.selectedIndex=-1}#q(Q){const $=Q.target.selectedOptions?.[0];if(this.#W($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const Z=Q.target.value;if(this.type==="dropdown")this.#Z=Z;this.setAttribute("value",Z),this.#Y(),this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,composed:!0}))}#L(Q){const $=Q.target.selectedOptions?.[0];if(this.#W($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const Z=this.type==="dropdown"?this.#Z:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#Y(),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#Z;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#Z=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#N(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,Z)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=Z});this.#Y()}attributeChangedCallback(Q,$,Z){if(Q==="value")this.#N(Z);if(Q==="type")this.type=Z;if(Q==="experimental")this.slotChange();if(Q==="label")this.#Q=Z,this.select.setAttribute("aria-label",this.#Q)}}customElements.define("fig-dropdown",y);class k extends HTMLElement{static#Q=0;static#Z=500;#$;#X;#j;#J=!1;#_=null;#K=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#$=this.#O.bind(this),this.#X=this.hidePopupOutsideClick.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#$,!0),this.#W(),this.action==="click")document.body.removeEventListener("click",this.#X);if(clearTimeout(this.#j),this.action==="hover")this.removeEventListener("touchstart",this.#q),this.removeEventListener("touchmove",this.#L),this.removeEventListener("touchend",this.#N),this.removeEventListener("touchcancel",this.#U);else if(this.action==="click")this.removeEventListener("touchstart",this.showDelayedPopup)}setup(){this.style.display="contents"}render(){this.destroy();let Q=document.createElement("span");this.popup=document.createElement("span"),this.popup.setAttribute("class","fig-tooltip"),this.popup.setAttribute("role","tooltip");const $=S();if(this.popup.setAttribute("id",$),this.popup.style.position="fixed",this.popup.style.visibility="hidden",this.popup.style.display="inline-flex",this.popup.style.pointerEvents="none",this.popup.append(Q),Q.innerText=this.getAttribute("text"),this.firstElementChild)this.firstElementChild.setAttribute("aria-describedby",$);const Z=this.closest("dialog");if(Z&&Z.open)Z.append(this.popup);else document.body.append(this.popup);const J=Q.childNodes[0];if(J){const j=document.createRange();j.setStartBefore(J),j.setEndAfter(J);const _=j.getBoundingClientRect();Q.style.width=`${_.width}px`}}destroy(){if(this.#W(),this.popup)this.popup.remove();if(this.action==="click")document.body.removeEventListener("click",this.#X)}isTouchDevice(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}setupEventListeners(){if(this.action==="hover"){if(!this.isTouchDevice())this.addEventListener("pointerenter",this.showDelayedPopup.bind(this)),this.addEventListener("pointerleave",this.#B.bind(this));this.addEventListener("touchstart",this.#q.bind(this),{passive:!0}),this.addEventListener("touchmove",this.#L.bind(this),{passive:!0}),this.addEventListener("touchend",this.#N.bind(this),{passive:!0}),this.addEventListener("touchcancel",this.#U.bind(this),{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.showDelayedPopup.bind(this)),document.body.addEventListener("click",this.#X),this.addEventListener("touchstart",this.showDelayedPopup.bind(this),{passive:!0});document.addEventListener("mousedown",this.#$,!0)}getOffset(){const Q={left:8,top:4,right:8,bottom:4},$=this.getAttribute("offset");if(!$)return Q;const[Z,J,j,_]=$.split(",").map(Number);return{left:isNaN(Z)?Q.left:Z,top:isNaN(J)?Q.top:J,right:isNaN(j)?Q.right:j,bottom:isNaN(_)?Q.bottom:_}}showDelayedPopup(){this.render(),clearTimeout(this.timeout);const $=Date.now()-k.#Q<k.#Z?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){this.#Y(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.display="block",this.popup.style.pointerEvents="all",this.popup.style.zIndex=C()+1,this.isOpen=!0,k.#Q=Date.now(),this.#G()}#Y(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),Z=this.getOffset();let J=Q.top-$.height-Z.top,j=Q.left+(Q.width-$.width)/2;if(this.popup.setAttribute("position","top"),J<0)this.popup.setAttribute("position","bottom"),J=Q.bottom+Z.bottom;if(j<Z.left)j=Z.left;else if(j+$.width>window.innerWidth-Z.right)j=window.innerWidth-$.width-Z.right;const K=Q.left+Q.width/2-j;this.popup.style.setProperty("--beak-offset",`${K}px`),this.popup.style.top=`${J}px`,this.popup.style.left=`${j}px`}hidePopup(){if(clearTimeout(this.timeout),clearTimeout(this.#j),this.#W(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,k.#Q=Date.now()}#G(){this.#W();const Q=this.firstElementChild;if(!Q)return;this.#_=new MutationObserver(()=>{if(this.#K)cancelAnimationFrame(this.#K);this.#K=requestAnimationFrame(()=>{this.#Y()})}),this.#_.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#W(){if(this.#K)cancelAnimationFrame(this.#K),this.#K=null;if(this.#_)this.#_.disconnect(),this.#_=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#B(Q){if(!this.#J)this.hidePopup()}#q(Q){if(this.action==="hover")this.#J=!0,clearTimeout(this.#j),this.showDelayedPopup()}#L(Q){if(this.action==="hover"&&this.#J)clearTimeout(this.#j),this.#j=setTimeout(()=>{this.#J=!1,this.hidePopup()},150)}#N(Q){if(this.action==="hover"&&this.#J)clearTimeout(this.#j),this.#j=setTimeout(()=>{this.#J=!1,this.hidePopup()},300)}#U(Q){if(this.action==="hover"&&this.#J)this.#J=!1,clearTimeout(this.#j),this.hidePopup()}static get observedAttributes(){return["action","delay","open"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")==="true"}set open(Q){this.setAttribute("open",Q)}attributeChangedCallback(Q,$,Z){if(Q==="action")this.action=Z;if(Q==="delay"){let J=parseInt(Z);this.delay=!isNaN(J)?J:500}if(Q==="open")if(Z==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()})}#O(Q){if(!this.isOpen)return;const $=Q.target;if(this.popup&&this.popup.contains($))return;if($.tagName==="SELECT"||$.hasAttribute("popover")||$.closest("dialog"))this.hidePopup()}}customElements.define("fig-tooltip",k);class x extends HTMLDialogElement{#Q=!1;#Z=!1;#$={x:0,y:0};#X={x:0,y:0};#j;#J;#_;#K=16;#Y=!1;#G=3;constructor(){super();this.#j=this.#U.bind(this),this.#J=this.#O.bind(this),this.#_=this.#F.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#W(),this.#q(),this.#B()})}disconnectedCallback(){this.#L()}#W(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.close),Q.addEventListener("click",this.close.bind(this))})}#B(){const Q=this.getAttribute("position")||"";this.style.position="fixed",this.style.transform="none",this.style.top="auto",this.style.bottom="auto",this.style.left="auto",this.style.right="auto",this.style.margin="0";const $=Q.includes("top"),Z=Q.includes("bottom"),J=Q.includes("left"),j=Q.includes("right"),_=Q.includes("center")&&!$&&!Z,X=Q.includes("center")&&!J&&!j;if($)this.style.top=`${this.#K}px`;else if(Z)this.style.bottom=`${this.#K}px`;else if(_)this.style.top="0",this.style.bottom="0";if(J)this.style.left=`${this.#K}px`;else if(j)this.style.right=`${this.#K}px`;else if(X)this.style.left="0",this.style.right="0";if(_&&X)this.style.margin="auto";else if(_)this.style.marginTop="auto",this.style.marginBottom="auto";else if(X)this.style.marginLeft="auto",this.style.marginRight="auto";this.#Y=!0}#q(){if(this.drag){this.addEventListener("pointerdown",this.#j);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#L(){this.removeEventListener("pointerdown",this.#j),document.removeEventListener("pointermove",this.#J),document.removeEventListener("pointerup",this.#_)}#N(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],J=(_)=>$.some((X)=>_.matches?.(X))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if(J(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(J(j))return!0;j=j.parentElement}return!1}#U(Q){if(!this.drag)return;if(this.#N(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const J=this.querySelector($);if(!J||!J.contains(Q.target))return}this.#Z=!0,this.#$.x=Q.clientX,this.#$.y=Q.clientY;const Z=this.getBoundingClientRect();this.#X.x=Q.clientX-Z.left,this.#X.y=Q.clientY-Z.top,document.addEventListener("pointermove",this.#J),document.addEventListener("pointerup",this.#_)}#O(Q){if(this.#Z&&!this.#Q){const $=Math.abs(Q.clientX-this.#$.x),Z=Math.abs(Q.clientY-this.#$.y);if($>this.#G||Z>this.#G){this.#Q=!0,this.#Z=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const J=this.getBoundingClientRect();this.style.top=`${J.top}px`,this.style.left=`${J.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#Q)return;this.style.left=`${Q.clientX-this.#X.x}px`,this.style.top=`${Q.clientY-this.#X.y}px`,Q.preventDefault()}#F(Q){if(this.#Q)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#Q=!1,this.#Z=!1,document.removeEventListener("pointermove",this.#J),document.removeEventListener("pointerup",this.#_),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,Z){if(Q==="drag")if(this.drag=Z!==null&&Z!=="false",this.drag)this.#q();else{this.#L();const J=this.querySelector("fig-header, header");if(J)J.style.cursor=""}if(Q==="position"&&this.#Y)this.#B()}}customElements.define("fig-dialog",x,{extends:"dialog"});class I extends HTMLDialogElement{#Q=null;#Z=null;#$=null;#X=!1;#j;#J;#_;#K=null;#Y=null;#G=!1;#W=!1;#B={x:0,y:0};#q={x:0,y:0};#L=3;#N;#U;#O;#F=!1;constructor(){super();this.#j=this.#H.bind(this),this.#J=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.#C())this.#d()},this.#_=this.#z.bind(this),this.#N=this.#g.bind(this),this.#U=this.#V.bind(this),this.#O=this.#s.bind(this)}static get observedAttributes(){return["open","anchor","position","offset","variant","theme","drag","handle","autoresize","viewport-margin"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q===!1||Q==="false"||Q===null){if(!this.open)return;this.removeAttribute("open");return}if(this.open)return;this.setAttribute("open","true")}get anchor(){return this.#Y??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this.#Y=Q;else if(typeof Q==="string")this.#Y=null,this.setAttribute("anchor",Q);else this.#Y=null;if(this.open)this.#H()}connectedCallback(){if(!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("role"))this.setAttribute("role","dialog");if(!this.hasAttribute("closedby"))this.setAttribute("closedby","any");if(this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this.addEventListener("close",()=>{if(this.#k(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.#T()}),this.open)this.#D();else this.#E()}disconnectedCallback(){if(this.#k(),this.#P(),document.removeEventListener("pointerdown",this.#_,!0),this.#K!==null)cancelAnimationFrame(this.#K),this.#K=null}attributeChangedCallback(Q,$,Z){if($===Z)return;if(Q==="open"){if(Z===null||Z==="false"){this.#E();return}this.#D();return}if(Q==="drag"){if(this.drag=Z!==null&&Z!=="false",this.drag)this.#T();else this.#P();return}if(this.open)this.#H(),this.#A()}#D(){if(this.#X){this.#H();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(C()+1),!super.open)try{this.show()}catch($){}this.#A(),document.addEventListener("pointerdown",this.#_,!0),this.#F=!1,this.#H(),this.#X=!0;const Q=this.#w();if(Q)Q.classList.add("has-popup-open")}#E(){const Q=this.#w();if(Q)Q.classList.remove("has-popup-open");if(this.#X=!1,this.#F=!1,this.#k(),document.removeEventListener("pointerdown",this.#_,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}#A(){this.#k();const Q=this.#w();if(Q&&"ResizeObserver"in window)this.#Q=new ResizeObserver(this.#j),this.#Q.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this.#Z=new ResizeObserver(this.#j),this.#Z.observe(this);this.#$=new MutationObserver(this.#j),this.#$.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this.#j),window.addEventListener("scroll",this.#J,{capture:!0,passive:!0})}#k(){if(this.#Q)this.#Q.disconnect(),this.#Q=null;if(this.#Z)this.#Z.disconnect(),this.#Z=null;if(this.#$)this.#$.disconnect(),this.#$=null;window.removeEventListener("resize",this.#j),window.removeEventListener("scroll",this.#J,{capture:!0,passive:!0})}#z(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const Z=Q.target;if(!(Z instanceof Node))return;if(this.contains(Z))return;const J=this.#w();if(J&&J.contains(Z))return;if(this.#S(Z))return;this.open=!1}#S(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let Z=$;const J=new Set;while(Z&&!J.has(Z)){J.add(Z);const j=Z.anchor;if(!(j instanceof Element))break;if(this.contains(j))return!0;Z=j.closest?.('dialog[is="fig-popup"]')}return!1}#T(){if(this.drag)this.addEventListener("pointerdown",this.#N)}#P(){this.removeEventListener("pointerdown",this.#N),document.removeEventListener("pointermove",this.#U),document.removeEventListener("pointerup",this.#O)}#R(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-POPUP","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],J=(_)=>$.some((X)=>_.matches?.(X))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if(J(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(J(j))return!0;j=j.parentElement}return!1}#g(Q){if(!this.drag)return;if(this.#R(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const J=this.querySelector($);if(!J||!J.contains(Q.target))return}this.#W=!0,this.#B.x=Q.clientX,this.#B.y=Q.clientY;const Z=this.getBoundingClientRect();this.#q.x=Q.clientX-Z.left,this.#q.y=Q.clientY-Z.top,document.addEventListener("pointermove",this.#U),document.addEventListener("pointerup",this.#O)}#V(Q){if(this.#W&&!this.#G){const $=Math.abs(Q.clientX-this.#B.x),Z=Math.abs(Q.clientY-this.#B.y);if($>this.#L||Z>this.#L){this.#G=!0,this.#W=!1,this.#F=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const J=this.getBoundingClientRect();this.style.top=`${J.top}px`,this.style.left=`${J.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#G)return;this.style.left=`${Q.clientX-this.#q.x}px`,this.style.top=`${Q.clientY-this.#q.y}px`,Q.preventDefault()}#s(Q){if(this.#G)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#G=!1,this.#W=!1,document.removeEventListener("pointermove",this.#U),document.removeEventListener("pointerup",this.#O),Q.preventDefault()}#w(){if(this.#Y)return this.#Y;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const Z=$.querySelector(Q);if(Z&&!this.contains(Z))return Z}return document.querySelector(Q)}#x(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),Z=new Set(["top","center","bottom"]),J=new Set(["left","center","right"]);let j="top",_="center",X=null;if($.length>=2){if(Z.has($[0]))j=$[0];if(J.has($[1]))_=$[1];return{vertical:j,horizontal:_,shorthand:X}}if($.length===1){const K=$[0];if(K==="top"||K==="bottom")j=K,X=K;else if(K==="left"||K==="right")_=K,X=K;else if(K==="center")j="center",_="center"}return{vertical:j,horizontal:_,shorthand:X}}#I(Q,$="0px"){if(!Q)return $;const Z=Q.trim();if(!Z)return $;if(/^-?\d+(\.\d+)?$/.test(Z))return`${Z}px`;return Z}#c(Q,$="x"){if(!Q)return 0;const Z=this.#I(Q,"0px");if(Z.endsWith("px")){const _=parseFloat(Z);return Number.isFinite(_)?_:0}const J=document.createElement("div");if(J.style.position="fixed",J.style.visibility="hidden",J.style.pointerEvents="none",J.style.left="0",J.style.top="0",J.style.margin="0",J.style.padding="0",J.style.border="0",$==="x")J.style.width=Z,J.style.height="0";else J.style.height=Z,J.style.width="0";document.body.appendChild(J);const j=J.getBoundingClientRect();return J.remove(),$==="x"?j.width:j.height}#b(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),Z=this.#I($[0],"0px"),J=this.#I($[1],"0px");return{xToken:Z,yToken:J,xPx:this.#c(Z,"x"),yPx:this.#c(J,"y")}}#i(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((J)=>!Number.isNaN(J));if($.length===0)return{top:8,right:8,bottom:8,left:8};if($.length===1)return{top:$[0],right:$[0],bottom:$[0],left:$[0]};if($.length===2)return{top:$[0],right:$[1],bottom:$[0],left:$[1]};if($.length===3)return{top:$[0],right:$[1],bottom:$[2],left:$[1]};return{top:$[0],right:$[1],bottom:$[2],left:$[3]}}#r(Q,$,Z){const J={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(Z){const _=Z==="left"||Z==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:Z},{v:Q,h:$,s:J[Z]},{v:Q,h:$,s:_[0]},{v:Q,h:$,s:_[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:J[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:J[$],s:null},{v:"bottom",h:J[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:J[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:J[Q],h:"left",s:null},{v:J[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:J[Q],h:$,s:null},{v:Q,h:J[$],s:null},{v:J[Q],h:J[$],s:null}]}#f(Q,$,Z,J,j,_){let X,K;if(_==="left"||_==="right")return K=_==="left"?Q.left-$.width-j.xPx:Q.right+j.xPx,X=Q.top,{top:X,left:K};if(_==="top"||_==="bottom")return X=_==="top"?Q.top-$.height-j.yPx:Q.bottom+j.yPx,K=Q.left,{top:X,left:K};if(Z==="top")X=Q.top-$.height-j.yPx;else if(Z==="bottom")X=Q.bottom+j.yPx;else X=Q.top+(Q.height-$.height)/2;if(Z==="center")if(J==="left")K=Q.left-$.width-j.xPx;else if(J==="right")K=Q.right+j.xPx;else K=Q.left+(Q.width-$.width)/2;else if(J==="left")K=Q.left+j.xPx;else if(J==="right")K=Q.right-$.width-j.xPx;else K=Q.left+(Q.width-$.width)/2;return{top:X,left:K}}#u(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}#l(Q,$,Z){if(Z==="top")return"top";if(Z==="bottom")return"bottom";if(Z==="left")return"left";if(Z==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}#h(Q,$,Z,J,j){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const _=this.#u(j);this.setAttribute("data-beak-side",_);const X=Q.left+Q.width/2,K=Q.top+Q.height/2;let Y;if(_==="top"||_==="bottom"){Y=X-Z;const W=8,G=Math.max(W,$.width-8);Y=Math.min(G,Math.max(W,Y))}else{Y=K-J;const W=8,G=Math.max(W,$.height-8);Y=Math.min(G,Math.max(W,Y))}this.style.setProperty("--beak-offset",`${Y}px`)}#v(Q,$,Z){const{innerWidth:J,innerHeight:j}=window,_=Q.left+$.width,X=Q.top+$.height,K=Math.max(0,Z.left-Q.left),Y=Math.max(0,Z.top-Q.top),W=Math.max(0,_-(J-Z.right)),G=Math.max(0,X-(j-Z.bottom));return K+Y+W+G}#m(Q,$,Z){return this.#v(Q,$,Z)===0}#p(Q,$,Z){const{left:J,top:j}=Z,_=Math.max(Z.left,window.innerWidth-$.width-Z.right),X=Math.max(Z.top,window.innerHeight-$.height-Z.bottom);return{left:Math.min(_,Math.max(J,Q.left)),top:Math.min(X,Math.max(j,Q.top))}}#d(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.#b(),{vertical:Z,horizontal:J,shorthand:j}=this.#x(),_=this.#w(),X=this.#i();if(!_){this.#h(null,Q,0,0,"top");const U={left:X.left+(window.innerWidth-X.right-X.left-Q.width)/2,top:X.top+(window.innerHeight-X.bottom-X.top-Q.height)/2},B=this.#p(U,Q,X);this.style.left=`${B.left}px`,this.style.top=`${B.top}px`;return}const K=_.getBoundingClientRect(),Y=this.#r(Z,J,j);let W=null,G="top",L=Number.POSITIVE_INFINITY;for(let{v:U,h:B,s:M}of Y){const E=this.#f(K,Q,U,B,$,M),A=this.#l(U,B,M);if(M){const O=this.#p(E,Q,X);if(M==="left"||M==="right"?E.left>=X.left&&E.left+Q.width<=window.innerWidth-X.right:E.top>=X.top&&E.top+Q.height<=window.innerHeight-X.bottom){this.style.left=`${O.left}px`,this.style.top=`${O.top}px`,this.#h(K,Q,O.left,O.top,A);return}const F=this.#v(E,Q,X);if(F<L)L=F,W=O,G=A}else{if(this.#m(E,Q,X)){this.style.left=`${E.left}px`,this.style.top=`${E.top}px`,this.#h(K,Q,E.left,E.top,A);return}const O=this.#v(E,Q,X);if(O<L)L=O,W=E,G=A}}const q=this.#p(W||{left:0,top:0},Q,X);this.style.left=`${q.left}px`,this.style.top=`${q.top}px`,this.#h(K,Q,q.left,q.top,G)}#H(){if(!this.open||!this.#C())return;if(this.#K!==null)return;this.#K=requestAnimationFrame(()=>{this.#K=null,this.#d()})}#C(){if(!(this.drag&&this.#F))return!0;return!this.#w()}}customElements.define("fig-popup",I,{extends:"dialog"});class f extends HTMLElement{#Q;constructor(){super();this.content=null,this.#Q=!1}connectedCallback(){this.setAttribute("label",this.innerText),this.setAttribute("role","tab"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick.bind(this)),requestAnimationFrame(()=>{if(typeof this.getAttribute("content")==="string"){if(this.content=document.querySelector(this.getAttribute("content")),this.content)if(this.content.setAttribute("role","tabpanel"),this.#Q)this.content.style.display="block",this.setAttribute("aria-selected","true");else this.content.style.display="none",this.setAttribute("aria-selected","false")}})}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q?"true":"false")}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){if(this.selected=!0,this.content)this.content.style.display="block"}static get observedAttributes(){return["selected"]}attributeChangedCallback(Q,$,Z){if(Q==="selected"){if(this.#Q=Z!==null&&Z!=="false",this.setAttribute("aria-selected",this.#Q?"true":"false"),this?.content)this.content.style.display=this.#Q?"block":"none"}}}customElements.define("fig-tab",f);class V extends HTMLElement{constructor(){super()}static get observedAttributes(){return["value","name","disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"tabs",this.setAttribute("role","tablist"),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.#Z.bind(this));const Q=this.getAttribute("value");if(Q)this.#$(Q);if(this.hasAttribute("disabled"))this.#Q(!0)}#Q(Q){this.querySelectorAll("fig-tab").forEach((Z)=>{if(Q)Z.setAttribute("disabled",""),Z.setAttribute("aria-disabled","true"),Z.setAttribute("tabindex","-1");else Z.removeAttribute("disabled"),Z.removeAttribute("aria-disabled"),Z.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.#Z)}#Z(Q){const $=Array.from(this.querySelectorAll("fig-tab")),Z=$.findIndex((j)=>j.hasAttribute("selected"));let J=Z;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),J=Z>0?Z-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),J=Z<$.length-1?Z+1:0;break;case"Home":Q.preventDefault(),J=0;break;case"End":Q.preventDefault(),J=$.length-1;break;default:return}if(J!==Z&&$[J])$.forEach((j)=>j.removeAttribute("selected")),this.selectedTab=$[J],this.setAttribute("value",$[J].getAttribute("value")||""),$[J].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#$(Q){const $=this.querySelectorAll("fig-tab");for(let Z of $)if(Z.getAttribute("value")===Q)this.selectedTab=Z;else Z.removeAttribute("selected")}attributeChangedCallback(Q,$,Z){switch(Q){case"value":if(Z!==$)this.#$(Z);break;case"disabled":this.#Q(Z!==null&&Z!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const Z=this.querySelectorAll("fig-tab");for(let J of Z)if(J===$)this.selectedTab=J,this.setAttribute("value",J.getAttribute("value")||"");else J.removeAttribute("selected")}}}customElements.define("fig-tabs",V);class w extends HTMLElement{#Q;#Z;constructor(){super()}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){const Q=this.closest("fig-segmented-control");if(Q&&Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.setAttribute("selected","true")}get value(){return this.#Q}set value(Q){this.#Q=Q,this.setAttribute("value",Q)}get selected(){return this.#Z}set selected(Q){this.#Z=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,Z){switch(Q){case"value":this.#Q=Z;break;case"selected":this.#Z=Z;break}}}customElements.define("fig-segment",w);class b extends HTMLElement{#Q=null;constructor(){super()}static get observedAttributes(){return["disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.handleClick.bind(this)),this.#Z(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),requestAnimationFrame(()=>{const Q=this.querySelectorAll("fig-segment");if(!Array.from(Q).some((Z)=>Z.hasAttribute("selected"))&&Q.length>0)this.selectedSegment=Q[0]})}get selectedSegment(){return this.#Q}set selectedSegment(Q){if(this.#Q)this.#Q.removeAttribute("selected");if(this.#Q=Q,Q)Q.setAttribute("selected","true")}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if($){const Z=this.querySelectorAll("fig-segment");for(let J of Z)if(J===$)this.selectedSegment=J;else J.removeAttribute("selected")}}#Z(Q){this.setAttribute("aria-disabled",Q?"true":"false"),this.querySelectorAll("fig-segment").forEach(($)=>{if(Q)$.setAttribute("disabled",""),$.setAttribute("aria-disabled","true");else $.removeAttribute("disabled"),$.removeAttribute("aria-disabled")})}attributeChangedCallback(Q,$,Z){if(Q==="disabled"&&$!==Z)this.#Z(Z!==null&&Z!=="false")}}customElements.define("fig-segmented-control",b);class v extends HTMLElement{#Q=!1;#Z={range:{min:0,max:100,step:1},hue:{min:0,max:255,step:1},delta:{min:-100,max:100,step:1},stepper:{min:0,max:100,step:25},opacity:{min:0,max:100,step:0.1,color:"#FF0000"}};#$;#X;#j;#J;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#$=(Q)=>{Q.stopPropagation(),this.#B()},this.#X=(Q)=>{Q.stopPropagation(),this.#q()},this.#j=(Q)=>{Q.stopPropagation(),this.#K()},this.#J=(Q)=>{Q.stopPropagation(),this.#L()}}#_(){this.value=Number(this.getAttribute("value")||0),this.type=this.getAttribute("type")||"range",this.text=this.getAttribute("text")||!1,this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.getAttribute("disabled")?!0:!1,this.precision=this.hasAttribute("precision")?Number(this.getAttribute("precision")):null;const Q=this.#Z[this.type];if(this.min=Number(this.getAttribute("min")||Q.min),this.max=Number(this.getAttribute("max")||Q.max),this.step=Number(this.getAttribute("step")||Q.step),this.color=this.getAttribute("color")||Q?.color,this.default=this.getAttribute("default")||this.min,this.color)this.style.setProperty("--color",this.color);let $="",Z=`<div class="fig-slider-input-container" role="group">
+                <input 
+                    type="range"
+                    ${this.text?'tabindex="-1"':""}
+                    ${this.disabled?"disabled":""}
+                    min="${this.min}"
+                    max="${this.max}"
+                    step="${this.step}"
+                    class="${this.type}"
+                    value="${this.value}"
+                    aria-valuemin="${this.min}"
+                    aria-valuemax="${this.max}"
+                    aria-valuenow="${this.value}">
+                ${this.initialInnerHTML}
+            </div>`;if(this.text)$=`${Z}
+                    <fig-input-number
+                        placeholder="##"
+                        min="${this.min}"
+                        max="${this.max}"
+                        transform="${this.transform}"
+                        step="${this.step}"
+                        value="${this.value}"
+                        ${this.units?`units="${this.units}"`:""}
+                        ${this.precision!==null?`precision="${this.precision}"`:""}>
+                    </fig-input-number>`;else $=Z;this.innerHTML=$,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.removeEventListener("input",this.#$),this.input.addEventListener("input",this.#$),this.input.removeEventListener("change",this.#X),this.input.addEventListener("change",this.#X),this.input.addEventListener("pointerdown",()=>{this.#Q=!0}),this.input.addEventListener("pointerup",()=>{this.#Q=!1}),this.default)this.style.setProperty("--default",this.#Y(this.default));if(this.datalist=this.querySelector("datalist"),this.figInputNumber=this.querySelector("fig-input-number"),this.datalist)this.inputContainer.append(this.datalist),this.datalist.setAttribute("id",this.datalist.getAttribute("id")||S()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",S());let J=(this.max-this.min)/this.step+1;for(let j=0;j<J;j++){let _=document.createElement("option");_.setAttribute("value",this.min+j*this.step),this.datalist.append(_)}this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}else if(this.type==="delta"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",S());let J=document.createElement("option");J.setAttribute("value",this.default),this.datalist.append(J),this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}if(this.datalist){let J=this.datalist.querySelector(`option[value='${this.default}']`);if(J)J.setAttribute("default","true")}if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#j),this.figInputNumber.addEventListener("input",this.#j),this.figInputNumber.removeEventListener("change",this.#J),this.figInputNumber.addEventListener("change",this.#J);this.#W()})}connectedCallback(){this.#_()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#$),this.input.removeEventListener("change",this.#X);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#j),this.figInputNumber.removeEventListener("change",this.#J)}#K(){if(this.figInputNumber)this.value=this.input.value=this.figInputNumber.value,this.#G(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#Y(Q){let $=Number(this.min),Z=Number(this.max);return(Number(Q)-$)/(Z-$)}#G(){let Q=this.#Y(this.value);this.style.setProperty("--slider-complete",Q);let $=this.#Y(this.default);this.style.setProperty("--default",$),this.style.setProperty("--unchanged",Q===$?1:0)}#W(){let Q=this.input.value;if(this.value=Q,this.#G(),this.input.setAttribute("aria-valuenow",Q),this.figInputNumber)this.figInputNumber.setAttribute("value",Q)}#B(){this.#W(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#q(){this.#Q=!1,this.#W(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#L(){if(this.figInputNumber)this.value=this.input.value=this.figInputNumber.value,this.#G(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}static get observedAttributes(){return["value","step","min","max","type","disabled","color","units","transform","text","default","precision"]}focus(){this.input.focus()}attributeChangedCallback(Q,$,Z){if(this.input)switch(Q){case"color":this.color=Z,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=Z!==null&&Z!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#Q)break;if(this.value=Z,this.input.value=Z,this.#G(),this.figInputNumber)this.figInputNumber.setAttribute("value",Z);break;case"transform":if(this.transform=Number(Z)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=Z!==null?Number(Z):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"default":this.default=Z,this.#G();break;case"min":case"max":case"step":case"type":case"text":case"units":this[Q]=Z,this.#_();break;default:this[Q]=this.input[Q]=Z,this.#W();break}}}customElements.define("fig-slider",v);class g extends HTMLElement{#Q=!1;#Z;#$;#X;#j;constructor(){super();this.#Z=this.#K.bind(this),this.#$=this.#G.bind(this),this.#X=this.#Y.bind(this),this.#j=(Q)=>{Q.stopPropagation(),this.#_(Q)}}connectedCallback(){if(this.multiline=this.hasAttribute("multiline")||!1,this.value=this.getAttribute("value")||"",this.type=this.getAttribute("type")||"text",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.type==="number"){if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.transform=Number(this.getAttribute("transform")||1),this.getAttribute("value"))this.value=Number(this.value)}let Q=`<input 
+      type="${this.type}" 
+      ${this.name?`name="${this.name}"`:""}
+      placeholder="${this.placeholder}"
+      value="${this.type==="number"?this.#J(this.value):this.value}" />`;if(this.multiline)Q=`<textarea  
+      placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{let $=this.querySelector("[slot=append]"),Z=this.querySelector("[slot=prepend]");if(this.innerHTML=Q,Z)Z.addEventListener("click",this.focus.bind(this)),this.prepend(Z);if($)$.addEventListener("click",this.focus.bind(this)),this.append($);if(this.input=this.querySelector("input,textarea"),this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#J(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#J(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#J(this.step));this.addEventListener("pointerdown",this.#X)}this.input.removeEventListener("change",this.#j),this.input.addEventListener("change",this.#j)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#j);this.removeEventListener("pointerdown",this.#X),window.removeEventListener("pointermove",this.#Z),window.removeEventListener("pointerup",this.#$)}focus(){this.input.focus()}#J(Q){if(Q==="")return"";let $=Number(Q)*(this.transform||1);return $=this.#B($),$}#_(Q){Q.stopPropagation();let $=Q.target.value,Z=$;if(this.type==="number")$=$/(this.transform||1),$=this.#W($,!1),Z=$*(this.transform||1);this.value=$,this.input.value=Z,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#K(Q){if(this.type!=="number")return;let $=(this.step||1)*Q.movementX,Z=Number(this.input.value);Z=Z/(this.transform||1)+$,Z=this.#W(Z,!1);let J=Z*(this.transform||1);Z=this.#B(Z),J=this.#B(J),this.value=Z,this.input.value=J,this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#Y(Q){if(this.type!=="number")return;if(Q.altKey||Q.target.closest("[slot]"))this.#Q=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#Z),window.addEventListener("pointerup",this.#$)}#G(Q){if(this.type!=="number")return;this.#Q=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#Z),window.removeEventListener("pointerup",this.#$)}#W(Q,$=!0){let Z=Q;if(this.type==="number"){if(Z=Number(Z),typeof this.min==="number")Z=Math.max($?this.#J(this.min):this.min,Z);if(typeof this.max==="number")Z=Math.min($?this.#J(this.max):this.max,Z);Z=this.#B(Z)}return Z}#B(Q,$=2){const Z=Math.round(Q*100)/100;return Number.isInteger(Z)?Z:Z.toFixed($)}static get observedAttributes(){return["value","placeholder","label","disabled","type","step","min","max","transform","name"]}attributeChangedCallback(Q,$,Z){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=Z!==null&&Z!=="false";break;case"transform":if(this.type==="number")this.transform=Number(Z)||1,this.input.value=this.#J(this.value);break;case"value":if(this.#Q)break;let J=Z;if(this.type==="number")J=this.#W(J,!1),this.value=J,this.input.value=this.#J(J);else this.value=J,this.input.value=J;break;case"min":case"max":case"step":if(this[Q]=this.input[Q]=Number(Z),this.input)this.input.setAttribute(Q,Z);break;case"name":this[Q]=this.input[Q]=Z,this.input.setAttribute("name",Z);break;default:this[Q]=this.input[Q]=Z;break}}}customElements.define("fig-input-text",g);class h extends HTMLElement{#Q;#Z;#$;#X;#j;#J;#_;#K;#Y;#G;#W;#B=!1;constructor(){super();this.#Q=this.#A.bind(this),this.#Z=this.#z.bind(this),this.#$=this.#k.bind(this),this.#X=(Q)=>{Q.stopPropagation(),this.#E(Q)},this.#j=(Q)=>{Q.stopPropagation(),this.#D(Q)},this.#J=(Q)=>{this.#U(Q)},this.#_=(Q)=>{this.#O(Q)},this.#K=(Q)=>{this.#F(Q)}}connectedCallback(){const Q=this.getAttribute("value");if(this.value=Q!==null&&Q!==""?Number(Q):"",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.#Y=this.getAttribute("units")||"",this.#G=this.getAttribute("unit-position")||"suffix",this.#W=this.hasAttribute("precision")?Number(this.getAttribute("precision")):2,this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));this.transform=Number(this.getAttribute("transform")||1);const $=this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false";let j=`<input 
+      type="${$?"number":"text"}"
+      ${$?"":'inputmode="decimal"'}
+      ${this.name?`name="${this.name}"`:""}
+      placeholder="${this.placeholder}"
+      value="${this.#L(this.value)}" />`;requestAnimationFrame(()=>{let _=this.querySelector("[slot=append]"),X=this.querySelector("[slot=prepend]");if(this.innerHTML=j,X)X.addEventListener("click",this.focus.bind(this)),this.prepend(X);if(_)_.addEventListener("click",this.focus.bind(this)),this.append(_);if(this.input=this.querySelector("input"),this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.hasAttribute("disabled")){const K=this.getAttribute("disabled");this.disabled=this.input.disabled=K!=="false"}this.addEventListener("pointerdown",this.#$),this.input.removeEventListener("change",this.#X),this.input.addEventListener("change",this.#X),this.input.removeEventListener("input",this.#j),this.input.addEventListener("input",this.#j),this.input.removeEventListener("focus",this.#J),this.input.addEventListener("focus",this.#J),this.input.removeEventListener("blur",this.#_),this.input.addEventListener("blur",this.#_),this.input.removeEventListener("keydown",this.#K),this.input.addEventListener("keydown",this.#K)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#X),this.input.removeEventListener("input",this.#j),this.input.removeEventListener("focus",this.#J),this.input.removeEventListener("blur",this.#_),this.input.removeEventListener("keydown",this.#K);this.removeEventListener("pointerdown",this.#$),window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#Z)}focus(){this.input.focus()}#q(Q){if(!Q)return"";if(!this.#Y){let J=Q.replace(/[^\d.-]/g,"");const j=J.split(".");if(j.length>2)J=j[0]+"."+j.slice(1).join("");return J}let $=Q.replace(this.#Y,"").trim();$=$.replace(/[^\d.-]/g,"");const Z=$.split(".");if(Z.length>2)$=Z[0]+"."+Z.slice(1).join("");return $}#L(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);if(isNaN($))return"";if($=this.#T($),!this.#Y)return $.toString();if(this.#G==="prefix")return this.#Y+$;else return $+this.#Y}#N(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);return $=this.#T($),$.toString()}#U(Q){this.#B=!0,setTimeout(()=>{const $=Q.target.value;if($&&this.#Y)if(this.#G==="prefix")Q.target.setSelectionRange(this.#Y.length,$.length);else{const Z=$.indexOf(this.#Y);if(Z>-1)Q.target.setSelectionRange(0,Z)}},0)}#O(Q){this.#B=!1;let $=this.#q(Q.target.value);if($!==""){let Z=Number($)/(this.transform||1);Z=this.#S(Z,!1),this.value=Z,Q.target.value=this.#L(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#F(Q){if(this.disabled)return;if(Q.key!=="ArrowUp"&&Q.key!=="ArrowDown")return;Q.preventDefault();const $=this.step||1,Z=Q.shiftKey?10:1,J=$*Z*(Q.key==="ArrowUp"?1:-1);let j=this.#q(this.input.value),_=(j!==""?Number(j)/(this.transform||1):0)+J;_=this.#S(_,!1),this.value=_,this.input.value=this.#L(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#D(Q){let $=this.#q(Q.target.value);if($!=="")this.value=Number($)/(this.transform||1);else this.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#E(Q){Q.stopPropagation();let $=this.#q(Q.target.value);if($!==""){let Z=Number($)/(this.transform||1);Z=this.#S(Z,!1),this.value=Z,Q.target.value=this.#L(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#A(Q){if(this.disabled)return;let $=(this.step||1)*Q.movementX,Z=this.#q(this.input.value),J=Number(Z)/(this.transform||1)+$;J=this.#S(J,!1),this.value=J,this.input.value=this.#L(this.value),this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#k(Q){if(this.disabled)return;if(Q.altKey||Q.target.closest("[slot]"))this.#B=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#Q),window.addEventListener("pointerup",this.#Z)}#z(Q){this.#B=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#Z)}#S(Q,$=!0){let Z=Number(Q);if(isNaN(Z))return"";if(typeof this.min==="number")Z=Math.max(this.min,Z);if(typeof this.max==="number")Z=Math.min(this.max,Z);return Z=this.#T(Z),Z}#T(Q){const $=this.#W??2,Z=Math.pow(10,$),J=Math.round(Q*Z)/Z;return Number.isInteger(J)?J:parseFloat(J.toFixed($))}static get observedAttributes(){return["value","placeholder","disabled","step","min","max","transform","name","units","unit-position","steppers","precision"]}attributeChangedCallback(Q,$,Z){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=Z!==null&&Z!=="false";break;case"units":this.#Y=Z||"",this.input.value=this.#L(this.value);break;case"unit-position":this.#G=Z||"suffix",this.input.value=this.#L(this.value);break;case"transform":this.transform=Number(Z)||1,this.input.value=this.#L(this.value);break;case"value":if(this.#B)break;let J=Z!==null&&Z!==""?Number(Z):"";if(J!=="")J=this.#S(J,!1);this.value=J,this.input.value=this.#L(this.value);break;case"min":case"max":case"step":this[Q]=Number(Z);break;case"precision":this.#W=Z!==null?Number(Z):2,this.input.value=this.#L(this.value);break;case"name":this[Q]=this.input[Q]=Z,this.input.setAttribute("name",Z);break;default:this[Q]=this.input[Q]=Z;break}}}customElements.define("fig-input-number",h);class m extends HTMLElement{constructor(){super()}connectedCallback(){this.src=this.getAttribute("src"),this.name=this.getAttribute("name"),this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials),this.setSrc(this.src),requestAnimationFrame(()=>{this.img=this.querySelector("img")})}setSrc(Q){if(this.src=Q,Q)this.innerHTML=`<img src="${this.src}" ${this.name?`alt="${this.name}"`:""} />`}getInitials(Q){return Q?Q.split(" ").map(($)=>$[0]).join(""):""}static get observedAttributes(){return["src","href","name"]}attributeChangedCallback(Q,$,Z){if(this[Q]=Z,Q==="name")this.img?.setAttribute("alt",Z),this.name=Z,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials);else if(Q==="src")this.src=Z,this.setSrc(this.src)}}customElements.define("fig-avatar",m);class c extends HTMLElement{constructor(){super()}static get observedAttributes(){return["label"]}connectedCallback(){requestAnimationFrame(()=>{if(this.label=this.querySelector(":scope>label"),this.input=Array.from(this.childNodes).find((Q)=>Q.nodeName.toLowerCase().startsWith("fig-")),this.input&&this.label){this.label.addEventListener("click",this.focus.bind(this));let Q=this.input.getAttribute("id")||S();this.input.setAttribute("id",Q),this.label.setAttribute("for",Q)}})}attributeChangedCallback(Q,$,Z){switch(Q){case"label":if(this.label)this.label.textContent=Z;break}}focus(){this.input.focus()}}customElements.define("fig-field",c);class u extends HTMLElement{rgba;hex;alpha=100;#Q;#Z;#$;#X;constructor(){super()}get picker(){return this.getAttribute("picker")||"native"}#j(){const Q={},$=this.getAttribute("experimental");if($)Q.experimental=$;for(let{name:Z,value:J}of this.attributes)if(Z.startsWith("picker-")&&Z!=="picker-anchor")Q[Z.slice(7)]=J;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([Z,J])=>`${Z}="${J}"`).join(" ")}connectedCallback(){this.#J(this.getAttribute("value"));const Q=this.picker==="figma",$=this.picker==="false",Z=this.getAttribute("alpha")==="true",J=this.#j();let j="";if(this.getAttribute("text")){let _=`<fig-input-text 
+        type="text"
+        placeholder="000000"
+        value="${this.hexOpaque.slice(1).toUpperCase()}">
+      </fig-input-text>`;if(Z)_+=`<fig-tooltip text="Opacity">
+                    <fig-input-number 
+                        placeholder="##" 
+                        min="0"
+                        max="100"
+                        value="${this.alpha}"
+                        units="%">
+                    </fig-input-number>
+                </fig-tooltip>`;let X="";if(!$)X=Q?`<fig-fill-picker mode="solid" ${J} ${Z?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.alpha}}'></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;j=`<div class="input-combo">
+                ${X}
+                ${_}
+            </div>`}else if($)j="";else j=Q?`<fig-fill-picker mode="solid" ${J} ${Z?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.alpha}}'></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;this.innerHTML=j,requestAnimationFrame(()=>{if(this.#Q=this.querySelector("fig-chit"),this.#Z=this.querySelector("fig-fill-picker"),this.#$=this.querySelector("fig-input-text:not([type=number])"),this.#X=this.querySelector("fig-input-number"),this.#Q)this.#Q.disabled=this.hasAttribute("disabled"),this.#Q.addEventListener("input",this.#G.bind(this));if(this.#Z){const _=this.getAttribute("picker-anchor");if(_==="self")this.#Z.anchorElement=this;else if(_){const X=document.querySelector(_);if(X)this.#Z.anchorElement=X}if(this.hasAttribute("disabled"))this.#Z.setAttribute("disabled","");this.#Z.addEventListener("input",this.#W.bind(this)),this.#Z.addEventListener("change",this.#Y.bind(this))}if(this.#$){const _=this.rgbAlphaToHex(this.rgba,1);if(this.#$.value=_.slice(1).toUpperCase(),this.#Q)this.#Q.background=_;this.#$.addEventListener("input",this.#_.bind(this)),this.#$.addEventListener("change",this.#Y.bind(this))}if(this.#X)this.#X.addEventListener("input",this.#K.bind(this)),this.#X.addEventListener("change",this.#Y.bind(this))})}#J(Q){if(this.rgba=this.convertToRGBA(Q),this.value=this.rgbAlphaToHex({r:isNaN(this.rgba.r)?0:this.rgba.r,g:isNaN(this.rgba.g)?0:this.rgba.g,b:isNaN(this.rgba.b)?0:this.rgba.b},this.rgba.a),this.hexWithAlpha=this.value.toUpperCase(),this.hexOpaque=this.hexWithAlpha.slice(0,7),Q.length>7)this.alpha=(this.rgba.a*100).toFixed(0);this.style.setProperty("--alpha",this.rgba.a)}#_(Q){Q.stopPropagation();let $=Q.target.value.replace("#","");if(this.#J("#"+$),this.#X)this.#X.setAttribute("value",this.alpha);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque);this.#B()}#K(Q){Q.stopPropagation();const $=Number(Q.target.value)||0,J=Math.round($/100*255).toString(16).padStart(2,"0");if(this.#J(this.hexOpaque+J),this.#Q)this.#Q.setAttribute("alpha",this.rgba.a);if(this.#Z)this.#Z.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));this.#B()}#Y(Q){Q.stopPropagation(),this.#q()}focus(){this.#Q.focus()}#G(Q){if(Q.stopPropagation(),this.#J(Q.target.value),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());this.#B()}#W(Q){Q.stopPropagation();const $=Q.detail;if($&&$.color){let Z=$.color;if($.alpha!==void 0){const J=Math.round($.alpha*255).toString(16).padStart(2,"0");Z=$.color+J}if(this.#J(Z),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#X&&$.alpha!==void 0)this.#X.setAttribute("value",Math.round($.alpha*100));if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);this.#B()}}#B(){const Q=new CustomEvent("input",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}#q(){const Q=new CustomEvent("change",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}static get observedAttributes(){return["value","style","mode","picker","experimental"]}get mode(){return this.getAttribute("mode")}attributeChangedCallback(Q,$,Z){if($===Z)return;switch(Q){case"value":if(this.#J(Z),this.#$)this.#$.setAttribute("value",this.value);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);if(this.#Z)this.#Z.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));if(this.#X)this.#X.setAttribute("value",this.alpha);break;case"mode":if(this.#Z&&Z)this.#Z.setAttribute("mode",Z);break;case"picker":break}}rgbAlphaToHex({r:Q,g:$,b:Z},J=1){Q=Math.max(0,Math.min(255,Math.round(Q))),$=Math.max(0,Math.min(255,Math.round($))),Z=Math.max(0,Math.min(255,Math.round(Z))),J=Math.max(0,Math.min(1,J));const j=Q.toString(16).padStart(2,"0"),_=$.toString(16).padStart(2,"0"),X=Z.toString(16).padStart(2,"0");if(J===1)return`#${j}${_}${X}`.toUpperCase();const Y=Math.round(J*255).toString(16).padStart(2,"0");return`#${j}${_}${X}${Y}`.toUpperCase()}convertToRGBA(Q){let $,Z,J,j=1;if(Q.startsWith("#")){let _=Q.slice(1);if(_.length===8)j=parseInt(_.slice(6),16)/255,_=_.slice(0,6);$=parseInt(_.slice(0,2),16),Z=parseInt(_.slice(2,4),16),J=parseInt(_.slice(4,6),16)}else if(Q.startsWith("rgba")||Q.startsWith("rgb")){let _=Q.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_)$=parseInt(_[1]),Z=parseInt(_[2]),J=parseInt(_[3]),j=_[4]?parseFloat(_[4]):1}else if(Q.startsWith("hsla")||Q.startsWith("hsl")){let _=Q.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_){let X=parseInt(_[1])/360,K=parseInt(_[2])/100,Y=parseInt(_[3])/100;if(j=_[4]?parseFloat(_[4]):1,K===0)$=Z=J=Y;else{let W=(q,U,B)=>{if(B<0)B+=1;if(B>1)B-=1;if(B<0.16666666666666666)return q+(U-q)*6*B;if(B<0.5)return U;if(B<0.6666666666666666)return q+(U-q)*(0.6666666666666666-B)*6;return q},G=Y<0.5?Y*(1+K):Y+K-Y*K,L=2*Y-G;$=W(L,G,X+0.3333333333333333),Z=W(L,G,X),J=W(L,G,X-0.3333333333333333)}$=Math.round($*255),Z=Math.round(Z*255),J=Math.round(J*255)}}else return null;return{r:$,g:Z,b:J,a:j}}}customElements.define("fig-input-color",u);class p extends HTMLElement{#Q="solid";#Z;#$;#X;#j={color:"#D9D9D9",alpha:1};#J={type:"linear",angle:180,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#_={url:null,scaleMode:"fill",scale:50,opacity:1};#K={url:null,scaleMode:"fill",opacity:1};#Y={snapshot:null,opacity:1};constructor(){super()}static get observedAttributes(){return["value","disabled","mode","experimental","alpha"]}connectedCallback(){this.#G(),this.#B()}#G(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if($.type)this.#Q=$.type;switch(this.#Q){case"solid":if($.color)this.#j.color=$.color;if($.alpha!==void 0)this.#j.alpha=$.alpha;if($.opacity!==void 0)this.#j.alpha=$.opacity/100;break;case"gradient":if($.gradient)this.#J={...this.#J,...$.gradient};break;case"image":if($.image)this.#_={...this.#_,...$.image};break;case"video":if($.video)this.#K={...this.#K,...$.video};break;case"webcam":if($.webcam)this.#Y={...this.#Y,...$.webcam};if($.opacity!==void 0)this.#Y.opacity=$.opacity;break}}catch($){if(Q.startsWith("#")){if(this.#Q="solid",this.#j.color=Q.slice(0,7),Q.length>7){const Z=Q.slice(7,9);this.#j.alpha=parseInt(Z,16)/255}}}}#W(){const Q={},$=this.getAttribute("mode");if($)Q.mode=$;const Z=this.getAttribute("experimental");if(Z)Q.experimental=Z;const J=this.getAttribute("alpha");if(J)Q.alpha=J;for(let{name:j,value:_}of this.attributes)if(j.startsWith("picker-")&&j!=="picker-anchor")Q[j.slice(7)]=_;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([j,_])=>`${j}="${_}"`).join(" ")}#B(){const Q=this.hasAttribute("disabled"),$=JSON.stringify(this.value),Z=this.getAttribute("alpha")!=="false",J=(X)=>Z?`<fig-tooltip text="Opacity">
+            <fig-input-number 
+              class="fig-input-fill-opacity"
+              placeholder="##" 
+              min="0"
+              max="100"
+              value="${X}"
+              units="%"
+              ${Q?"disabled":""}>
+            </fig-input-number>
+          </fig-tooltip>`:"";let j="";switch(this.#Q){case"solid":j=`
+          <fig-input-text 
+            type="text"
+            class="fig-input-fill-hex"
+            placeholder="000000"
+            value="${this.#j.color.slice(1).toUpperCase()}"
+            ${Q?"disabled":""}>
+          </fig-input-text>
+          ${J(Math.round(this.#j.alpha*100))}`;break;case"gradient":j=`
+          <label class="fig-input-fill-label">${this.#J.type.charAt(0).toUpperCase()+this.#J.type.slice(1)}</label>
+          ${J(this.#J.stops[0]?.opacity??100)}`;break;case"image":j=`
+          <label class="fig-input-fill-label">Image</label>
+          ${J(Math.round((this.#_.opacity??1)*100))}`;break;case"video":j=`
+          <label class="fig-input-fill-label">Video</label>
+          ${J(Math.round((this.#K.opacity??1)*100))}`;break;case"webcam":j=`
+          <label class="fig-input-fill-label">Webcam</label>
+          ${J(Math.round((this.#Y.opacity??1)*100))}`;break}const _=this.#W();this.innerHTML=`
+      <div class="input-combo">
+        <fig-fill-picker ${_} value='${$}' ${Q?"disabled":""}></fig-fill-picker>
+        ${j}
+      </div>`,this.#q()}#q(){requestAnimationFrame(()=>{this.#Z=this.querySelector("fig-fill-picker"),this.#$=this.querySelector(".fig-input-fill-opacity"),this.#X=this.querySelector(".fig-input-fill-hex");const Q=this.querySelector(".fig-input-fill-label");if(Q&&this.#Z)Q.addEventListener("click",()=>{const $=this.#Z.querySelector("fig-chit");if($)$.click()});if(this.#Z){const $=this.getAttribute("picker-anchor");if(!$||$==="self")this.#Z.anchorElement=this;else{const Z=document.querySelector($);if(Z)this.#Z.anchorElement=Z}this.#Z.addEventListener("input",(Z)=>{Z.stopPropagation();const J=Z.detail;if(!J)return;const j=J.type,_=j!==this.#Q;switch(this.#Q=j,j){case"solid":this.#j.color=J.color,this.#j.alpha=J.alpha;break;case"gradient":if(J.gradient)this.#J=J.gradient;break;case"image":if(J.image)this.#_=J.image;break;case"video":if(J.video)this.#K=J.video;break}if(_)this.#N();else this.#L();this.#F()}),this.#Z.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#D()})}if(this.#X)this.#X.addEventListener("input",($)=>{$.stopPropagation();const Z="#"+$.target.value.replace("#","");this.#j.color=Z,this.#U(),this.#F()}),this.#X.addEventListener("change",($)=>{$.stopPropagation(),this.#D()});if(this.#$)this.#$.addEventListener("input",($)=>{$.stopPropagation();const Z=parseFloat($.target.value),J=isNaN(Z)?100:Z,j=J/100;switch(this.#Q){case"solid":this.#j.alpha=j;break;case"gradient":this.#J.stops.forEach((_)=>{_.opacity=J});break;case"image":this.#_.opacity=j;break;case"video":this.#K.opacity=j;break;case"webcam":this.#Y.opacity=j;break}this.#U(),this.#O(j),this.#F()}),this.#$.addEventListener("change",($)=>{$.stopPropagation(),this.#D()})})}#L(){switch(this.#Q){case"solid":if(this.#X)this.#X.setAttribute("value",this.#j.color.slice(1).toUpperCase());if(this.#$)this.#$.setAttribute("value",Math.round(this.#j.alpha*100));break;case"gradient":{if(this.#$)this.#$.setAttribute("value",this.#J.stops[0]?.opacity??100);const Q=this.querySelector(".fig-input-fill-label");if(Q){const $=this.#J.type.charAt(0).toUpperCase()+this.#J.type.slice(1);Q.textContent=$}break}case"image":if(this.#$)this.#$.setAttribute("value",Math.round((this.#_.opacity??1)*100));break;case"video":if(this.#$)this.#$.setAttribute("value",Math.round((this.#K.opacity??1)*100));break;case"webcam":if(this.#$)this.#$.setAttribute("value",Math.round((this.#Y.opacity??1)*100));break}}#N(){const Q=this.hasAttribute("disabled"),$=this.querySelector(".input-combo");if(!$)return;const Z=$.querySelector(".fig-input-fill-label"),J=$.querySelector(".fig-input-fill-hex"),j=$.querySelector(".fig-input-fill-opacity"),_=$.querySelectorAll("fig-tooltip");Z?.remove(),J?.remove(),_.forEach((K)=>K.remove());let X="";switch(this.#Q){case"solid":X=`
+          <fig-input-text 
+            type="text"
+            class="fig-input-fill-hex"
+            placeholder="000000"
+            value="${this.#j.color.slice(1).toUpperCase()}"
+            ${Q?"disabled":""}>
+          </fig-input-text>
+          <fig-tooltip text="Opacity">
+            <fig-input-number 
+              class="fig-input-fill-opacity"
+              placeholder="##" 
+              min="0"
+              max="100"
+              value="${Math.round(this.#j.alpha*100)}"
+              units="%"
+              ${Q?"disabled":""}>
+            </fig-input-number>
+          </fig-tooltip>`;break;case"gradient":X=`
+          <label class="fig-input-fill-label">${this.#J.type.charAt(0).toUpperCase()+this.#J.type.slice(1)}</label>
+          <fig-tooltip text="Opacity">
+            <fig-input-number 
+              class="fig-input-fill-opacity"
+              placeholder="##" 
+              min="0"
+              max="100"
+              value="${this.#J.stops[0]?.opacity??100}"
+              units="%"
+              ${Q?"disabled":""}>
+            </fig-input-number>
+          </fig-tooltip>`;break;case"image":X=`
+          <label class="fig-input-fill-label">Image</label>
+          <fig-tooltip text="Opacity">
+            <fig-input-number 
+              class="fig-input-fill-opacity"
+              placeholder="##" 
+              min="0"
+              max="100"
+              value="${Math.round((this.#_.opacity??1)*100)}"
+              units="%"
+              ${Q?"disabled":""}>
+            </fig-input-number>
+          </fig-tooltip>`;break;case"video":X=`
+          <label class="fig-input-fill-label">Video</label>
+          <fig-tooltip text="Opacity">
+            <fig-input-number 
+              class="fig-input-fill-opacity"
+              placeholder="##" 
+              min="0"
+              max="100"
+              value="${Math.round((this.#K.opacity??1)*100)}"
+              units="%"
+              ${Q?"disabled":""}>
+            </fig-input-number>
+          </fig-tooltip>`;break;case"webcam":X=`
+          <label class="fig-input-fill-label">Webcam</label>
+          <fig-tooltip text="Opacity">
+            <fig-input-number 
+              class="fig-input-fill-opacity"
+              placeholder="##" 
+              min="0"
+              max="100"
+              value="${Math.round((this.#Y.opacity??1)*100)}"
+              units="%"
+              ${Q?"disabled":""}>
+            </fig-input-number>
+          </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",X),requestAnimationFrame(()=>{this.#$=this.querySelector(".fig-input-fill-opacity"),this.#X=this.querySelector(".fig-input-fill-hex");const K=this.querySelector(".fig-input-fill-label");if(K&&this.#Z)K.addEventListener("click",()=>{const Y=this.#Z.querySelector("fig-chit");if(Y)Y.click()});if(this.#X)this.#X.addEventListener("input",(Y)=>{Y.stopPropagation();const W="#"+Y.target.value.replace("#","");this.#j.color=W,this.#U(),this.#F()}),this.#X.addEventListener("change",(Y)=>{Y.stopPropagation(),this.#D()});if(this.#$)this.#$.addEventListener("input",(Y)=>{Y.stopPropagation();const W=parseFloat(Y.target.value),G=isNaN(W)?100:W,L=G/100;switch(this.#Q){case"solid":this.#j.alpha=L;break;case"gradient":this.#J.stops.forEach((q)=>{q.opacity=G});break;case"image":this.#_.opacity=L;break;case"video":this.#K.opacity=L;break;case"webcam":this.#Y.opacity=L;break}this.#U(),this.#O(L),this.#F()}),this.#$.addEventListener("change",(Y)=>{Y.stopPropagation(),this.#D()})})}#U(){if(this.#Z)this.#Z.setAttribute("value",JSON.stringify(this.value))}#O(Q){if(this.#Z){const $=this.#Z.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#F(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#D(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#j.color,alpha:this.#j.alpha,opacity:Math.round(this.#j.alpha*100)};case"gradient":return{type:"gradient",gradient:{...this.#J}};case"image":return{type:"image",image:{...this.#_}};case"video":return{type:"video",video:{...this.#K}};case"webcam":return{type:"webcam",webcam:{...this.#Y}};default:return{type:this.#Q}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,Z){if($===Z)return;switch(Q){case"value":const J=this.#Q;if(this.#G(),this.#Z)if(this.#Q!==J)this.#B();else this.#U(),this.#L();break;case"disabled":if(this.#Z)this.#B();break;case"mode":case"experimental":if(this.#Z)if(Z)this.#Z.setAttribute(Q,Z);else this.#Z.removeAttribute(Q);break}}}customElements.define("fig-input-fill",p);class R extends HTMLElement{#Q=null;#Z;constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",S()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.input.setAttribute("role","checkbox"),this.#Z=this.handleInput.bind(this)}connectedCallback(){const Q=this.querySelector(":scope > input");if(Q)this.input=Q;else if(!this.input.parentNode)this.append(this.input);if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.removeEventListener("change",this.#Z),this.input.addEventListener("change",this.#Z),this.hasAttribute("disabled"))this.input.disabled=!0;if(this.hasAttribute("indeterminate"))this.input.indeterminate=!0,this.input.setAttribute("indeterminate","true");const $=this.querySelector(":scope > label");if($)this.#Q=$,this.#Q.setAttribute("for",this.input.id);if(this.hasAttribute("label"))this.#$(),this.#Q.innerText=this.getAttribute("label");this.render()}static get observedAttributes(){return["disabled","label","checked","name","value"]}#$(){if(!this.#Q)this.#Q=document.createElement("label"),this.#Q.setAttribute("for",this.input.id);if(this.#Q&&!this.#Q.parentNode&&this.input.parentNode)this.input.after(this.#Q)}render(){}focus(){this.input.focus()}get value(){return this.input.value}set value(Q){this.input.value=Q,this.setAttribute("value",Q)}get checked(){return this.input.checked}set checked(Q){if(this.input.checked=Q,Q)this.setAttribute("checked","");else this.removeAttribute("checked")}disconnectedCallback(){this.input.removeEventListener("change",this.#Z),this.input.remove()}attributeChangedCallback(Q,$,Z){switch(Q){case"label":if(Z)this.#$(),this.#Q.innerText=Z;else if(this.#Q)this.#Q.remove(),this.#Q=null;break;case"checked":this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false";break;case"value":this.input.value=Z;break;default:this.input[Q]=Z,this.input.setAttribute(Q,Z);break}}handleInput(Q){if(Q.stopPropagation(),this.input.indeterminate=!1,this.input.removeAttribute("indeterminate"),this.input.setAttribute("aria-checked",this.input.checked),this.input.checked)this.setAttribute("checked","");else this.removeAttribute("checked");this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}}))}}customElements.define("fig-checkbox",R);class d extends R{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}customElements.define("fig-radio",d);class s extends R{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",s);class i extends HTMLDialogElement{#Q=16;#Z=null;constructor(){super()}get#$(){return parseInt(this.getAttribute("offset")??this.#Q)}connectedCallback(){if(!this.hasAttribute("theme"))this.setAttribute("theme","dark");const Q=this.getAttribute("open")==="true"||this.getAttribute("open")==="";if(this.hasAttribute("open")&&!Q)this.removeAttribute("open");if(!Q)this.close();requestAnimationFrame(()=>{if(this.#X(),this.#J(),Q)this.showToast()})}disconnectedCallback(){this.#K()}#X(){this.querySelectorAll("[close-toast]").forEach((Q)=>{Q.removeEventListener("click",this.#j),Q.addEventListener("click",this.#j.bind(this))})}#j(){this.hideToast()}#J(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.#$}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}#_(){this.#K();const Q=parseInt(this.getAttribute("duration")??"5000");if(Q>0)this.#Z=setTimeout(()=>{this.hideToast()},Q)}#K(){if(this.#Z)clearTimeout(this.#Z),this.#Z=null}showToast(){this.show(),this.#J(),this.#_(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.#K(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme"]}attributeChangedCallback(Q,$,Z){if(Q==="offset")this.#J();if(Q==="open")if(Z!==null&&Z!=="false")this.showToast();else this.hideToast()}}customElements.define("fig-toast",i,{extends:"dialog"});class r extends HTMLElement{#Q=!1;#Z=null;constructor(){super();this.#Z=this.handleSelectInput.bind(this)}getOptionsFromAttribute(){return(this.getAttribute("options")||"").split(",")}connectedCallback(){const Q=Array.from(this.children).find((j)=>j.tagName==="FIG-DROPDOWN")||null;if(this.#Q=Q!==null,Q)Q.remove();this.options=this.getOptionsFromAttribute(),this.placeholder=this.getAttribute("placeholder")||"",this.value=this.getAttribute("value")||"";const $=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"",J=this.#Q?"":`<fig-dropdown type="dropdown" ${Z}>
+                              ${this.options.map((j)=>`<option>${j}</option>`).join("")}
+                            </fig-dropdown>`;this.innerHTML=`<div class="input-combo">
+                        <fig-input-text placeholder="${this.placeholder}">
+                        </fig-input-text> 
+                        <fig-button type="select" variant="input" icon>
+                            <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+  <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.9" stroke-linecap='round'/>
+</svg>
+                            ${J}
+                        </fig-button>
+                    </div>`,requestAnimationFrame(()=>{this.input=this.querySelector("fig-input-text");const j=this.querySelector("fig-button");if(this.#Q&&Q&&j){if(!Q.hasAttribute("type"))Q.setAttribute("type","dropdown");if($)Q.setAttribute("experimental",$);j.append(Q)}if(this.dropdown=this.querySelector("fig-dropdown"),this.dropdown?.removeEventListener("input",this.#Z),this.dropdown?.addEventListener("input",this.#Z),this.input)this.input.setAttribute("value",this.value);if(this.hasAttribute("disabled"))this.#$(!0)})}disconnectedCallback(){this.dropdown?.removeEventListener("input",this.#Z)}handleSelectInput(Q){this.setAttribute("value",Q.target.closest("fig-dropdown").value)}handleInput(Q){this.value=this.input.value}static get observedAttributes(){return["options","placeholder","value","disabled","experimental"]}focus(){this.input.focus()}#$(Q){if(this.input)if(Q)this.input.setAttribute("disabled","");else this.input.removeAttribute("disabled");const $=this.querySelector("fig-button");if($)if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}attributeChangedCallback(Q,$,Z){switch(Q){case"options":if(this.options=Z.split(","),this.dropdown&&!this.#Q)this.dropdown.innerHTML=this.options.map((J)=>`<option>${J}</option>`).join("");break;case"placeholder":if(this.placeholder=Z,this.input)this.input.setAttribute("placeholder",Z);break;case"value":if(this.value=Z,this.input)this.input.setAttribute("value",Z);break;case"disabled":this.#$(Z!==null&&Z!=="false");break;case"experimental":if(this.dropdown){if(Z)this.dropdown.setAttribute("experimental",Z);else if(!this.#Q)this.dropdown.removeAttribute("experimental")}break}}}customElements.define("fig-combo-input",r);class l extends HTMLElement{#Q="color";#Z=null;#$=!1;constructor(){super();this.#Z=this.#K.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha"]}connectedCallback(){this.#_(),this.#X()}#X(){const Q=this.getAttribute("alpha");if(Q!==null)this.style.setProperty("--alpha",Q);else this.style.removeProperty("--alpha")}#j(Q){if(!Q)return"color";const $=Q.toLowerCase();if($.includes("gradient"))return"gradient";if($.includes("url("))return"image";return"color"}#J(Q){if(!Q)return"#D9D9D9";if(Q.startsWith("#"))return Q.slice(0,7);try{const $=document.createElement("canvas").getContext("2d");return $.fillStyle=Q,$.fillStyle}catch{return"#D9D9D9"}}#_(){const Q=this.getAttribute("background")||"#D9D9D9",$=this.#j(Q);if($!==this.#Q||!this.input){if(this.#Q=$,this.setAttribute("data-type",this.#Q),this.input)this.input.removeEventListener("input",this.#Z);if(this.#Q==="color"){const Z=this.#J(Q);this.innerHTML=`<input type="color" value="${Z}" />`,this.input=this.querySelector("input"),this.input.addEventListener("input",this.#Z)}else this.innerHTML="",this.input=null}else if(this.#Q==="color"&&this.input){const Z=this.#J(Q);if(this.input.value!==Z)this.input.value=Z}this.style.setProperty("--chit-background",Q)}#K(Q){this.#$=!0,this.setAttribute("background",Q.target.value),this.#$=!1}get background(){return this.getAttribute("background")}set background(Q){this.setAttribute("background",Q)}focus(){this.input?.focus()}attributeChangedCallback(Q,$,Z){if($===Z)return;if(Q==="background"){if(this.#$){this.style.setProperty("--chit-background",Z);return}this.#_()}else if(Q==="alpha")this.#X()}get alpha(){return this.getAttribute("alpha")}set alpha(Q){if(Q===null||Q===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",Q)}}customElements.define("fig-chit",l);class o extends HTMLElement{#Q=null;#Z=this.#K.bind(this);#$=this.#J.bind(this);constructor(){super()}#X(){return`<fig-chit size="large" background="${this.src?`url(${this.src})`:"url()"}" disabled></fig-chit><div>${this.upload?`<fig-button variant="overlay" type="upload">
+          ${this.label} 
+          <input type="file" accept="image/*" />
+        </fig-button>`:""} ${this.download?`<fig-button variant="overlay" icon="true" type="download">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 13C17.7761 13 18 13.2239 18 13.5V16.5C18 17.3284 17.3284 18 16.5 18H7.5C6.67157 18 6 17.3284 6 16.5V13.5C6 13.2239 6.22386 13 6.5 13C6.77614 13 7 13.2239 7 13.5V16.5C7 16.7761 7.22386 17 7.5 17H16.5C16.7761 17 17 16.7761 17 16.5V13.5C17 13.2239 17.2239 13 17.5 13ZM12 6C12.2761 6 12.5 6.22386 12.5 6.5V12.293L14.6465 10.1465C14.8417 9.95122 15.1583 9.95122 15.3535 10.1465C15.5488 10.3417 15.5488 10.6583 15.3535 10.8535L12.3535 13.8535C12.2597 13.9473 12.1326 14 12 14C11.9006 14 11.8042 13.9704 11.7227 13.916L11.6465 13.8535L8.64648 10.8535C8.45122 10.6583 8.45122 10.3417 8.64648 10.1465C8.84175 9.95122 9.15825 9.95122 9.35352 10.1465L11.5 12.293V6.5C11.5 6.22386 11.7239 6 12 6Z" fill="black"/>
+</svg></fig-button>`:""}</div>`}connectedCallback(){this.#Q=this.getAttribute("src")||"",this.upload=this.getAttribute("upload")==="true",this.download=this.getAttribute("download")==="true",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#X(),this.#j();const Q=this.getAttribute("aspect-ratio");if(Q&&Q!=="auto")this.style.setProperty("--aspect-ratio",Q);const $=this.getAttribute("fit");if($)this.style.setProperty("--fit",$)}disconnectedCallback(){this.fileInput?.removeEventListener("change",this.#Z),this.downloadButton?.removeEventListener("click",this.#$)}#j(){requestAnimationFrame(()=>{if(this.chit=this.querySelector("fig-chit"),this.upload)this.uploadButton=this.querySelector("fig-button[type='upload']"),this.fileInput=this.uploadButton?.querySelector("input"),this.fileInput?.removeEventListener("change",this.#Z),this.fileInput?.addEventListener("change",this.#Z);if(this.download)this.downloadButton=this.querySelector("fig-button[type='download']"),this.downloadButton?.removeEventListener("click",this.#$),this.downloadButton?.addEventListener("click",this.#$)})}#J(){const Q=document.createElement("a");Q.href=this.blob,Q.download="image.png",Q.click()}async#_(Q){await new Promise(($)=>{this.image=new Image,this.image.crossOrigin="Anonymous",this.image.onload=async()=>{this.aspectRatio=this.image.width/this.image.height;const Z=this.getAttribute("aspect-ratio");if(!Z||Z==="auto")this.style.setProperty("--aspect-ratio",`${this.image.width}/${this.image.height}`);this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),$();const J=document.createElement("canvas"),j=J.getContext("2d");J.width=this.image.width,J.height=this.image.height,j.drawImage(this.image,0,0),this.base64=J.toDataURL(),J.toBlob((_)=>{if(this.blob)URL.revokeObjectURL(this.blob);if(_)this.blob=URL.createObjectURL(_)})},this.image.src=Q})}async#K(Q){if(this.blob)URL.revokeObjectURL(this.blob);this.blob=URL.createObjectURL(Q.target.files[0]);const $=new FileReader;$.readAsDataURL(Q.target.files[0]),await new Promise((Z)=>{$.onload=(J)=>{this.base64=J.target.result,Z()}}),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.setAttribute("src",this.blob)}static get observedAttributes(){return["src","upload","aspect-ratio","fit"]}get src(){return this.#Q}set src(Q){this.#Q=Q,this.setAttribute("src",Q)}attributeChangedCallback(Q,$,Z){if(Q==="src"){if(this.#Q=Z,this.chit)this.chit.setAttribute("background",this.#Q?`url(${this.#Q})`:"");if(this.#Q)this.#_(this.#Q)}if(Q==="upload"||Q==="download")this.upload=Z.toLowerCase()==="true",this.download=Z.toLowerCase()==="true",this.innerHTML=this.#X(),this.#j();if(Q==="size")this.size=Z;if(Q==="aspect-ratio"){if(Z&&Z!=="auto")this.style.setProperty("--aspect-ratio",Z);else if(!Z)this.style.removeProperty("--aspect-ratio")}if(Q==="fit")if(Z)this.style.setProperty("--fit",Z);else this.style.removeProperty("--fit")}}customElements.define("fig-image",o);class D extends HTMLElement{#Q={x:0.42,y:0};#Z={x:0.58,y:1};#$={stiffness:200,damping:15,mass:1};#X="bezier";#j=2;#J=null;#_=null;#K=null;#Y=null;#G=null;#W=null;#B=null;#q=null;#L=null;#N=null;#U=null;#O=null;#F=0.8;#D=200;#E=200;#A=null;#k=null;#z=null;#S=3.625;#T=2;#P=3.625;#R=6;#g=16;#V=3;static PRESETS=[{group:null,name:"Linear",type:"bezier",value:[0,0,1,1]},{group:"Bezier",name:"Ease in",type:"bezier",value:[0.42,0,1,1]},{group:"Bezier",name:"Ease out",type:"bezier",value:[0,0,0.58,1]},{group:"Bezier",name:"Ease in and out",type:"bezier",value:[0.42,0,0.58,1]},{group:"Bezier",name:"Ease in back",type:"bezier",value:[0.6,-0.28,0.735,0.045]},{group:"Bezier",name:"Ease out back",type:"bezier",value:[0.175,0.885,0.32,1.275]},{group:"Bezier",name:"Ease in and out back",type:"bezier",value:[0.68,-0.55,0.265,1.55]},{group:"Bezier",name:"Custom bezier",type:"bezier",value:null},{group:"Spring",name:"Gentle",type:"spring",spring:{stiffness:120,damping:14,mass:1}},{group:"Spring",name:"Quick",type:"spring",spring:{stiffness:380,damping:20,mass:1}},{group:"Spring",name:"Bouncy",type:"spring",spring:{stiffness:250,damping:8,mass:1}},{group:"Spring",name:"Slow",type:"spring",spring:{stiffness:60,damping:11,mass:1}},{group:"Spring",name:"Custom spring",type:"spring",spring:null}];static get observedAttributes(){return["value","precision","aspect-ratio"]}connectedCallback(){this.#j=parseInt(this.getAttribute("precision")||"2"),this.#s(this.getAttribute("aspect-ratio"));const Q=this.getAttribute("value");if(Q)this.#w(Q);this.#U=this.#x(),this.#b(),this.#h()}disconnectedCallback(){if(this.#J=null,this.#z)this.#z.disconnect(),this.#z=null}#s(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}attributeChangedCallback(Q,$,Z){if(Q==="aspect-ratio"){if(this.#s(Z),this.#_)this.#v(),this.#C();return}if(!this.#_)return;if(Q==="value"&&Z){const J=this.#X;if(this.#w(Z),this.#U=this.#x(),J!==this.#X)this.#b();else this.#C(),this.#o()}if(Q==="precision")this.#j=parseInt(Z||"2")}get value(){if(this.#X==="spring"){const{stiffness:$,damping:Z,mass:J}=this.#$;return`spring(${$}, ${Z}, ${J})`}const Q=this.#j;return`${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#Z.x.toFixed(Q)}, ${this.#Z.y.toFixed(Q)}`}get cssValue(){if(this.#X==="spring"){const $=this.#I(),J=Math.max(1,Math.floor($.length/20)),j=[];for(let _=0;_<$.length;_+=J)j.push($[_].value.toFixed(3));if($.length>0)j.push($[$.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}const Q=this.#j;return`cubic-bezier(${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#Z.x.toFixed(Q)}, ${this.#Z.y.toFixed(Q)})`}get preset(){return this.#U}set value(Q){this.setAttribute("value",Q)}#w(Q){const $=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if($){this.#X="spring",this.#$.stiffness=parseFloat($[1]),this.#$.damping=parseFloat($[2]),this.#$.mass=parseFloat($[3]);return}const Z=Q.split(",").map((J)=>parseFloat(J.trim()));if(Z.length>=4&&Z.every((J)=>!isNaN(J)))this.#X="bezier",this.#Q.x=Z[0],this.#Q.y=Z[1],this.#Z.x=Z[2],this.#Z.y=Z[3]}#x(){if(this.#X==="bezier"){for(let $ of D.PRESETS){if($.type!=="bezier"||!$.value)continue;if(Math.abs(this.#Q.x-$.value[0])<0.001&&Math.abs(this.#Q.y-$.value[1])<0.001&&Math.abs(this.#Z.x-$.value[2])<0.001&&Math.abs(this.#Z.y-$.value[3])<0.001)return $.name}return"Custom bezier"}for(let $ of D.PRESETS){if($.type!=="spring"||!$.spring)continue;if(Math.abs(this.#$.stiffness-$.spring.stiffness)<0.001&&Math.abs(this.#$.damping-$.spring.damping)<0.001&&Math.abs(this.#$.mass-$.spring.mass)<0.001)return $.name}return"Custom spring"}#I(){const{stiffness:Q,damping:$,mass:Z}=this.#$,_=[];let X=0,K=0;for(let Y=0;Y<=5;Y+=0.004){const W=-Q*(X-1)-$*K;if(K+=W/Z*0.004,X+=K*0.004,_.push({t:Y,value:X}),Y>0.1&&Math.abs(X-1)<0.0005&&Math.abs(K)<0.0005)break}return _}static#c(Q,$=24){const{stiffness:Z,damping:J,mass:j}=Q,K=[];let Y=0,W=0;for(let O=0;O<=5;O+=0.004){const N=-Z*(Y-1)-J*W;if(W+=N/j*0.004,Y+=W*0.004,K.push({t:O,value:Y}),O>0.1&&Math.abs(Y-1)<0.001&&Math.abs(W)<0.001)break}const G=K[K.length-1].t||1;let L=1;for(let O of K)if(O.value>L)L=O.value;let q=0;for(let O of K)if(O.value<q)q=O.value;const U=Math.max(L-q,1),B=6,M=$-B*2,E=Math.max(1,Math.floor(K.length/30));let A="";for(let O=0;O<K.length;O+=E){const N=B+K[O].t/G*M,F=B+(1-(K[O].value-q)/U)*M;A+=(O===0?"M":"L")+N.toFixed(1)+","+F.toFixed(1)}return`<svg width="${$}" height="${$}" viewBox="0 0 ${$} ${$}" fill="none"><path d="${A}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,$,Z,J,j=24){const X=(j-12)/2,Y=[],W=(N,F,T,$Q,z)=>{const H=1-z;return H*H*H*N+3*H*H*z*F+3*H*z*z*T+z*z*z*$Q};for(let N=0;N<=48;N++){const F=N/48;Y.push({x:W(0,Q,Z,1,F),y:W(0,$,J,1,F)})}let G=1/0,L=-1/0,q=1/0,U=-1/0;for(let N of Y){if(N.x<G)G=N.x;if(N.x>L)L=N.x;if(N.y<q)q=N.y;if(N.y>U)U=N.y}const B=Math.max(L-G,0.000001),M=Math.max(U-q,0.000001),E=(N)=>X+(N-G)/B*12,A=(N)=>X+(1-(N-q)/M)*12;let O="";for(let N=0;N<Y.length;N++){const F=E(Y[N].x),T=A(Y[N].y);O+=`${N===0?"M":"L"}${F.toFixed(1)},${T.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${O}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#b(){this.classList.toggle("spring-mode",this.#X==="spring"),this.classList.toggle("bezier-mode",this.#X!=="spring"),this.#u(),this.innerHTML=this.#r(),this.#l(),this.#v(),this.#C(),this.#ZQ()}#i(){if(this.getAttribute("dropdown")!=="true")return"";let Q="",$=void 0;for(let Z of D.PRESETS){if(Z.group!==$){if($!==void 0)Q+="</optgroup>";if(Z.group)Q+=`<optgroup label="${Z.group}">`;$=Z.group}let J;if(Z.type==="spring"){const _=Z.spring||this.#$;J=D.#c(_)}else{const _=Z.value||[this.#Q.x,this.#Q.y,this.#Z.x,this.#Z.y];J=D.curveIcon(..._)}const j=Z.name===this.#U?" selected":"";Q+=`<option value="${Z.name}"${j}>${J} ${Z.name}</option>`}if($)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#r(){const $=this.#i();if(this.#X==="spring")return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
+        <rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
+        <line class="fig-easing-curve-target" x1="0" y1="40" x2="200" y2="40"/>
+        <line class="fig-easing-curve-diagonal" x1="0" y1="180" x2="0" y2="180"/>
+        <path class="fig-easing-curve-path"/>
+        <circle class="fig-easing-curve-handle" data-handle="bounce" r="${this.#P}"/>
+        <rect class="fig-easing-curve-duration-bar" data-handle="duration" width="${this.#R}" height="${this.#g}" rx="${this.#V}" ry="${this.#V}"/>
+      </svg></div>`;return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
+      <rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
+      <line class="fig-easing-curve-diagonal" x1="0" y1="200" x2="200" y2="0"/>
+      <line class="fig-easing-curve-arm" data-arm="1"/>
+      <line class="fig-easing-curve-arm" data-arm="2"/>
+      <path class="fig-easing-curve-path"/>
+      <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#T}"/>
+      <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#T}"/>
+      <circle class="fig-easing-curve-handle" data-handle="1" r="${this.#S}"/>
+      <circle class="fig-easing-curve-handle" data-handle="2" r="${this.#S}"/>
+    </svg></div>`}#f(Q,$){const Z=getComputedStyle(this).getPropertyValue(Q).trim();if(!Z)return $;const J=Number.parseFloat(Z);return Number.isFinite(J)?J:$}#u(){this.#S=this.#f("--easing-bezier-handle-radius",this.#S),this.#T=this.#f("--easing-bezier-endpoint-radius",this.#T),this.#P=this.#f("--easing-spring-handle-radius",this.#P),this.#R=this.#f("--easing-duration-bar-width",this.#R),this.#g=this.#f("--easing-duration-bar-height",this.#g),this.#V=this.#f("--easing-duration-bar-radius",this.#V)}#l(){this.#_=this.querySelector(".fig-easing-curve-svg"),this.#K=this.querySelector(".fig-easing-curve-path"),this.#Y=this.querySelector('[data-arm="1"]'),this.#G=this.querySelector('[data-arm="2"]'),this.#W=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#B=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#q=this.querySelector('[data-endpoint="start"]'),this.#L=this.querySelector('[data-endpoint="end"]'),this.#N=this.querySelector(".fig-easing-curve-dropdown"),this.#O=this.querySelector(".fig-easing-curve-target"),this.#A=this.querySelector(".fig-easing-curve-bounds"),this.#k=this.querySelector(".fig-easing-curve-diagonal")}#h(){if(this.#z||!window.ResizeObserver)return;this.#z=new ResizeObserver(()=>{if(this.#v())this.#C()}),this.#z.observe(this)}#v(){if(!this.#_)return!1;const Q=this.#_.getBoundingClientRect(),$=Math.max(1,Math.round(Q.width||200)),Z=Math.max(1,Math.round(Q.height||200)),J=$!==this.#D||Z!==this.#E;return this.#D=$,this.#E=Z,this.#_.setAttribute("viewBox",`0 0 ${$} ${Z}`),J}#m(Q,$){return{x:Q*this.#D,y:(1-$)*this.#E}}#p(Q,$){return{x:Q/this.#D,y:1-$/this.#E}}#d={minVal:0,maxVal:1.2,totalTime:1};#H(Q,$){const J=this.#E-40,{minVal:j,maxVal:_}=this.#d,X=_-j||1;return{x:Q*this.#D,y:20+(1-($-j)/X)*J}}#C(){if(this.#v(),this.#X==="spring")this.#e();else this.#n()}#n(){if(this.#A)this.#A.setAttribute("x","0"),this.#A.setAttribute("y","0"),this.#A.setAttribute("width",this.#D),this.#A.setAttribute("height",this.#E);if(this.#k)this.#k.setAttribute("x1","0"),this.#k.setAttribute("y1",this.#E),this.#k.setAttribute("x2",this.#D),this.#k.setAttribute("y2","0");const Q=this.#m(0,0),$=this.#m(this.#Q.x,this.#Q.y),Z=this.#m(this.#Z.x,this.#Z.y),J=this.#m(1,1);if(this.#K.setAttribute("d",`M${Q.x},${Q.y} C${$.x},${$.y} ${Z.x},${Z.y} ${J.x},${J.y}`),this.#Y.setAttribute("x1",Q.x),this.#Y.setAttribute("y1",Q.y),this.#Y.setAttribute("x2",$.x),this.#Y.setAttribute("y2",$.y),this.#G.setAttribute("x1",J.x),this.#G.setAttribute("y1",J.y),this.#G.setAttribute("x2",Z.x),this.#G.setAttribute("y2",Z.y),this.#W.setAttribute("cx",$.x),this.#W.setAttribute("cy",$.y),this.#B.setAttribute("cx",Z.x),this.#B.setAttribute("cy",Z.y),this.#q)this.#q.setAttribute("cx",Q.x),this.#q.setAttribute("cy",Q.y);if(this.#L)this.#L.setAttribute("cx",J.x),this.#L.setAttribute("cy",J.y)}#e(){if(this.#A)this.#A.setAttribute("x","0"),this.#A.setAttribute("y","0"),this.#A.setAttribute("width",this.#D),this.#A.setAttribute("height",this.#E);const Q=this.#I();if(!Q.length)return;const $=Q[Q.length-1].t||1;let Z=0,J=1;for(let B of Q){if(B.value<Z)Z=B.value;if(B.value>J)J=B.value}const j=Math.max(Math.abs(Z-1),Math.abs(J-1),0.01),_=0;this.#d={minVal:1-j-_,maxVal:1+j+_,totalTime:$};const X=Math.max(0.05,Math.min(0.95,this.#F));let K="";for(let B=0;B<Q.length;B++){const M=Q[B].t/$*X,E=this.#H(M,Q[B].value);K+=(B===0?"M":"L")+E.x.toFixed(1)+","+E.y.toFixed(1)}const Y=this.#H(X,1),W=this.#H(1,1);if(K+=`L${Y.x.toFixed(1)},${Y.y.toFixed(1)} L${W.x.toFixed(1)},${W.y.toFixed(1)}`,this.#K.setAttribute("d",K),this.#O){const B=this.#H(0,1),M=this.#H(1,1);this.#O.setAttribute("x1",B.x),this.#O.setAttribute("y1",B.y),this.#O.setAttribute("x2",M.x),this.#O.setAttribute("y2",M.y)}const G=this.#QQ(Q),L=G.t/$*X,q=this.#H(L,G.value);this.#W.setAttribute("cx",q.x),this.#W.setAttribute("cy",q.y);const U=this.#H(X,1);this.#B.setAttribute("x",U.x-this.#R/2),this.#B.setAttribute("y",U.y-this.#g/2)}#QQ(Q){let $={t:0,value:1},Z=!1;for(let J of Q){if(J.value>=0.99)Z=!0;if(Z&&J.value>$.value)$={t:J.t,value:J.value}}return $}#o(){if(!this.#N)return;this.#N.value=this.#U,this.#M()}#t(Q,$,Z){if(!Q)return;for(let J of Q.querySelectorAll("option"))if(J.value===$)J.innerHTML=`${Z} ${$}`}#M(){if(!this.#N)return;const Q=D.curveIcon(this.#Q.x,this.#Q.y,this.#Z.x,this.#Z.y),$=D.#c(this.#$);this.#t(this.#N,"Custom bezier",Q),this.#t(this.#N,"Custom spring",$),this.#t(this.#N.select,"Custom bezier",Q),this.#t(this.#N.select,"Custom spring",$)}#y(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#X,value:this.value,cssValue:this.cssValue,preset:this.#U}}))}#ZQ(){if(this.#X==="bezier")this.#W.addEventListener("pointerdown",(Q)=>this.#$Q(Q,1)),this.#B.addEventListener("pointerdown",(Q)=>this.#$Q(Q,2));else{this.#W.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#a($,"bounce")}),this.#B.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#a($,"duration")});const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle"))return;this.#a($,"duration")})}if(this.#N)this.#N.addEventListener("change",(Q)=>{const $=Q.detail,Z=D.PRESETS.find((J)=>J.name===$);if(!Z)return;if(Z.type==="bezier"){if(Z.value)this.#Q.x=Z.value[0],this.#Q.y=Z.value[1],this.#Z.x=Z.value[2],this.#Z.y=Z.value[3];if(this.#U=$,this.#X!=="bezier")this.#X="bezier",this.#b();else this.#C()}else if(Z.type==="spring"){if(Z.spring)this.#$={...Z.spring};if(this.#U=$,this.#X!=="spring")this.#X="spring",this.#b();else this.#C()}this.#y("input"),this.#y("change")})}#JQ(Q){const $=this.#_.getScreenCTM();if(!$)return{x:0,y:0};const Z=$.inverse();return{x:Z.a*Q.clientX+Z.c*Q.clientY+Z.e,y:Z.b*Q.clientX+Z.d*Q.clientY+Z.f}}#$Q(Q,$){Q.preventDefault(),this.#J=$;const Z=(j)=>{if(!this.#J)return;const _=this.#JQ(j),X=this.#p(_.x,_.y);if(X.x=Math.round(X.x*100)/100,X.y=Math.round(X.y*100)/100,X.x=Math.max(0,Math.min(1,X.x)),this.#J===1)this.#Q.x=X.x,this.#Q.y=X.y;else this.#Z.x=X.x,this.#Z.y=X.y;this.#C(),this.#U=this.#x(),this.#o(),this.#y("input")},J=()=>{this.#J=null,document.removeEventListener("pointermove",Z),document.removeEventListener("pointerup",J),this.#y("change")};document.addEventListener("pointermove",Z),document.addEventListener("pointerup",J)}#a(Q,$){Q.preventDefault(),this.#J=$;const Z=this.#$.damping,J=this.#$.stiffness,j=this.#F,_=Q.clientY,X=Q.clientX,K=(W)=>{if(!this.#J)return;if($==="bounce"){const G=W.clientY-_;this.#$.damping=Math.max(1,Math.round(Z+G*0.15))}else{const G=W.clientX-X;this.#F=Math.max(0.05,Math.min(0.95,j+G/200)),this.#$.stiffness=Math.max(10,Math.round(J-G*1.5))}this.#C(),this.#U=this.#x(),this.#o(),this.#y("input")},Y=()=>{this.#J=null,document.removeEventListener("pointermove",K),document.removeEventListener("pointerup",Y),this.#y("change")};document.addEventListener("pointermove",K),document.addEventListener("pointerup",Y)}}customElements.define("fig-easing-curve",D);class t extends HTMLElement{constructor(){super();this.position={x:0.5,y:0.5},this.isDragging=!1,this.isShiftHeld=!1,this.plane=null,this.cursor=null,this.xInput=null,this.yInput=null,this.coordinates="screen",this.#Q=!1}#Q=!1;connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||3,this.precision=parseInt(this.precision),this.transform=this.getAttribute("transform")||1,this.transform=Number(this.transform),this.text=this.getAttribute("text")==="true",this.coordinates=this.getAttribute("coordinates")||"screen",this.#$(),this.#j(),this.#L(),this.#Q=!0})}#Z(Q){return this.coordinates==="math"?1-Q:Q}disconnectedCallback(){this.#J()}#$(){this.innerHTML=this.#X()}#X(){return`        
+          <div class="fig-input-joystick-plane-container" tabindex="0">
+            <div class="fig-input-joystick-plane">
+              <div class="fig-input-joystick-guides"></div>
+              <div class="fig-input-joystick-handle"></div>
+            </div>
+          </div>
+          ${this.text?`<fig-input-number
+                  name="x"
+                  step="1"
+                  value="${this.position.x*100}"
+                  min="0"
+                  max="100"
+                  units="%">
+                  <span slot="prepend">X</span>
+                </fig-input-number>
+                <fig-input-number
+                  name="y"
+                  step="1"
+                  min="0"
+                  max="100"
+                  value="${this.position.y*100}"
+                  units="%">
+                  <span slot="prepend">Y</span>
+                </fig-input-number>`:""}
+        `}#j(){if(this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector(".fig-input-joystick-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane.addEventListener("mousedown",this.#N.bind(this)),this.plane.addEventListener("touchstart",this.#U.bind(this)),window.addEventListener("keydown",this.#O.bind(this)),window.addEventListener("keyup",this.#F.bind(this)),this.text&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#_.bind(this)),this.yInput.addEventListener("input",this.#K.bind(this))}#J(){if(this.plane)this.plane.removeEventListener("mousedown",this.#N),this.plane.removeEventListener("touchstart",this.#U);if(window.removeEventListener("keydown",this.#O),window.removeEventListener("keyup",this.#F),this.text&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#_),this.yInput.removeEventListener("input",this.#K)}#_(Q){Q.stopPropagation(),this.position.x=Number(Q.target.value)/100,this.#L(),this.#B(),this.#q()}#K(Q){Q.stopPropagation(),this.position.y=Number(Q.target.value)/100,this.#L(),this.#B(),this.#q()}#Y(Q){if(!this.isShiftHeld)return Q;if(Q<0.1)return 0;if(Q>0.9)return 1;if(Q>0.4&&Q<0.6)return 0.5;return Q}#G(Q,$){if(!this.isShiftHeld)return{x:Q,y:$};if(Math.abs(Q-$)<0.1)return{x:(Q+$)/2,y:(Q+$)/2};if(Math.abs(1-Q-$)<0.1)return{x:Q,y:1-Q};return{x:Q,y:$}}#W(Q){const $=this.plane.getBoundingClientRect();let Z=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),J=Math.max(0,Math.min(1,(Q.clientY-$.top)/$.height)),j=this.coordinates==="math"?1-J:J;Z=this.#Y(Z),j=this.#Y(j);const _=this.#G(Z,j);this.position=_;const X=this.#Z(_.y);if(this.cursor.style.left=`${_.x*100}%`,this.cursor.style.top=`${X*100}%`,this.text&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(_.x*100)),this.yInput.setAttribute("value",Math.round(_.y*100));this.#B()}#B(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#q(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#L(){const Q=this.#Z(this.position.y);if(this.cursor)this.cursor.style.left=`${this.position.x*100}%`,this.cursor.style.top=`${Q*100}%`;if(this.text&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#N(Q){this.isDragging=!0,this.#W(Q),this.plane.style.cursor="grabbing";const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#W(J)},Z=()=>{this.isDragging=!1,this.plane.classList.remove("dragging"),this.plane.style.cursor="",window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",Z),this.#q()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",Z)}#U(Q){Q.preventDefault(),this.isDragging=!0,this.#W(Q.touches[0]);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#W(J.touches[0])},Z=()=>{this.isDragging=!1,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",Z),this.#q()};window.addEventListener("touchmove",$),window.addEventListener("touchend",Z)}#O(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#F(Q){if(Q.key==="Shift")this.isShiftHeld=!1}focus(){this.querySelector(".fig-input-joystick-plane-container")?.focus()}static get observedAttributes(){return["value","precision","transform","text","coordinates"]}get value(){return[Math.round(this.position.x*100),Math.round(this.position.y*100)]}set value(Q){const $=Q.toString().split(",").map((Z)=>{const J=parseFloat(Z.replace(/%/g,"").trim());return isNaN(J)?0.5:J/100});if(this.position={x:$[0]??0.5,y:$[1]??0.5},this.#Q)this.#L()}attributeChangedCallback(Q,$,Z){if(Q==="value"){if(this.isDragging)return;this.value=Z}if(Q==="precision")this.precision=parseInt(Z);if(Q==="transform")this.transform=Number(Z);if(Q==="text"&&Z!==$)this.text=Z.toLowerCase()==="true",this.#$();if(Q==="coordinates")this.coordinates=Z||"screen",this.#L()}}customElements.define("fig-input-joystick",t);class n extends HTMLElement{#Q;#Z;#$=null;#X;constructor(){super();this.angle=0,this.#Q=1,this.#Z=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="\xB0",this.min=null,this.max=null,this.showRotations=!1,this.rotationSpan=null,this.#X=this.#N.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let Q=this.getAttribute("units")||"\xB0";if(Q==="deg")Q="\xB0";if(this.units=Q,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.showRotations=this.getAttribute("show-rotations")==="true",this.#j(),this.#q(),this.#z(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#L()}#j(){this.innerHTML=this.#J()}#J(){const Q=this.#Y(),$=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
+        <div class="fig-input-angle-plane" tabindex="0">
+          <div class="fig-input-angle-handle"></div>
+        </div>
+        ${this.text?`<fig-input-number
+                name="angle"
+                step="${Q}"
+                value="${this.angle}"
+                ${$}
+                ${Z}
+                units="${this.units}">
+                ${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
+              </fig-input-number>`:""}
+    `}#_(){const Q=Math.abs(this.#G(this.angle));return Math.floor(Q/360)}#K(){if(!this.rotationSpan)return;const Q=this.#_();if(Q>1)this.rotationSpan.textContent=`\xD7${Q}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#Y(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#G(Q){switch(this.units){case"rad":return Q*180/Math.PI;case"turn":return Q*360;default:return Q}}#W(Q){switch(this.units){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#B(Q,$,Z){let J;switch($){case"rad":J=Q*180/Math.PI;break;case"turn":J=Q*360;break;default:J=Q}switch(Z){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#q(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#K(),this.plane.addEventListener("mousedown",this.#S.bind(this)),this.plane.addEventListener("touchstart",this.#T.bind(this)),window.addEventListener("keydown",this.#P.bind(this)),window.addEventListener("keyup",this.#R.bind(this)),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#U.bind(this));this.addEventListener("change",this.#X,!0)}#L(){if(this.plane?.removeEventListener("mousedown",this.#S),this.plane?.removeEventListener("touchstart",this.#T),window.removeEventListener("keydown",this.#P),window.removeEventListener("keyup",this.#R),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#U);this.removeEventListener("change",this.#X,!0)}#N(Q){if(!Q.target?.matches?.("input"))return;const Z=Q.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(Z){const J=parseFloat(Z[1]);let j=Z[2].toLowerCase();if(j==="deg")j="\xB0";if(j!==this.units){const _=this.#B(J,j,this.units);Q.target.value=String(_)}}}#U(Q){Q.stopPropagation(),this.angle=Number(Q.target.value),this.#O(),this.#z(),this.#K(),this.#A(),this.#k()}#O(){const $=this.#G(this.angle)*Math.PI/180;this.#Q=Math.cos($),this.#Z=Math.sin($)}#F(Q){if(!this.isShiftHeld)return Q;const $=45;return Math.round(Q/$)*$}#D(Q){const $=this.plane.getBoundingClientRect(),Z=$.left+$.width/2,J=$.top+$.height/2,j=Q.clientX-Z,_=Q.clientY-J;return Math.atan2(_,j)*180/Math.PI}#E(Q){let Z=(this.#D(Q)%360+360)%360;if(Z=this.#F(Z),this.min!==null||this.max!==null)this.angle=this.#W(Z);else if(this.#$===null){this.#$=Z;const _=(this.#G(this.angle)%360+360)%360;let X=Z-_;if(X>180)X-=360;if(X<-180)X+=360;this.angle+=this.#W(X)}else{let j=Z-this.#$;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#W(j),this.#$=Z}if(this.#O(),this.#z(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#K(),this.#A()}#A(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#z(){if(this.handle){const $=this.#G(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,J=Math.cos($)*Z,j=Math.sin($)*Z;this.handle.style.transform=`translate(${J}px, ${j}px)`}}#S(Q){this.isDragging=!0,this.#$=null,this.#E(Q);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#E(J)},Z=()=>{this.isDragging=!1,this.#$=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",Z),this.#k()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",Z)}#T(Q){Q.preventDefault(),this.isDragging=!0,this.#$=null,this.#E(Q.touches[0]);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#E(J.touches[0])},Z=()=>{this.isDragging=!1,this.#$=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",Z),this.#k()};window.addEventListener("touchmove",$),window.addEventListener("touchend",Z)}#P(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#R(Q){if(Q.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#Q}get opposite(){return this.#Z}set value(Q){if(isNaN(Q)){console.error("Invalid value: must be a number.");return}if(this.angle=Q,this.#O(),this.#z(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#K()}attributeChangedCallback(Q,$,Z){switch(Q){case"value":if(this.isDragging)break;this.value=Number(Z);break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==$){if(this.text=Z?.toLowerCase()==="true",this.plane)this.#j(),this.#q(),this.#z()}break;case"units":{let J=Z||"\xB0";if(J==="deg")J="\xB0";if(this.units=J,this.plane)this.#j(),this.#q(),this.#z();break}case"min":if(this.min=Z!==null?Number(Z):null,this.plane)this.#j(),this.#q(),this.#z();break;case"max":if(this.max=Z!==null?Number(Z):null,this.plane)this.#j(),this.#q(),this.#z();break;case"show-rotations":if(this.showRotations=Z==="true",this.plane)this.#j(),this.#q(),this.#z();break}}}customElements.define("fig-input-angle",n);class a extends HTMLElement{connectedCallback(){const Q=this.getAttribute("duration");if(Q)this.style.setProperty("--shimmer-duration",Q)}static get observedAttributes(){return["duration","playing"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,$,Z){if(Q==="duration")this.style.setProperty("--shimmer-duration",Z||"1.5s")}}customElements.define("fig-shimmer",a);class e extends HTMLElement{static get observedAttributes(){return["open","visible"]}#Q=null;#Z=null;connectedCallback(){requestAnimationFrame(()=>{this.#$()})}disconnectedCallback(){if(this.#Q&&this.#Z)this.#Q.removeEventListener("click",this.#Z)}#$(){const Q=this.querySelector(":scope > .fig-layer-row");if(!Q)return;if(Q.querySelector(".fig-layer-chevron"))return;this.#Q=document.createElement("span"),this.#Q.className="fig-layer-chevron",Q.prepend(this.#Q),this.#Z=this.#X.bind(this),this.#Q.addEventListener("click",this.#Z)}#X(Q){Q.stopPropagation(),this.open=!this.open}get open(){const Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){const $=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if($!==Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Q},bubbles:!0}))}get visible(){return this.getAttribute("visible")!=="false"}set visible(Q){const $=this.visible;if(Q)this.setAttribute("visible","true");else this.setAttribute("visible","false");if($!==Q)this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Q},bubbles:!0}))}attributeChangedCallback(Q,$,Z){if($===Z)return;if(Q==="open"){const J=Z!==null&&Z!=="false";this.dispatchEvent(new CustomEvent("openchange",{detail:{open:J},bubbles:!0}))}if(Q==="visible"){const J=Z!=="false";this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:J},bubbles:!0}))}}}customElements.define("fig-layer",e);class QQ extends HTMLElement{#Q=null;#Z=null;#$=null;#X="solid";anchorElement=null;#j="solid";#J={h:0,s:0,v:85,a:1};#_={type:"linear",angle:0,centerX:50,centerY:50,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#K={url:null,scaleMode:"fill",scale:50};#Y={url:null,scaleMode:"fill",scale:50};#G={stream:null,snapshot:null};#W={};#B={};#q=null;#L=null;#N=null;#U=null;#O=!1;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#F(),this.#D(),this.#E()})}disconnectedCallback(){if(this.#$)this.#$.close(),this.#$.remove()}#F(){const Q=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Q)this.#Z=document.createElement("fig-chit"),this.#Z.setAttribute("background","#D9D9D9"),this.appendChild(this.#Z),this.#Q=this.#Z;else if(Q.tagName==="FIG-CHIT")this.#Z=Q,this.#Q=Q;else this.#Q=Q,this.#Z=null;if(this.#Q.addEventListener("click",($)=>{if(this.hasAttribute("disabled"))return;$.stopPropagation(),$.preventDefault(),this.#k()}),this.#Z)requestAnimationFrame(()=>{const $=this.#Z.querySelector('input[type="color"]');if($)$.style.pointerEvents="none"})}#D(){const Q=this.getAttribute("value");if(!Q)return;const $=["solid","gradient","image","video","webcam"];try{const Z=JSON.parse(Q);if(Z.type)this.#j=Z.type;if(Z.color){if(typeof Z.color==="string")this.#J=this.#C(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#J=Z.color}if(Z.opacity!==void 0)this.#J.a=Z.opacity/100;if(Z.gradient)this.#_={...this.#_,...Z.gradient};if(Z.image)this.#K={...this.#K,...Z.image};if(Z.video)this.#Y={...this.#Y,...Z.video};if(Z.type&&!$.includes(Z.type)){const{type:J,...j}=Z;this.#B[Z.type]=j}}catch(Z){if(Q.startsWith("#"))this.#j="solid",this.#J=this.#C(Q)}}#E(){if(!this.#Z)return;let Q,$="cover",Z="center";switch(this.#j){case"solid":Q=this.#H(this.#J);break;case"gradient":Q=this.#b();break;case"image":if(this.#K.url){Q=`url(${this.#K.url})`;const j=this.#A(this.#K.scaleMode,this.#K.scale);$=j.size,Z=j.position}else Q="";break;case"video":if(this.#Y.url){Q=`url(${this.#Y.url})`;const j=this.#A(this.#Y.scaleMode,this.#Y.scale);$=j.size,Z=j.position}else Q="";break;default:Q=this.#W[this.#j]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#Z.setAttribute("background",Q),this.#Z.style.setProperty("--chit-bg-size",$),this.#Z.style.setProperty("--chit-bg-position",Z),this.#j==="solid")this.#Z.setAttribute("alpha",this.#J.a);else this.#Z.removeAttribute("alpha")}#A(Q,$){switch(Q){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"}}}#k(){if(!this.#$)this.#z();this.#S(this.#j),this.#$.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#P(),this.#R()})})}#z(){this.#W={},this.querySelectorAll('[slot^="mode-"]').forEach((q)=>{const U=q.getAttribute("slot").slice(5);this.#W[U]={element:q,label:q.getAttribute("label")||U.charAt(0).toUpperCase()+U.slice(1)}}),this.#$=document.createElement("dialog",{is:"fig-popup"}),this.#$.setAttribute("is","fig-popup"),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.#Q;const Q=this.getAttribute("dialog-position")||"left";this.#$.setAttribute("position",Q);const $=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},J=this.getAttribute("mode");let j;if(J){if(j=J.split(",").map((U)=>U.trim().toLowerCase()).filter((U)=>$.includes(U)||this.#W[U]),j.length===0)j=[...$]}else j=[...$];const _={...Z};for(let[q,{label:U}]of Object.entries(this.#W))_[q]=U;if(!j.includes(this.#j))this.#j=j[0],this.#X=j[0];const X=this.getAttribute("experimental"),K=X?`experimental="${X}"`:"";let Y;if(j.length===1)Y=`<h3 class="fig-fill-picker-type-label">${_[j[0]]}</h3>`;else{const q=j.map((U)=>`<option value="${U}">${_[U]}</option>`).join("\n          ");Y=`<fig-dropdown class="fig-fill-picker-type" ${K} value="${this.#j}">
+          ${q}
+        </fig-dropdown>`}const W=j.map((q)=>`<div class="fig-fill-picker-tab" data-tab="${q}"></div>`).join("\n        ");this.#$.innerHTML=`
+      <fig-header>
+        ${Y}
+        <fig-button icon variant="ghost" class="fig-fill-picker-close">
+          <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
+        </fig-button>
+      </fig-header>
+      <div class="fig-fill-picker-content">
+        ${W}
+      </div>
+    `,document.body.appendChild(this.#$);for(let[q,{element:U}]of Object.entries(this.#W)){const B=this.#$.querySelector(`[data-tab="${q}"]`);if(!B)continue;while(U.firstChild)B.appendChild(U.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:q,container:B}}))}const G=this.#$.querySelector(".fig-fill-picker-type");if(G)G.addEventListener("change",(q)=>{this.#S(q.target.value)});this.#$.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#$.open=!1}),this.#$.addEventListener("close",()=>{this.#y()});const L={solid:()=>this.#T(),gradient:()=>this.#s(),image:()=>this.#i(),video:()=>this.#l(),webcam:()=>this.#v()};for(let[q,U]of Object.entries(L))if(!this.#W[q]&&j.includes(q))U();for(let q of Object.keys(this.#W)){if($.includes(q))continue;const U=this.#$.querySelector(`[data-tab="${q}"]`);if(!U)continue;U.addEventListener("input",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#B[q]=B.detail;this.#M()}),U.addEventListener("change",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#B[q]=B.detail;this.#y()})}}#S(Q){if(!this.#$?.querySelector(`.fig-fill-picker-tab[data-tab="${Q}"]`))return;this.#X=Q,this.#j=Q;const Z=this.#$.querySelector(".fig-fill-picker-type");if(Z&&Z.value!==Q)Z.value=Q;this.#$.querySelectorAll(".fig-fill-picker-tab").forEach((_)=>{if(_.dataset.tab===Q)_.style.display="block";else _.style.display="none"});const j=this.#$.querySelector(".fig-fill-picker-content");if(j)j.style.padding=this.#W[Q]?"0":"";if(Q==="gradient")requestAnimationFrame(()=>{this.#x()});this.#E(),this.#M()}#T(){const Q=this.#$.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false";if(Q.innerHTML=`
+      <div class="fig-fill-picker-color-area">
+        <canvas width="200" height="200"></canvas>
+        <div class="fig-fill-picker-handle"></div>
+      </div>
+      <div class="fig-fill-picker-sliders">
+        <fig-slider type="hue" variant="neue" min="0" max="360" value="${this.#J.h}"></fig-slider>
+        ${$?`<fig-slider type="opacity" variant="neue" text="true" units="%" min="0" max="100" value="${this.#J.a*100}" color="${this.#H(this.#J)}"></fig-slider>`:""}
+      </div>
+      <div class="fig-fill-picker-inputs">
+        <fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" title="Pick color from screen"><span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"></span></fig-button>
+        <fig-input-color class="fig-fill-picker-color-input" text="true" picker="false" value="${this.#H(this.#J)}"></fig-input-color>
+      </div>
+    `,this.#q=Q.querySelector("canvas"),this.#L=Q.querySelector(".fig-fill-picker-handle"),this.#P(),this.#R(),this.#g(),this.#N=Q.querySelector('fig-slider[type="hue"]'),this.#N.addEventListener("input",(j)=>{this.#J.h=parseFloat(j.target.value),this.#P(),this.#R(),this.#V(),this.#M()}),this.#N.addEventListener("change",()=>{this.#y()}),$)this.#U=Q.querySelector('fig-slider[type="opacity"]'),this.#U.addEventListener("input",(j)=>{this.#J.a=parseFloat(j.target.value)/100,this.#V(),this.#M()}),this.#U.addEventListener("change",()=>{this.#y()});const Z=Q.querySelector(".fig-fill-picker-color-input");Z.addEventListener("input",(j)=>{if(this.#O)return;const _=j.target.value;if(this.#J={...this.#C(_),a:this.#J.a},this.#P(),this.#R(),this.#N)this.#N.setAttribute("value",this.#J.h);this.#M()}),Z.addEventListener("change",()=>{this.#y()});const J=Q.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)J.addEventListener("click",async()=>{try{const _=await new EyeDropper().open();this.#J={...this.#C(_.sRGBHex),a:this.#J.a},this.#P(),this.#R(),this.#V(),this.#M()}catch(j){}});else J.setAttribute("disabled",""),J.title="EyeDropper not supported in this browser"}#P(){if(!this.#q&&this.#$)this.#q=this.#$.querySelector('[data-tab="solid"] canvas');if(!this.#q)return;const Q=this.#q.getContext("2d");if(!Q)return;const $=this.#q.width,Z=this.#q.height;Q.clearRect(0,0,$,Z);const J=this.#J.h,j=Q.createLinearGradient(0,0,$,0);j.addColorStop(0,"#FFFFFF"),j.addColorStop(1,`hsl(${J}, 100%, 50%)`),Q.fillStyle=j,Q.fillRect(0,0,$,Z);const _=Q.createLinearGradient(0,0,0,Z);_.addColorStop(0,"rgba(0,0,0,0)"),_.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=_,Q.fillRect(0,0,$,Z)}#R(Q=0){if(!this.#L||!this.#q)return;const $=this.#q.getBoundingClientRect();if(($.width===0||$.height===0)&&Q<5){requestAnimationFrame(()=>this.#R(Q+1));return}const Z=this.#J.s/100*$.width,J=(100-this.#J.v)/100*$.height;this.#L.style.left=`${Z}px`,this.#L.style.top=`${J}px`,this.#L.style.setProperty("--picker-color",this.#H({...this.#J,a:1}))}#g(){if(!this.#q||!this.#L)return;const Q=($)=>{const Z=this.#q.getBoundingClientRect(),J=Math.max(0,Math.min($.clientX-Z.left,Z.width)),j=Math.max(0,Math.min($.clientY-Z.top,Z.height));this.#J.s=J/Z.width*100,this.#J.v=100-j/Z.height*100,this.#R(),this.#V(),this.#M()};this.#q.addEventListener("pointerdown",($)=>{this.#O=!0,this.#q.setPointerCapture($.pointerId),Q($)}),this.#q.addEventListener("pointermove",($)=>{if(this.#O)Q($)}),this.#q.addEventListener("pointerup",()=>{this.#O=!1,this.#y()}),this.#L.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#O=!0,this.#L.setPointerCapture($.pointerId)}),this.#L.addEventListener("pointermove",($)=>{if(this.#O)Q($)}),this.#L.addEventListener("pointerup",()=>{this.#O=!1,this.#y()})}#V(){if(!this.#$)return;const Q=this.#H(this.#J),$=this.#$.querySelector(".fig-fill-picker-color-input");if($)$.setAttribute("value",Q);if(this.#U)this.#U.setAttribute("color",Q);this.#E()}#s(){const Q=this.#$.querySelector('[data-tab="gradient"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
+      <div class="fig-fill-picker-gradient-header">
+        <fig-dropdown class="fig-fill-picker-gradient-type" ${Z} value="${this.#_.type}">
+          <option value="linear" selected>Linear</option>
+          <option value="radial">Radial</option>
+          <option value="angular">Angular</option>
+        </fig-dropdown>
+        <fig-tooltip text="Rotate gradient">
+          <fig-input-angle class="fig-fill-picker-gradient-angle" value="${(this.#_.angle-90+360)%360}"></fig-input-angle>
+        </fig-tooltip>
+        <div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
+          <fig-input-number min="0" max="100" value="${this.#_.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
+          <fig-input-number min="0" max="100" value="${this.#_.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
+        </div>
+        <fig-tooltip text="Flip gradient">
+          <fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip">
+            <span class="fig-mask-icon" style="--icon: var(--icon-swap)"></span>
+          </fig-button>
+        </fig-tooltip>
+      </div>
+      <div class="fig-fill-picker-gradient-preview">
+        <div class="fig-fill-picker-gradient-bar"></div>
+        <div class="fig-fill-picker-gradient-stops-handles"></div>
+      </div>
+      <div class="fig-fill-picker-gradient-stops">
+        <div class="fig-fill-picker-gradient-stops-header">
+          <span>Stops</span>
+          <fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" title="Add stop">
+            <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
+          </fig-button>
+        </div>
+        <div class="fig-fill-picker-gradient-stops-list"></div>
+      </div>
+    `,this.#x(),this.#w(Q)}#w(Q){Q.querySelector(".fig-fill-picker-gradient-type").addEventListener("change",(_)=>{this.#_.type=_.target.value,this.#x(),this.#M()}),Q.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(_)=>{const X=parseFloat(_.target.value)||0;this.#_.angle=(X+90)%360,this.#I(),this.#M()});const J=Q.querySelector(".fig-fill-picker-gradient-cx"),j=Q.querySelector(".fig-fill-picker-gradient-cy");J?.addEventListener("input",(_)=>{this.#_.centerX=parseFloat(_.target.value)||50,this.#I(),this.#M()}),j?.addEventListener("input",(_)=>{this.#_.centerY=parseFloat(_.target.value)||50,this.#I(),this.#M()}),Q.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#_.stops.forEach((_)=>{_.position=100-_.position}),this.#_.stops.sort((_,X)=>_.position-X.position),this.#x(),this.#M()}),Q.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#_.stops.push({position:50,color:"#888888",opacity:100}),this.#_.stops.sort((X,K)=>X.position-K.position),this.#x(),this.#M()})}#x(){if(!this.#$)return;const Q=this.#$.querySelector('[data-tab="gradient"]');if(!Q)return;const $=Q.querySelector(".fig-fill-picker-gradient-angle"),Z=Q.querySelector(".fig-fill-picker-gradient-center");if(this.#_.type==="radial")$.style.display="none",Z.style.display="flex";else{$.style.display="block",Z.style.display="none";const J=(this.#_.angle-90+360)%360;$.setAttribute("value",J)}this.#I(),this.#c()}#I(){if(!this.#$)return;const Q=this.#$.querySelector(".fig-fill-picker-gradient-bar");if(Q)Q.style.background=this.#b();this.#E()}#c(){if(!this.#$)return;const Q=this.#$.querySelector(".fig-fill-picker-gradient-stops-list");if(!Q)return;Q.innerHTML=this.#_.stops.map(($,Z)=>`
+      <div class="fig-fill-picker-gradient-stop-row" data-index="${Z}">
+        <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${$.position}" units="%"></fig-input-number>
+        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${$.color}"></fig-input-color>
+        <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#_.stops.length<=2?"disabled":""}>
+          <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
+        </fig-button>
+      </div>
+    `).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{const Z=parseInt($.dataset.index);$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(_)=>{this.#_.stops[Z].position=parseFloat(_.target.value)||0,this.#I(),this.#M()});const J=$.querySelector(".fig-fill-picker-stop-color"),j=J.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#$;else requestAnimationFrame(()=>{const _=J.querySelector("fig-fill-picker");if(_)_.anchorElement=this.#$});J.addEventListener("input",(_)=>{this.#_.stops[Z].color=_.target.hexOpaque||_.target.value;const X=parseFloat(_.target.alpha);this.#_.stops[Z].opacity=isNaN(X)?100:X,this.#I(),this.#M()}),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#_.stops.length>2)this.#_.stops.splice(Z,1),this.#x(),this.#M()})})}#b(){const Q=this.#_.stops.map(($)=>{return`${this.#n($.color,$.opacity/100)} ${$.position}%`}).join(", ");switch(this.#_.type){case"linear":return`linear-gradient(${this.#_.angle}deg, ${Q})`;case"radial":return`radial-gradient(circle at ${this.#_.centerX}% ${this.#_.centerY}%, ${Q})`;case"angular":return`conic-gradient(from ${this.#_.angle}deg, ${Q})`;default:return`linear-gradient(${this.#_.angle}deg, ${Q})`}}#i(){const Q=this.#$.querySelector('[data-tab="image"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
+      <div class="fig-fill-picker-media-header">
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${Z} value="${this.#K.scaleMode}">
+          <option value="fill" selected>Fill</option>
+          <option value="fit">Fit</option>
+          <option value="crop">Crop</option>
+          <option value="tile">Tile</option>
+        </fig-dropdown>
+        <fig-input-number class="fig-fill-picker-scale" min="1" max="200" value="${this.#K.scale}" units="%" style="display: none;"></fig-input-number>
+      </div>
+      <div class="fig-fill-picker-media-preview">
+        <div class="fig-fill-picker-checkerboard"></div>
+        <div class="fig-fill-picker-image-preview"></div>
+        <fig-button variant="overlay" class="fig-fill-picker-upload">
+          Upload from computer
+          <input type="file" accept="image/*" style="display: none;" />
+        </fig-button>
+      </div>
+    `,this.#r(Q)}#r(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),Z=Q.querySelector(".fig-fill-picker-scale"),J=Q.querySelector(".fig-fill-picker-upload"),j=Q.querySelector('input[type="file"]'),_=Q.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(K)=>{this.#K.scaleMode=K.target.value,Z.style.display=K.target.value==="tile"?"block":"none",this.#f(_),this.#E(),this.#M()}),Z.addEventListener("input",(K)=>{this.#K.scale=parseFloat(K.target.value)||100,this.#f(_),this.#E(),this.#M()}),J.addEventListener("click",()=>{j.click()}),j.addEventListener("change",(K)=>{const Y=K.target.files[0];if(Y){const W=new FileReader;W.onload=(G)=>{this.#K.url=G.target.result,this.#f(_),this.#E(),this.#M()},W.readAsDataURL(Y)}});const X=Q.querySelector(".fig-fill-picker-media-preview");X.addEventListener("dragover",(K)=>{K.preventDefault(),X.classList.add("dragover")}),X.addEventListener("dragleave",()=>{X.classList.remove("dragover")}),X.addEventListener("drop",(K)=>{K.preventDefault(),X.classList.remove("dragover");const Y=K.dataTransfer.files[0];if(Y&&Y.type.startsWith("image/")){const W=new FileReader;W.onload=(G)=>{this.#K.url=G.target.result,this.#f(_),this.#E(),this.#M()},W.readAsDataURL(Y)}})}#f(Q){const $=Q.closest(".fig-fill-picker-media-preview");if(!this.#K.url){Q.style.display="none",$?.classList.remove("has-media");return}switch(Q.style.display="block",$?.classList.add("has-media"),Q.style.backgroundImage=`url(${this.#K.url})`,Q.style.backgroundPosition="center",this.#K.scaleMode){case"fill":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"fit":Q.style.backgroundSize="contain",Q.style.backgroundRepeat="no-repeat";break;case"crop":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"tile":Q.style.backgroundSize=`${this.#K.scale}%`,Q.style.backgroundRepeat="repeat",Q.style.backgroundPosition="top left";break}}#u(Q){switch(Q.style.objectPosition="center",Q.style.width="100%",Q.style.height="100%",this.#Y.scaleMode){case"fill":case"crop":Q.style.objectFit="cover";break;case"fit":Q.style.objectFit="contain";break}}#l(){const Q=this.#$.querySelector('[data-tab="video"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
+      <div class="fig-fill-picker-media-header">
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${Z} value="${this.#Y.scaleMode}">
+          <option value="fill" selected>Fill</option>
+          <option value="fit">Fit</option>
+          <option value="crop">Crop</option>
+        </fig-dropdown>
+      </div>
+      <div class="fig-fill-picker-media-preview">
+        <div class="fig-fill-picker-checkerboard"></div>
+        <video class="fig-fill-picker-video-preview" style="display: none;" muted loop></video>
+        <fig-button variant="overlay" class="fig-fill-picker-upload">
+          Upload from computer
+          <input type="file" accept="video/*" style="display: none;" />
+        </fig-button>
+      </div>
+    `,this.#h(Q)}#h(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),Z=Q.querySelector(".fig-fill-picker-upload"),J=Q.querySelector('input[type="file"]'),j=Q.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(X)=>{this.#Y.scaleMode=X.target.value,this.#u(j),this.#E(),this.#M()}),Z.addEventListener("click",()=>{J.click()});const _=Q.querySelector(".fig-fill-picker-media-preview");J.addEventListener("change",(X)=>{const K=X.target.files[0];if(K)this.#Y.url=URL.createObjectURL(K),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#u(j),this.#E(),this.#M()}),_.addEventListener("dragover",(X)=>{X.preventDefault(),_.classList.add("dragover")}),_.addEventListener("dragleave",()=>{_.classList.remove("dragover")}),_.addEventListener("drop",(X)=>{X.preventDefault(),_.classList.remove("dragover");const K=X.dataTransfer.files[0];if(K&&K.type.startsWith("video/"))this.#Y.url=URL.createObjectURL(K),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#u(j),this.#E(),this.#M()})}#v(){const Q=this.#$.querySelector('[data-tab="webcam"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
+      <div class="fig-fill-picker-webcam-preview">
+        <div class="fig-fill-picker-checkerboard"></div>
+        <video class="fig-fill-picker-webcam-video" autoplay muted playsinline></video>
+        <div class="fig-fill-picker-webcam-status">
+          <span>Camera access required</span>
+        </div>
+      </div>
+      <div class="fig-fill-picker-webcam-controls">
+        <fig-dropdown class="fig-fill-picker-camera-select" ${Z} style="display: none;">
+        </fig-dropdown>
+        <fig-button class="fig-fill-picker-webcam-capture" variant="primary">
+          Capture
+        </fig-button>
+      </div>
+    `,this.#m(Q)}#m(Q){const $=Q.querySelector(".fig-fill-picker-webcam-video"),Z=Q.querySelector(".fig-fill-picker-webcam-status"),J=Q.querySelector(".fig-fill-picker-webcam-capture"),j=Q.querySelector(".fig-fill-picker-camera-select"),_=async(K=null)=>{try{const Y={video:K?{deviceId:{exact:K}}:!0};if(this.#G.stream)this.#G.stream.getTracks().forEach((L)=>L.stop());this.#G.stream=await navigator.mediaDevices.getUserMedia(Y),$.srcObject=this.#G.stream,$.style.display="block",Z.style.display="none";const G=(await navigator.mediaDevices.enumerateDevices()).filter((L)=>L.kind==="videoinput");if(G.length>1)j.style.display="block",j.innerHTML=G.map((L,q)=>`<option value="${L.deviceId}">${L.label||`Camera ${q+1}`}</option>`).join("")}catch(Y){console.error("Webcam error:",Y.name,Y.message);let W="Camera access denied";if(Y.name==="NotAllowedError")W="Camera permission denied";else if(Y.name==="NotFoundError")W="No camera found";else if(Y.name==="NotReadableError")W="Camera in use by another app";else if(Y.name==="OverconstrainedError")W="Camera constraints not supported";else if(!window.isSecureContext)W="Camera requires secure context";Z.innerHTML=`<span>${W}</span>`,Z.style.display="flex",$.style.display="none"}};new MutationObserver(()=>{if(Q.style.display!=="none"&&!this.#G.stream)_()}).observe(Q,{attributes:!0,attributeFilter:["style"]}),j.addEventListener("change",(K)=>{_(K.target.value)}),J.addEventListener("click",()=>{if(!this.#G.stream)return;const K=document.createElement("canvas");K.width=$.videoWidth,K.height=$.videoHeight,K.getContext("2d").drawImage($,0,0),this.#G.snapshot=K.toDataURL("image/png"),this.#K.url=this.#G.snapshot,this.#j="image",this.#E(),this.#M(),this.#S("image");const Y=this.#$.querySelector("fig-tabs");Y.value="image"})}#p(Q){const $=Q.h/360,Z=Q.s/100,J=Q.v/100;let j,_,X;const K=Math.floor($*6),Y=$*6-K,W=J*(1-Z),G=J*(1-Y*Z),L=J*(1-(1-Y)*Z);switch(K%6){case 0:j=J,_=L,X=W;break;case 1:j=G,_=J,X=W;break;case 2:j=W,_=J,X=L;break;case 3:j=W,_=G,X=J;break;case 4:j=L,_=W,X=J;break;case 5:j=J,_=W,X=G;break}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(X*255)}}#d(Q){const $=Q.r/255,Z=Q.g/255,J=Q.b/255,j=Math.max($,Z,J),_=Math.min($,Z,J),X=j-_;let K=0;const Y=j===0?0:X/j,W=j;if(j!==_){switch(j){case $:K=(Z-J)/X+(Z<J?6:0);break;case Z:K=(J-$)/X+2;break;case J:K=($-Z)/X+4;break}K/=6}return{h:K*360,s:Y*100,v:W*100,a:1}}#H(Q){if(!Q||typeof Q.h!=="number"||typeof Q.s!=="number"||typeof Q.v!=="number")return"#D9D9D9";const $=this.#p(Q),Z=(J)=>{return(isNaN(J)?217:Math.max(0,Math.min(255,Math.round(J)))).toString(16).padStart(2,"0")};return`#${Z($.r)}${Z($.g)}${Z($.b)}`}#C(Q){const $=parseInt(Q.slice(1,3),16),Z=parseInt(Q.slice(3,5),16),J=parseInt(Q.slice(5,7),16);return this.#d({r:$,g:Z,b:J})}#n(Q,$=1){const Z=parseInt(Q.slice(1,3),16),J=parseInt(Q.slice(3,5),16),j=parseInt(Q.slice(5,7),16);return`rgba(${Z}, ${J}, ${j}, ${$})`}#e(Q){const $=Q.r/255,Z=Q.g/255,J=Q.b/255,j=Math.max($,Z,J),_=Math.min($,Z,J);let X,K;const Y=(j+_)/2;if(j===_)X=K=0;else{const W=j-_;switch(K=Y>0.5?W/(2-j-_):W/(j+_),j){case $:X=((Z-J)/W+(Z<J?6:0))/6;break;case Z:X=((J-$)/W+2)/6;break;case J:X=(($-Z)/W+4)/6;break}}return{h:X*360,s:K*100,l:Y*100}}#QQ(Q){const $=Q.h/360,Z=Q.s/100,J=Q.l/100;let j,_,X;if(Z===0)j=_=X=J;else{const K=(G,L,q)=>{if(q<0)q+=1;if(q>1)q-=1;if(q<0.16666666666666666)return G+(L-G)*6*q;if(q<0.5)return L;if(q<0.6666666666666666)return G+(L-G)*(0.6666666666666666-q)*6;return G},Y=J<0.5?J*(1+Z):J+Z-J*Z,W=2*J-Y;j=K(W,Y,$+0.3333333333333333),_=K(W,Y,$),X=K(W,Y,$-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(X*255)}}#o(Q){const $=(L)=>{return L=L/255,L<=0.04045?L/12.92:Math.pow((L+0.055)/1.055,2.4)},Z=$(Q.r),J=$(Q.g),j=$(Q.b),_=0.4122214708*Z+0.5363325363*J+0.0514459929*j,X=0.2119034982*Z+0.6806995451*J+0.1073969566*j,K=0.0883024619*Z+0.2817188376*J+0.6299787005*j,Y=Math.cbrt(_),W=Math.cbrt(X),G=Math.cbrt(K);return{l:0.2104542553*Y+0.793617785*W-0.0040720468*G,a:1.9779984951*Y-2.428592205*W+0.4505937099*G,b:0.0259040371*Y+0.7827717662*W-0.808675766*G}}#t(Q){const $=this.#o(Q);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#M(){this.#E(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#y(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){const Q={type:this.#j};switch(this.#j){case"solid":return{...Q,color:this.#H(this.#J),alpha:this.#J.a,hsv:{...this.#J}};case"gradient":return{...Q,gradient:{...this.#_},css:this.#b()};case"image":return{...Q,image:{...this.#K}};case"video":return{...Q,video:{...this.#Y}};case"webcam":return{...Q,image:{url:this.#G.snapshot,scaleMode:"fill",scale:50}};default:return{...Q,...this.#B[this.#j]}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,Z){if($===Z)return;switch(Q){case"value":if(this.#D(),this.#E(),this.#$){if(!this.#O){if(this.#R(),this.#V(),this.#N)this.#N.setAttribute("value",this.#J.h);if(this.#U)this.#U.setAttribute("value",this.#J.a*100),this.#U.setAttribute("color",this.#H(this.#J))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",QQ);