@rogieking/figui3 3.9.2 → 3.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +36 -3
  2. package/components.css +618 -300
  3. package/dist/fig.js +137 -80
  4. package/fig.js +1824 -291
  5. package/package.json +1 -1
package/dist/fig.js CHANGED
@@ -1,4 +1,4 @@
1
- var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @ungap/custom-elements-builtin@0.6.5 (ISC). */(function(Q,$,J){if(Q.importNode.length!=1||$.get("ungap-li"))return;var Z="extends";try{var _={};_[Z]="li";var j=HTMLLIElement,K=function(){return Reflect.construct(j,[],K)};if(K.prototype=J.create(j.prototype),$.define("ungap-li",K,_),!/is="ungap-li"/.test(new K().outerHTML))throw _}catch(q){(function(){var X="attributeChangedCallback",W="connectedCallback",L="disconnectedCallback",U=Element.prototype,G=J.assign,N=J.create,B=J.defineProperties,M=J.getOwnPropertyDescriptor,R=J.setPrototypeOf,H=$.define,D=$.get,k=$.upgrade,T=$.whenDefined,C=N(null),y=new WeakMap,S={childList:!0,subtree:!0};Reflect.ownKeys(self).filter(function(Y){return typeof Y=="string"&&/^HTML(?!Element)/.test(Y)}).forEach(function(Y){function O(){}var A=self[Y];R(O,A),(O.prototype=A.prototype).constructor=O,A={},A[Y]={value:O},B(self,A)}),new MutationObserver(d).observe(Q,S),o(Document.prototype,"importNode"),o(Node.prototype,"cloneNode"),B($,{define:{value:function(Y,O,A){if(Y=Y.toLowerCase(),A&&Z in A){C[Y]=G({},A,{Class:O});var F=A[Z]+'[is="'+Y+'"]',E=Q.querySelectorAll(F);for(var P=0,z=E.length;P<z;P++)w(E[P])}else H.apply($,arguments)}},get:{value:function(Y){return Y in C?C[Y].Class:D.call($,Y)}},upgrade:{value:function(Y){var O=g(Y);if(O&&!(Y instanceof O.Class))r(Y,O);else k.call($,Y)}},whenDefined:{value:function(Y){return Y in C?Promise.resolve():T.call($,Y)}}});var I=Q.createElement;B(Q,{createElement:{value:function(Y,O){var A=I.call(Q,Y);if(O&&"is"in O)A.setAttribute("is",O.is),$.upgrade(A);return A}}});var S0=M(U,"attachShadow").value,u=M(U,"innerHTML");B(U,{attachShadow:{value:function(){var Y=S0.apply(this,arguments);return new MutationObserver(d).observe(Y,S),Y}},innerHTML:{get:u.get,set:function(Y){if(u.set.call(this,Y),/\bis=("|')?[a-z0-9_-]+\1/i.test(Y))b(this,w)}}});function d(Y){for(var O=0,A=Y.length;O<A;O++){var F=Y[O],E=F.addedNodes,P=F.removedNodes;for(var z=0,v=E.length;z<v;z++)w(E[z]);for(var m=0,y0=P.length;m<y0;m++)i(P[m])}}function s(Y){for(var O=0,A=Y.length;O<A;O++){var F=Y[O],E=F.attributeName,P=F.oldValue,z=F.target,v=z.getAttribute(E);if(X in z&&!(P==v&&v==null))z[X](E,P,z.getAttribute(E),null)}}function i(Y){if(Y.nodeType!==1)return;var O=g(Y);if(O&&Y instanceof O.Class&&L in Y&&y.get(Y)!==L)y.set(Y,L),Promise.resolve(Y).then(I0);b(Y,i)}function g(Y){var O=Y.getAttribute("is");if(O){if(O=O.toLowerCase(),O in C)return C[O]}return null}function f0(Y){Y[W]()}function I0(Y){Y[L]()}function r(Y,O){var A=O.Class,F=A.observedAttributes||[];if(R(Y,A.prototype),F.length){new MutationObserver(s).observe(Y,{attributes:!0,attributeFilter:F,attributeOldValue:!0});var E=[];for(var P=0,z=F.length;P<z;P++)E.push({attributeName:F[P],oldValue:null,target:Y});s(E)}}function w(Y){if(Y.nodeType!==1)return;var O=g(Y);if(O){if(!(Y instanceof O.Class))r(Y,O);if(W in Y&&Y.isConnected&&y.get(Y)!==W)y.set(Y,W),Promise.resolve(Y).then(f0)}b(Y,w)}function b(Y,O){for(var A=Y.content,F=(A&&A.nodeType==11?A:Y).querySelectorAll("[is]"),E=0,P=F.length;E<P;E++)O(F[E])}function o(Y,O){var A=Y[O],F={};F[O]={value:function(){var E=A.apply(this,arguments);switch(E.nodeType){case 1:case 11:b(E,w)}return E}},B(Y,F)}})()}})(document,customElements,Object)});function w0(){if(typeof navigator==="undefined")return!1;const Q=navigator.userAgent||"",$=/\b(iPad|iPhone|iPod)\b/.test(Q)||/\bMacintosh\b/.test(Q)&&/\bMobile\b/.test(Q),J=/\bAppleWebKit\b/.test(Q)&&!/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser)\b/.test(Q);return $||J}function b0(){if(typeof window==="undefined"||!window.customElements||typeof HTMLButtonElement==="undefined")return!1;const Q=`fig-builtin-probe-${Math.random().toString(36).slice(2)}`;class $ extends HTMLButtonElement{}try{return customElements.define(Q,$,{extends:"button"}),document.createElement("button",{is:Q})instanceof $}catch(J){return!1}}function c(Q,$,J){const Z=()=>{if(!customElements.get(Q))customElements.define(Q,$,J)};if(!t){Z();return}v0.then(Z).catch((_)=>{console.error(`[figui3] Failed to load customized built-in polyfill for "${Q}".`,_)})}function V(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function a(){let Q=1000;const $=document.querySelectorAll("*");for(let J of $){const Z=parseInt(getComputedStyle(J).zIndex,10);if(!isNaN(Z)&&Z>Q)Q=Z}return Q}var t=w0()&&!b0(),v0=(t?Promise.resolve().then(() => (l(),V0)):Promise.resolve()).then(()=>{}).catch((Q)=>{throw Q});class n extends HTMLElement{type;#Q;constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
1
+ var h0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var g0={};var a=h0(()=>{/*! Vendored from @ungap/custom-elements-builtin@0.6.5 (ISC). */(function(Q,$,J){if(Q.importNode.length!=1||$.get("ungap-li"))return;var Z="extends";try{var j={};j[Z]="li";var _=HTMLLIElement,K=function(){return Reflect.construct(_,[],K)};if(K.prototype=J.create(_.prototype),$.define("ungap-li",K,j),!/is="ungap-li"/.test(new K().outerHTML))throw j}catch(q){(function(){var X="attributeChangedCallback",W="connectedCallback",Y="disconnectedCallback",U=Element.prototype,L=J.assign,F=J.create,N=J.defineProperties,B=J.getOwnPropertyDescriptor,O=J.setPrototypeOf,H=$.define,D=$.get,R=$.upgrade,E=$.whenDefined,z=F(null),x=new WeakMap,f={childList:!0,subtree:!0};Reflect.ownKeys(self).filter(function(G){return typeof G=="string"&&/^HTML(?!Element)/.test(G)}).forEach(function(G){function M(){}var A=self[G];O(M,A),(M.prototype=A.prototype).constructor=M,A={},A[G]={value:M},N(self,A)}),new MutationObserver(r).observe(Q,f),n(Document.prototype,"importNode"),n(Node.prototype,"cloneNode"),N($,{define:{value:function(G,M,A){if(G=G.toLowerCase(),A&&Z in A){z[G]=L({},A,{Class:M});var k=A[Z]+'[is="'+G+'"]',T=Q.querySelectorAll(k);for(var P=0,C=T.length;P<C;P++)b(T[P])}else H.apply($,arguments)}},get:{value:function(G){return G in z?z[G].Class:D.call($,G)}},upgrade:{value:function(G){var M=m(G);if(M&&!(G instanceof M.Class))t(G,M);else R.call($,G)}},whenDefined:{value:function(G){return G in z?Promise.resolve():E.call($,G)}}});var y=Q.createElement;N(Q,{createElement:{value:function(G,M){var A=y.call(Q,G);if(M&&"is"in M)A.setAttribute("is",M.is),$.upgrade(A);return A}}});var V0=B(U,"attachShadow").value,i=B(U,"innerHTML");N(U,{attachShadow:{value:function(){var G=V0.apply(this,arguments);return new MutationObserver(r).observe(G,f),G}},innerHTML:{get:i.get,set:function(G){if(i.set.call(this,G),/\bis=("|')?[a-z0-9_-]+\1/i.test(G))v(this,b)}}});function r(G){for(var M=0,A=G.length;M<A;M++){var k=G[M],T=k.addedNodes,P=k.removedNodes;for(var C=0,h=T.length;C<h;C++)b(T[C]);for(var c=0,v0=P.length;c<v0;c++)l(P[c])}}function o(G){for(var M=0,A=G.length;M<A;M++){var k=G[M],T=k.attributeName,P=k.oldValue,C=k.target,h=C.getAttribute(T);if(X in C&&!(P==h&&h==null))C[X](T,P,C.getAttribute(T),null)}}function l(G){if(G.nodeType!==1)return;var M=m(G);if(M&&G instanceof M.Class&&Y in G&&x.get(G)!==Y)x.set(G,Y),Promise.resolve(G).then(b0);v(G,l)}function m(G){var M=G.getAttribute("is");if(M){if(M=M.toLowerCase(),M in z)return z[M]}return null}function w0(G){G[W]()}function b0(G){G[Y]()}function t(G,M){var A=M.Class,k=A.observedAttributes||[];if(O(G,A.prototype),k.length){new MutationObserver(o).observe(G,{attributes:!0,attributeFilter:k,attributeOldValue:!0});var T=[];for(var P=0,C=k.length;P<C;P++)T.push({attributeName:k[P],oldValue:null,target:G});o(T)}}function b(G){if(G.nodeType!==1)return;var M=m(G);if(M){if(!(G instanceof M.Class))t(G,M);if(W in G&&G.isConnected&&x.get(G)!==W)x.set(G,W),Promise.resolve(G).then(w0)}v(G,b)}function v(G,M){for(var A=G.content,k=(A&&A.nodeType==11?A:G).querySelectorAll("[is]"),T=0,P=k.length;T<P;T++)M(k[T])}function n(G,M){var A=G[M],k={};k[M]={value:function(){var T=A.apply(this,arguments);switch(T.nodeType){case 1:case 11:v(T,b)}return T}},N(G,k)}})()}})(document,customElements,Object)});function m0(){if(typeof navigator==="undefined")return!1;const Q=navigator.userAgent||"",$=/\b(iPad|iPhone|iPod)\b/.test(Q)||/\bMacintosh\b/.test(Q)&&/\bMobile\b/.test(Q),J=/\bAppleWebKit\b/.test(Q)&&!/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser)\b/.test(Q);return $||J}function c0(){if(typeof window==="undefined"||!window.customElements||typeof HTMLButtonElement==="undefined")return!1;const Q=`fig-builtin-probe-${Math.random().toString(36).slice(2)}`;class $ extends HTMLButtonElement{}try{return customElements.define(Q,$,{extends:"button"}),document.createElement("button",{is:Q})instanceof $}catch(J){return!1}}function p(Q,$,J){const Z=()=>{if(!customElements.get(Q))customElements.define(Q,$,J)};if(!e){Z();return}p0.then(Z).catch((j)=>{console.error(`[figui3] Failed to load customized built-in polyfill for "${Q}".`,j)})}function w(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function Q0(){let Q=1000;const $=document.querySelectorAll("*");for(let J of $){const Z=parseInt(getComputedStyle(J).zIndex,10);if(!isNaN(Z)&&Z>Q)Q=Z}return Q}function S(Q){const $={...Q??{}};let J=String($.interpolationSpace??"oklab").toLowerCase();if(!u0.includes(J))J="oklab";if(J==="srgb"||J==="display-p3")J="oklab";$.interpolationSpace=J;const Z=String($.hueInterpolation??"shorter").toLowerCase();return $.hueInterpolation=s0.includes(Z)?Z:"shorter",$}function u(Q){const $=S(Q),J={...$,interpolationSpace:$.interpolationSpace};if($.interpolationSpace==="oklch")J.hueInterpolation=$.hueInterpolation;else delete J.hueInterpolation;return J}function d0(Q){const $=S(Q);if($.interpolationSpace==="oklch")return`in oklch ${$.hueInterpolation} hue`;return`in ${$.interpolationSpace}`}function i0(Q,$,J){return r0(Q,$,J).map((j)=>+(j/255).toFixed(4))}function r0(Q,$,J){$/=100,J/=100;const Z=(1-Math.abs(2*J-1))*$,j=Z*(1-Math.abs(Q/60%2-1)),_=J-Z/2;let K,q,X;if(Q<60)K=Z,q=j,X=0;else if(Q<120)K=j,q=Z,X=0;else if(Q<180)K=0,q=Z,X=j;else if(Q<240)K=0,q=j,X=Z;else if(Q<300)K=j,q=0,X=Z;else K=Z,q=0,X=j;return[Math.round((K+_)*255),Math.round((q+_)*255),Math.round((X+_)*255)]}var e=m0()&&!c0(),p0=(e?Promise.resolve().then(() => (a(),g0)):Promise.resolve()).then(()=>{}).catch((Q)=>{throw Q});class $0 extends HTMLElement{type;#Q;constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
2
2
  <style>
3
3
  button, button:hover, button:active {
4
4
  padding: 0 var(--spacer-2);
@@ -32,7 +32,7 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
32
32
  <button type="${this.type}">
33
33
  <slot></slot>
34
34
  </button>
35
- `,this.#Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#J.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)}#J(){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,$,J){if(this.button)switch(this.button[Q]=J,Q){case"disabled":this.disabled=this.button.disabled=J!==null&&J!=="false";break;case"type":this.type=J,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#Q=J==="true";break}}}customElements.define("fig-button",n);class e extends HTMLElement{#Q="Menu";#J=null;#$;#_;#K=!1;#Z=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.#W.bind(this),this.#_=this.#U.bind(this)}#j(){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}}#X(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#j()){this.#K=!1;return}const J=document.createElement("button");J.setAttribute("type","button"),J.setAttribute("aria-hidden","true");const Z=document.createElement("selectedcontent");J.appendChild(Z),this.select.appendChild(J),this.#K=!0,this.#Z=Z}#q(){if(!this.#Z)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#Z.textContent="";return}this.#Z.innerHTML=Q.innerHTML}#G(){this.select.addEventListener("input",this.#$),this.select.addEventListener("change",this.#_)}#Y(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#L(){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.#X(),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.#B(this.value),this.#q(),this.type==="dropdown")this.select.selectedIndex=-1}#W(Q){const $=Q.target.selectedOptions?.[0];if(this.#Y($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#L();return}const J=Q.target.value;if(this.type==="dropdown")this.#J=J;this.setAttribute("value",J),this.#q(),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0}))}#U(Q){const $=Q.target.selectedOptions?.[0];if(this.#Y($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#L();return}const J=this.type==="dropdown"?this.#J:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#q(),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#J;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#J=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#B(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,J)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=J});this.#q()}attributeChangedCallback(Q,$,J){if(Q==="value")this.#B(J);if(Q==="type")this.type=J;if(Q==="experimental")this.slotChange();if(Q==="label")this.#Q=J,this.select.setAttribute("aria-label",this.#Q)}}customElements.define("fig-dropdown",e);class x extends HTMLElement{static#Q=0;static#J=500;#$;#_;#K;#Z=!1;#j=null;#X=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#$=this.#N.bind(this),this.#_=this.hidePopupOutsideClick.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#$,!0),this.#Y(),this.action==="click")document.body.removeEventListener("click",this.#_);if(clearTimeout(this.#K),this.action==="hover")this.removeEventListener("touchstart",this.#W),this.removeEventListener("touchmove",this.#U),this.removeEventListener("touchend",this.#B),this.removeEventListener("touchcancel",this.#O);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 $=V();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 J=this.closest("dialog");if(J&&J.open)J.append(this.popup);else document.body.append(this.popup);const Z=Q.childNodes[0];if(Z){const _=document.createRange();_.setStartBefore(Z),_.setEndAfter(Z);const j=_.getBoundingClientRect();Q.style.width=`${j.width}px`}}destroy(){if(this.#Y(),this.popup)this.popup.remove();if(this.action==="click")document.body.removeEventListener("click",this.#_)}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.#L.bind(this));this.addEventListener("touchstart",this.#W.bind(this),{passive:!0}),this.addEventListener("touchmove",this.#U.bind(this),{passive:!0}),this.addEventListener("touchend",this.#B.bind(this),{passive:!0}),this.addEventListener("touchcancel",this.#O.bind(this),{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.showDelayedPopup.bind(this)),document.body.addEventListener("click",this.#_),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[J,Z,_,j]=$.split(",").map(Number);return{left:isNaN(J)?Q.left:J,top:isNaN(Z)?Q.top:Z,right:isNaN(_)?Q.right:_,bottom:isNaN(j)?Q.bottom:j}}showDelayedPopup(){this.render(),clearTimeout(this.timeout);const $=Date.now()-x.#Q<x.#J?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){this.#q(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.display="block",this.popup.style.pointerEvents="all",this.popup.style.zIndex=a()+1,this.isOpen=!0,x.#Q=Date.now(),this.#G()}#q(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),J=this.getOffset();let Z=Q.top-$.height-J.top,_=Q.left+(Q.width-$.width)/2;if(this.popup.setAttribute("position","top"),Z<0)this.popup.setAttribute("position","bottom"),Z=Q.bottom+J.bottom;if(_<J.left)_=J.left;else if(_+$.width>window.innerWidth-J.right)_=window.innerWidth-$.width-J.right;const q=Q.left+Q.width/2-_;this.popup.style.setProperty("--beak-offset",`${q}px`),this.popup.style.top=`${Z}px`,this.popup.style.left=`${_}px`}hidePopup(){if(clearTimeout(this.timeout),clearTimeout(this.#K),this.#Y(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,x.#Q=Date.now()}#G(){this.#Y();const Q=this.firstElementChild;if(!Q)return;this.#j=new MutationObserver(()=>{if(this.#X)cancelAnimationFrame(this.#X);this.#X=requestAnimationFrame(()=>{this.#q()})}),this.#j.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#Y(){if(this.#X)cancelAnimationFrame(this.#X),this.#X=null;if(this.#j)this.#j.disconnect(),this.#j=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#L(Q){if(!this.#Z)this.hidePopup()}#W(Q){if(this.action==="hover")this.#Z=!0,clearTimeout(this.#K),this.showDelayedPopup()}#U(Q){if(this.action==="hover"&&this.#Z)clearTimeout(this.#K),this.#K=setTimeout(()=>{this.#Z=!1,this.hidePopup()},150)}#B(Q){if(this.action==="hover"&&this.#Z)clearTimeout(this.#K),this.#K=setTimeout(()=>{this.#Z=!1,this.hidePopup()},300)}#O(Q){if(this.action==="hover"&&this.#Z)this.#Z=!1,clearTimeout(this.#K),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,$,J){if(Q==="action")this.action=J;if(Q==="delay"){let Z=parseInt(J);this.delay=!isNaN(Z)?Z:500}if(Q==="open")if(J==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()})}#N(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",x);class Q0 extends HTMLDialogElement{#Q=!1;#J=!1;#$={x:0,y:0};#_={x:0,y:0};#K;#Z;#j;#X=16;#q=!1;#G=3;constructor(){super();this.#K=this.#O.bind(this),this.#Z=this.#N.bind(this),this.#j=this.#M.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#Y(),this.#W(),this.#L()})}disconnectedCallback(){this.#U()}#Y(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.close),Q.addEventListener("click",this.close.bind(this))})}#L(){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"),J=Q.includes("bottom"),Z=Q.includes("left"),_=Q.includes("right"),j=Q.includes("center")&&!$&&!J,K=Q.includes("center")&&!Z&&!_;if($)this.style.top=`${this.#X}px`;else if(J)this.style.bottom=`${this.#X}px`;else if(j)this.style.top="0",this.style.bottom="0";if(Z)this.style.left=`${this.#X}px`;else if(_)this.style.right=`${this.#X}px`;else if(K)this.style.left="0",this.style.right="0";if(j&&K)this.style.margin="auto";else if(j)this.style.marginTop="auto",this.style.marginBottom="auto";else if(K)this.style.marginLeft="auto",this.style.marginRight="auto";this.#q=!0}#W(){if(this.drag){this.addEventListener("pointerdown",this.#K);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#U(){this.removeEventListener("pointerdown",this.#K),document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#j)}#B(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(j)=>$.some((K)=>j.matches?.(K))||j.tagName?.startsWith("FIG-")&&!J.includes(j.tagName);if(Z(Q))return!0;let _=Q.parentElement;while(_&&_!==this){if(Z(_))return!0;_=_.parentElement}return!1}#O(Q){if(!this.drag)return;if(this.#B(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this.#J=!0,this.#$.x=Q.clientX,this.#$.y=Q.clientY;const J=this.getBoundingClientRect();this.#_.x=Q.clientX-J.left,this.#_.y=Q.clientY-J.top,document.addEventListener("pointermove",this.#Z),document.addEventListener("pointerup",this.#j)}#N(Q){if(this.#J&&!this.#Q){const $=Math.abs(Q.clientX-this.#$.x),J=Math.abs(Q.clientY-this.#$.y);if($>this.#G||J>this.#G){this.#Q=!0,this.#J=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.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}px`,this.style.top=`${Q.clientY-this.#_.y}px`,Q.preventDefault()}#M(Q){if(this.#Q)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#Q=!1,this.#J=!1,document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#j),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,J){if(Q==="drag")if(this.drag=J!==null&&J!=="false",this.drag)this.#W();else{this.#U();const Z=this.querySelector("fig-header, header");if(Z)Z.style.cursor=""}if(Q==="position"&&this.#q)this.#L()}}c("fig-dialog",Q0,{extends:"dialog"});class $0 extends HTMLDialogElement{_anchorObserver=null;_contentObserver=null;_mutationObserver=null;_anchorTrackRAF=null;_lastAnchorRect=null;_isPopupActive=!1;_boundReposition;_boundScroll;_boundOutsidePointerDown;_rafId=null;_anchorRef=null;_isDragging=!1;_dragPending=!1;_dragStartPos={x:0,y:0};_dragOffset={x:0,y:0};_dragThreshold=3;_boundPointerDown;_boundPointerMove;_boundPointerUp;_wasDragged=!1;constructor(){super();this._boundReposition=this.queueReposition.bind(this),this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()},this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this),this._boundPointerDown=this.handlePointerDown.bind(this),this._boundPointerMove=this.handlePointerMove.bind(this),this._boundPointerUp=this.handlePointerUp.bind(this)}ensureInitialized(){if(typeof this._anchorObserver==="undefined")this._anchorObserver=null;if(typeof this._contentObserver==="undefined")this._contentObserver=null;if(typeof this._mutationObserver==="undefined")this._mutationObserver=null;if(typeof this._anchorTrackRAF==="undefined")this._anchorTrackRAF=null;if(typeof this._lastAnchorRect==="undefined")this._lastAnchorRect=null;if(typeof this._isPopupActive==="undefined")this._isPopupActive=!1;if(typeof this._rafId==="undefined")this._rafId=null;if(typeof this._anchorRef==="undefined")this._anchorRef=null;if(typeof this._isDragging==="undefined")this._isDragging=!1;if(typeof this._dragPending==="undefined")this._dragPending=!1;if(typeof this._dragStartPos==="undefined")this._dragStartPos={x:0,y:0};if(typeof this._dragOffset==="undefined")this._dragOffset={x:0,y:0};if(typeof this._dragThreshold!=="number")this._dragThreshold=3;if(typeof this._wasDragged==="undefined")this._wasDragged=!1;if(typeof this._boundReposition!=="function")this._boundReposition=this.queueReposition.bind(this);if(typeof this._boundScroll!=="function")this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()};if(typeof this._boundOutsidePointerDown!=="function")this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this);if(typeof this._boundPointerDown!=="function")this._boundPointerDown=this.handlePointerDown.bind(this);if(typeof this._boundPointerMove!=="function")this._boundPointerMove=this.handlePointerMove.bind(this);if(typeof this._boundPointerUp!=="function")this._boundPointerUp=this.handlePointerUp.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._anchorRef??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this._anchorRef=Q;else if(typeof Q==="string")this._anchorRef=null,this.setAttribute("anchor",Q);else this._anchorRef=null;if(this.open)this.queueReposition()}connectedCallback(){if(this.ensureInitialized(),!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.teardownObservers(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.setupDragListeners()}),this.open)this.showPopup();else this.hidePopup()}disconnectedCallback(){if(this.ensureInitialized(),this.teardownObservers(),this.removeDragListeners(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._rafId!==null)cancelAnimationFrame(this._rafId),this._rafId=null}attributeChangedCallback(Q,$,J){if(this.ensureInitialized(),$===J)return;if(Q==="open"){if(J===null||J==="false"){this.hidePopup();return}this.showPopup();return}if(Q==="drag"){if(this.drag=J!==null&&J!=="false",this.drag)this.setupDragListeners();else this.removeDragListeners();return}if(this.open)this.queueReposition(),this.setupObservers()}showPopup(){if(this._isPopupActive){this.queueReposition();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(a()+1),!super.open)try{this.show()}catch($){}this.setupObservers(),document.addEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._wasDragged=!1,this.queueReposition(),this._isPopupActive=!0;const Q=this.resolveAnchor();if(Q)Q.classList.add("has-popup-open")}hidePopup(){const Q=this.resolveAnchor();if(Q)Q.classList.remove("has-popup-open");if(this._isPopupActive=!1,this._wasDragged=!1,this.teardownObservers(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}setupObservers(){this.teardownObservers();const Q=this.resolveAnchor();if(Q&&"ResizeObserver"in window)this._anchorObserver=new ResizeObserver(this._boundReposition),this._anchorObserver.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this._contentObserver=new ResizeObserver(this._boundReposition),this._contentObserver.observe(this);this._mutationObserver=new MutationObserver(this._boundReposition),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this._boundReposition),window.addEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.startAnchorTracking()}teardownObservers(){if(this._anchorObserver)this._anchorObserver.disconnect(),this._anchorObserver=null;if(this._contentObserver)this._contentObserver.disconnect(),this._contentObserver=null;if(this._mutationObserver)this._mutationObserver.disconnect(),this._mutationObserver=null;window.removeEventListener("resize",this._boundReposition),window.removeEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.stopAnchorTracking()}readRectSnapshot(Q){if(!Q)return null;const $=Q.getBoundingClientRect();return{x:$.x,y:$.y,width:$.width,height:$.height}}hasRectChanged(Q,$,J=0.25){if(!Q&&!$)return!1;if(!Q||!$)return!0;return Math.abs(Q.x-$.x)>J||Math.abs(Q.y-$.y)>J||Math.abs(Q.width-$.width)>J||Math.abs(Q.height-$.height)>J}startAnchorTracking(){if(this.stopAnchorTracking(),!this.open)return;const Q=()=>{if(!this.open){this._anchorTrackRAF=null;return}const $=this.resolveAnchor(),J=this.readRectSnapshot($),Z=this.shouldAutoReposition();if(Z&&this.hasRectChanged(this._lastAnchorRect,J))this._lastAnchorRect=J,this.queueReposition();else if(!Z)this._lastAnchorRect=J;this._anchorTrackRAF=requestAnimationFrame(Q)};this._lastAnchorRect=this.readRectSnapshot(this.resolveAnchor()),this._anchorTrackRAF=requestAnimationFrame(Q)}stopAnchorTracking(){if(this._anchorTrackRAF!==null)cancelAnimationFrame(this._anchorTrackRAF),this._anchorTrackRAF=null;this._lastAnchorRect=null}handleOutsidePointerDown(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const J=Q.target;if(!(J instanceof Node))return;if(this.contains(J))return;const Z=this.resolveAnchor();if(Z&&Z.contains(J))return;if(this.isInsideDescendantPopup(J))return;this.open=!1}isInsideDescendantPopup(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let J=$;const Z=new Set;while(J&&!Z.has(J)){Z.add(J);const _=J.anchor;if(!(_ instanceof Element))break;if(this.contains(_))return!0;J=_.closest?.('dialog[is="fig-popup"]')}return!1}setupDragListeners(){if(this.drag)this.addEventListener("pointerdown",this._boundPointerDown)}removeDragListeners(){this.removeEventListener("pointerdown",this._boundPointerDown),document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp)}isInteractiveElement(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["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"],Z=(j)=>$.some((K)=>j.matches?.(K))||j.tagName?.startsWith("FIG-")&&!J.includes(j.tagName);if(Z(Q))return!0;let _=Q.parentElement;while(_&&_!==this){if(Z(_))return!0;_=_.parentElement}return!1}handlePointerDown(Q){if(!this.drag)return;if(this.isInteractiveElement(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this._dragPending=!0,this._dragStartPos.x=Q.clientX,this._dragStartPos.y=Q.clientY;const J=this.getBoundingClientRect();this._dragOffset.x=Q.clientX-J.left,this._dragOffset.y=Q.clientY-J.top,document.addEventListener("pointermove",this._boundPointerMove),document.addEventListener("pointerup",this._boundPointerUp)}handlePointerMove(Q){if(this._dragPending&&!this._isDragging){const $=Math.abs(Q.clientX-this._dragStartPos.x),J=Math.abs(Q.clientY-this._dragStartPos.y);if($>this._dragThreshold||J>this._dragThreshold){this._isDragging=!0,this._dragPending=!1,this._wasDragged=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this._isDragging)return;this.style.left=`${Q.clientX-this._dragOffset.x}px`,this.style.top=`${Q.clientY-this._dragOffset.y}px`,Q.preventDefault()}handlePointerUp(Q){if(this._isDragging)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this._isDragging=!1,this._dragPending=!1,document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),Q.preventDefault()}resolveAnchor(){if(this._anchorRef)return this._anchorRef;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const J=$.querySelector(Q);if(J&&!this.contains(J))return J}return document.querySelector(Q)}parsePosition(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),J=new Set(["top","center","bottom"]),Z=new Set(["left","center","right"]);let _="top",j="center",K=null;if($.length>=2){if(J.has($[0]))_=$[0];if(Z.has($[1]))j=$[1];return{vertical:_,horizontal:j,shorthand:K}}if($.length===1){const q=$[0];if(q==="top"||q==="bottom")_=q,K=q;else if(q==="left"||q==="right")j=q,K=q;else if(q==="center")_="center",j="center"}return{vertical:_,horizontal:j,shorthand:K}}normalizeOffsetToken(Q,$="0px"){if(!Q)return $;const J=Q.trim();if(!J)return $;if(/^-?\d+(\.\d+)?$/.test(J))return`${J}px`;return J}measureLengthPx(Q,$="x"){if(!Q)return 0;const J=this.normalizeOffsetToken(Q,"0px");if(J.endsWith("px")){const j=parseFloat(J);return Number.isFinite(j)?j:0}const Z=document.createElement("div");if(Z.style.position="fixed",Z.style.visibility="hidden",Z.style.pointerEvents="none",Z.style.left="0",Z.style.top="0",Z.style.margin="0",Z.style.padding="0",Z.style.border="0",$==="x")Z.style.width=J,Z.style.height="0";else Z.style.height=J,Z.style.width="0";document.body.appendChild(Z);const _=Z.getBoundingClientRect();return Z.remove(),$==="x"?_.width:_.height}parseOffset(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),J=this.normalizeOffsetToken($[0],"0px"),Z=this.normalizeOffsetToken($[1],"0px");return{xToken:J,yToken:Z,xPx:this.measureLengthPx(J,"x"),yPx:this.measureLengthPx(Z,"y")}}parseViewportMargins(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((Z)=>!Number.isNaN(Z));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]}}getPlacementCandidates(Q,$,J){const Z={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(J){const j=J==="left"||J==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:J},{v:Q,h:$,s:Z[J]},{v:Q,h:$,s:j[0]},{v:Q,h:$,s:j[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:Z[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:Z[$],s:null},{v:"bottom",h:Z[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:Z[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:Z[Q],h:"left",s:null},{v:Z[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:Z[Q],h:$,s:null},{v:Q,h:Z[$],s:null},{v:Z[Q],h:Z[$],s:null}]}computeCoords(Q,$,J,Z,_,j){let K,q;if(j==="left"||j==="right")return q=j==="left"?Q.left-$.width-_.xPx:Q.right+_.xPx,K=Q.top,{top:K,left:q};if(j==="top"||j==="bottom")return K=j==="top"?Q.top-$.height-_.yPx:Q.bottom+_.yPx,q=Q.left,{top:K,left:q};if(J==="top")K=Q.top-$.height-_.yPx;else if(J==="bottom")K=Q.bottom+_.yPx;else K=Q.top+(Q.height-$.height)/2;if(J==="center")if(Z==="left")q=Q.left-$.width-_.xPx;else if(Z==="right")q=Q.right+_.xPx;else q=Q.left+(Q.width-$.width)/2;else if(Z==="left")q=Q.left+_.xPx;else if(Z==="right")q=Q.right-$.width-_.xPx;else q=Q.left+(Q.width-$.width)/2;return{top:K,left:q}}oppositeSide(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}getPlacementSide(Q,$,J){if(J==="top")return"top";if(J==="bottom")return"bottom";if(J==="left")return"left";if(J==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}updatePopoverBeak(Q,$,J,Z,_){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const j=this.oppositeSide(_);this.setAttribute("data-beak-side",j);const K=Q.left+Q.width/2,q=Q.top+Q.height/2,X=this.getBoundingClientRect(),W=X.width>0&&X.height>0?X:$,L=W.left,U=W.top,G=10;let N;if(j==="top"||j==="bottom"){N=K-L;const B=G,M=Math.max(B,W.width-G);N=Math.min(M,Math.max(B,N))}else{N=q-U;const B=G,M=Math.max(B,W.height-G);N=Math.min(M,Math.max(B,N))}this.style.setProperty("--beak-offset",`${N}px`)}overflowScore(Q,$,J){const{innerWidth:Z,innerHeight:_}=window,j=Q.left+$.width,K=Q.top+$.height,q=Math.max(0,J.left-Q.left),X=Math.max(0,J.top-Q.top),W=Math.max(0,j-(Z-J.right)),L=Math.max(0,K-(_-J.bottom));return q+X+W+L}fits(Q,$,J){return this.overflowScore(Q,$,J)===0}clamp(Q,$,J){const{left:Z,top:_}=J,j=Math.max(J.left,window.innerWidth-$.width-J.right),K=Math.max(J.top,window.innerHeight-$.height-J.bottom);return{left:Math.min(j,Math.max(Z,Q.left)),top:Math.min(K,Math.max(_,Q.top))}}positionPopup(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.parseOffset(),{vertical:J,horizontal:Z,shorthand:_}=this.parsePosition(),j=this.resolveAnchor(),K=this.parseViewportMargins();if(!j){this.updatePopoverBeak(null,Q,0,0,"top");const N={left:K.left+(window.innerWidth-K.right-K.left-Q.width)/2,top:K.top+(window.innerHeight-K.bottom-K.top-Q.height)/2},B=this.clamp(N,Q,K);this.style.left=`${B.left}px`,this.style.top=`${B.top}px`;return}const q=j.getBoundingClientRect(),X=this.getPlacementCandidates(J,Z,_);let W=null,L="top",U=Number.POSITIVE_INFINITY;for(let{v:N,h:B,s:M}of X){const R=this.computeCoords(q,Q,N,B,$,M),H=this.getPlacementSide(N,B,M);if(M){const D=this.clamp(R,Q,K);if(M==="left"||M==="right"?R.left>=K.left&&R.left+Q.width<=window.innerWidth-K.right:R.top>=K.top&&R.top+Q.height<=window.innerHeight-K.bottom){this.style.left=`${D.left}px`,this.style.top=`${D.top}px`,this.updatePopoverBeak(q,Q,D.left,D.top,H);return}const T=this.overflowScore(R,Q,K);if(T<U)U=T,W=D,L=H}else{if(this.fits(R,Q,K)){this.style.left=`${R.left}px`,this.style.top=`${R.top}px`,this.updatePopoverBeak(q,Q,R.left,R.top,H);return}const D=this.overflowScore(R,Q,K);if(D<U)U=D,W=R,L=H}}const G=this.clamp(W||{left:0,top:0},Q,K);this.style.left=`${G.left}px`,this.style.top=`${G.top}px`,this.updatePopoverBeak(q,Q,G.left,G.top,L)}queueReposition(){if(!this.open||!this.shouldAutoReposition())return;if(this._rafId!==null)return;this._rafId=requestAnimationFrame(()=>{this._rafId=null,this.positionPopup()})}shouldAutoReposition(){if(!(this.drag&&this._wasDragged))return!0;return!this.resolveAnchor()}}c("fig-popup",$0,{extends:"dialog"});class J0 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,$,J){if(Q==="selected"){if(this.#Q=J!==null&&J!=="false",this.setAttribute("aria-selected",this.#Q?"true":"false"),this?.content)this.content.style.display=this.#Q?"block":"none"}}}customElements.define("fig-tab",J0);class Z0 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.#J.bind(this)),requestAnimationFrame(()=>{const Q=this.getAttribute("value");if(Q)this.#$(Q);if(this.hasAttribute("disabled"))this.#Q(!0)})}#Q(Q){this.querySelectorAll("fig-tab").forEach((J)=>{if(Q)J.setAttribute("disabled",""),J.setAttribute("aria-disabled","true"),J.setAttribute("tabindex","-1");else J.removeAttribute("disabled"),J.removeAttribute("aria-disabled"),J.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.#J)}#J(Q){const $=Array.from(this.querySelectorAll("fig-tab")),J=$.findIndex((_)=>_.hasAttribute("selected"));let Z=J;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),Z=J>0?J-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),Z=J<$.length-1?J+1:0;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;default:return}if(Z!==J&&$[Z])$.forEach((_)=>_.removeAttribute("selected")),this.selectedTab=$[Z],this.setAttribute("value",$[Z].getAttribute("value")||""),$[Z].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#$(Q){const $=this.querySelectorAll("fig-tab");for(let J of $)if(J.getAttribute("value")===Q)this.selectedTab=J,J.setAttribute("selected","true");else J.removeAttribute("selected")}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(J!==$)this.#$(J);break;case"disabled":this.#Q(J!==null&&J!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const J=this.querySelectorAll("fig-tab");for(let Z of J)if(Z===$)this.selectedTab=Z,Z.setAttribute("selected","true"),this.setAttribute("value",Z.getAttribute("value")||"");else Z.removeAttribute("selected")}}}customElements.define("fig-tabs",Z0);class _0 extends HTMLElement{#Q;#J;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.#J}set selected(Q){this.#J=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,J){switch(Q){case"value":this.#Q=J;break;case"selected":this.#J=J;break}}}customElements.define("fig-segment",_0);class j0 extends HTMLElement{#Q=null;#J=this.handleClick.bind(this);#$=null;#_=null;#K=0;#Z=!1;#j=!1;constructor(){super()}static get observedAttributes(){return["disabled","value","animated","sizing"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.#J),this.#k(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#M(),this.#B(),requestAnimationFrame(()=>{this.#N({enforceFallback:!0}),this.#O(),this.#W({forceInstant:!0})})}disconnectedCallback(){if(this.removeEventListener("click",this.#J),this.#$?.disconnect(),this.#$=null,this.#_?.disconnect(),this.#_=null,this.#K)cancelAnimationFrame(this.#K),this.#K=0;this.#Z=!1,this.#j=!1}get selectedSegment(){return this.#Q}set selectedSegment(Q){const $=this.querySelectorAll("fig-segment");for(let J of $){const Z=J===Q,_=J.hasAttribute("selected");if(Z&&!_)J.setAttribute("selected","true");else if(!Z&&_)J.removeAttribute("selected")}this.#Q=Q instanceof HTMLElement&&this.contains(Q)?Q:null,this.#W()}get value(){return this.getAttribute("value")||""}set value(Q){if(Q===null||Q===void 0){this.removeAttribute("value");return}this.setAttribute("value",String(Q))}#X(Q){this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#q(Q){const $=Q.getAttribute("value");if($!==null){const J=$.trim();if(J.length>0)return J}return Q.textContent?.trim()||""}#G(){const Q=this.querySelectorAll("fig-segment");for(let $ of Q)if($.hasAttribute("selected"))return $;return null}#Y(Q){const $=String(Q??"").trim();if(!$)return!1;const J=this.querySelectorAll("fig-segment");for(let Z of J){const _=this.#q(Z);if(!_)continue;if(_===$)return this.selectedSegment=Z,!0}return!1}#L(){const Q=this.getAttribute("animated");if(Q===null)return!1;if(Q==="")return!0;return Q.trim().toLowerCase()==="true"}#W({forceInstant:Q=!1}={}){if(this.#Z=this.#Z||Q,this.#K)return;this.#K=requestAnimationFrame(()=>{this.#K=0;const $=this.#Z;this.#Z=!1,this.#U({forceInstant:$})})}#U({forceInstant:Q=!1}={}){const $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#L(),Z=this.#Q&&this.contains(this.#Q)?this.#Q:this.#G();if($||!J){if(this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready"),!J||$)this.#j=!1;return}if(!Z){if(this.#j)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const _=this.getBoundingClientRect(),j=Z.getBoundingClientRect();if(_.width<=0||j.width<=0){if(this.#j)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const K=Math.max(0,j.left-_.left);this.style.setProperty("--seg-indicator-x",`${K}px`),this.style.setProperty("--seg-indicator-w",`${j.width}px`),this.style.setProperty("--seg-indicator-opacity","1"),this.style.setProperty("--seg-indicator-transition-duration",!this.#j||Q?"0ms":"150ms"),this.setAttribute("data-indicator-ready","true"),this.#j=!0}#B(){this.#_?.disconnect(),this.#_=new ResizeObserver(()=>{this.#W()}),this.#O()}#O(){if(!this.#_)return;this.#_.disconnect(),this.#_.observe(this),this.querySelectorAll("fig-segment").forEach((Q)=>{this.#_?.observe(Q)})}#N({enforceFallback:Q=!1}={}){const $=this.querySelectorAll("fig-segment");if($.length===0){this.#Q=null,this.#W({forceInstant:!0});return}const J=this.getAttribute("value"),Z=J?.trim()??"";if(J!==null){if(Z!==J){this.setAttribute("value",Z);return}if(Z&&this.#Y(Z))return}const _=this.#G();if(_){this.selectedSegment=_;return}if(Q)this.selectedSegment=$[0]}#M(){this.#$?.disconnect(),this.#$=new MutationObserver((Q)=>{let $=!1;for(let J of Q){if(J.type==="childList"){$=!0;break}if(J.type==="attributes"&&J.target instanceof HTMLElement&&J.target.tagName.toLowerCase()==="fig-segment"&&(J.attributeName==="value"||J.attributeName==="selected")){$=!0;break}if(J.type==="characterData"){$=!0;break}}if($)this.#k(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#O(),this.#N({enforceFallback:!0})}),this.#$.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","selected"]})}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if(!$||!this.contains($))return;const J=this.selectedSegment,Z=this.value;this.selectedSegment=$;const _=this.#q($);if(_)this.setAttribute("value",_);else this.removeAttribute("value");const j=this.value;if(J!==$||Z!==j)this.#X(j)}#k(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,$,J){if($===J)return;if(Q==="disabled"){this.#k(J!==null&&J!=="false"),this.#W({forceInstant:!0});return}if(Q==="value"){this.#N({enforceFallback:!1});return}if(Q==="animated"){if(!this.#L())this.#j=!1;this.#W({forceInstant:!0});return}if(Q==="sizing")this.#W({forceInstant:!0})}}customElements.define("fig-segmented-control",j0);class K0 extends HTMLElement{#Q=!1;#J=!1;#$={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"}};#_;#K;#Z;#j;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#_=(Q)=>{Q.stopPropagation(),this.#M()},this.#K=(Q)=>{Q.stopPropagation(),this.#k()},this.#Z=(Q)=>{Q.stopPropagation(),this.#q()},this.#j=(Q)=>{Q.stopPropagation(),this.#D()}}#X(){const Q=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.hasAttribute("text")&&this.getAttribute("text")!=="false",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,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";const $=this.#$[this.type];if(this.min=Number(this.getAttribute("min")||$.min),this.max=Number(this.getAttribute("max")||$.max),this.step=Number(this.getAttribute("step")||$.step),this.color=this.getAttribute("color")||$?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#J=Q===null||typeof Q==="string"&&Q.trim()==="",this.value=this.#B(Q),this.color)this.style.setProperty("--color",this.color);let J="",Z=`<div class="fig-slider-input-container" role="group">
35
+ `,this.#Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#J.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)}#J(){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,$,J){if(this.button)switch(this.button[Q]=J,Q){case"disabled":this.disabled=this.button.disabled=J!==null&&J!=="false";break;case"type":this.type=J,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#Q=J==="true";break}}}customElements.define("fig-button",$0);class J0 extends HTMLElement{#Q="Menu";#J=null;#$;#Z;#q=!1;#K=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.#U.bind(this),this.#Z=this.#O.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}}#W(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#_()){this.#q=!1;return}const J=document.createElement("button");J.setAttribute("type","button"),J.setAttribute("aria-hidden","true");const Z=document.createElement("selectedcontent");J.appendChild(Z),this.select.appendChild(J),this.#q=!0,this.#K=Z}#j(){if(!this.#K)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#K.textContent="";return}this.#K.innerHTML=Q.innerHTML}#X(){this.select.addEventListener("input",this.#$),this.select.addEventListener("change",this.#Z)}#Y(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#G(){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.#X()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.#W(),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.#L(this.value),this.#j(),this.type==="dropdown")this.select.selectedIndex=-1}#U(Q){const $=Q.target.selectedOptions?.[0];if(this.#Y($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#G();return}const J=Q.target.value;if(this.type==="dropdown")this.#J=J;this.setAttribute("value",J),this.#j(),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0}))}#O(Q){const $=Q.target.selectedOptions?.[0];if(this.#Y($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#G();return}const J=this.type==="dropdown"?this.#J:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#j(),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#J;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#J=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#L(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,J)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=J});this.#j()}attributeChangedCallback(Q,$,J){if(Q==="value")this.#L(J);if(Q==="type")this.type=J;if(Q==="experimental")this.slotChange();if(Q==="label")this.#Q=J,this.select.setAttribute("aria-label",this.#Q)}}customElements.define("fig-dropdown",J0);class V extends HTMLElement{static#Q=0;static#J=500;#$;#Z;#q;#K=!1;#_=null;#W=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#$=this.#N.bind(this),this.#Z=this.hidePopupOutsideClick.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#$,!0),this.#Y(),this.action==="click")document.body.removeEventListener("click",this.#Z);if(clearTimeout(this.#q),this.action==="hover")this.removeEventListener("touchstart",this.#U),this.removeEventListener("touchmove",this.#O),this.removeEventListener("touchend",this.#L),this.removeEventListener("touchcancel",this.#M);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 $=w();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 J=this.closest("dialog");if(J&&J.open)J.append(this.popup);else document.body.append(this.popup);const Z=Q.childNodes[0];if(Z){const j=document.createRange();j.setStartBefore(Z),j.setEndAfter(Z);const _=j.getBoundingClientRect();Q.style.width=`${_.width}px`}}destroy(){if(this.#Y(),this.popup)this.popup.remove();if(this.action==="click")document.body.removeEventListener("click",this.#Z)}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.#G.bind(this));this.addEventListener("touchstart",this.#U.bind(this),{passive:!0}),this.addEventListener("touchmove",this.#O.bind(this),{passive:!0}),this.addEventListener("touchend",this.#L.bind(this),{passive:!0}),this.addEventListener("touchcancel",this.#M.bind(this),{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.showDelayedPopup.bind(this)),document.body.addEventListener("click",this.#Z),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[J,Z,j,_]=$.split(",").map(Number);return{left:isNaN(J)?Q.left:J,top:isNaN(Z)?Q.top:Z,right:isNaN(j)?Q.right:j,bottom:isNaN(_)?Q.bottom:_}}showDelayedPopup(){this.render(),clearTimeout(this.timeout);const $=Date.now()-V.#Q<V.#J?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){this.#j(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.display="block",this.popup.style.pointerEvents="all",this.popup.style.zIndex=Q0()+1,this.isOpen=!0,V.#Q=Date.now(),this.#X()}#j(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),J=this.getOffset();let Z=Q.top-$.height-J.top,j=Q.left+(Q.width-$.width)/2;if(this.popup.setAttribute("position","top"),Z<0)this.popup.setAttribute("position","bottom"),Z=Q.bottom+J.bottom;if(j<J.left)j=J.left;else if(j+$.width>window.innerWidth-J.right)j=window.innerWidth-$.width-J.right;const q=Q.left+Q.width/2-j;this.popup.style.setProperty("--beak-offset",`${q}px`),this.popup.style.top=`${Z}px`,this.popup.style.left=`${j}px`}hidePopup(){if(clearTimeout(this.timeout),clearTimeout(this.#q),this.#Y(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,V.#Q=Date.now()}#X(){this.#Y();const Q=this.firstElementChild;if(!Q)return;this.#_=new MutationObserver(()=>{if(this.#W)cancelAnimationFrame(this.#W);this.#W=requestAnimationFrame(()=>{this.#j()})}),this.#_.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#Y(){if(this.#W)cancelAnimationFrame(this.#W),this.#W=null;if(this.#_)this.#_.disconnect(),this.#_=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#G(Q){if(!this.#K)this.hidePopup()}#U(Q){if(this.action==="hover")this.#K=!0,clearTimeout(this.#q),this.showDelayedPopup()}#O(Q){if(this.action==="hover"&&this.#K)clearTimeout(this.#q),this.#q=setTimeout(()=>{this.#K=!1,this.hidePopup()},150)}#L(Q){if(this.action==="hover"&&this.#K)clearTimeout(this.#q),this.#q=setTimeout(()=>{this.#K=!1,this.hidePopup()},300)}#M(Q){if(this.action==="hover"&&this.#K)this.#K=!1,clearTimeout(this.#q),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,$,J){if(Q==="action")this.action=J;if(Q==="delay"){let Z=parseInt(J);this.delay=!isNaN(Z)?Z:500}if(Q==="open")if(J==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()})}#N(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",V);class Z0 extends HTMLDialogElement{#Q=!1;#J=!1;#$={x:0,y:0};#Z={x:0,y:0};#q;#K;#_;#W=16;#j=!1;#X=3;constructor(){super();this.#q=this.#M.bind(this),this.#K=this.#N.bind(this),this.#_=this.#B.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#Y(),this.#U(),this.#G()})}disconnectedCallback(){this.#O()}#Y(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.close),Q.addEventListener("click",this.close.bind(this))})}#G(){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"),J=Q.includes("bottom"),Z=Q.includes("left"),j=Q.includes("right"),_=Q.includes("center")&&!$&&!J,K=Q.includes("center")&&!Z&&!j;if($)this.style.top=`${this.#W}px`;else if(J)this.style.bottom=`${this.#W}px`;else if(_)this.style.top="0",this.style.bottom="0";if(Z)this.style.left=`${this.#W}px`;else if(j)this.style.right=`${this.#W}px`;else if(K)this.style.left="0",this.style.right="0";if(_&&K)this.style.margin="auto";else if(_)this.style.marginTop="auto",this.style.marginBottom="auto";else if(K)this.style.marginLeft="auto",this.style.marginRight="auto";this.#j=!0}#U(){if(this.drag){this.addEventListener("pointerdown",this.#q);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#O(){this.removeEventListener("pointerdown",this.#q),document.removeEventListener("pointermove",this.#K),document.removeEventListener("pointerup",this.#_)}#L(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(_)=>$.some((K)=>_.matches?.(K))||_.tagName?.startsWith("FIG-")&&!J.includes(_.tagName);if(Z(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(Z(j))return!0;j=j.parentElement}return!1}#M(Q){if(!this.drag)return;if(this.#L(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this.#J=!0,this.#$.x=Q.clientX,this.#$.y=Q.clientY;const J=this.getBoundingClientRect();this.#Z.x=Q.clientX-J.left,this.#Z.y=Q.clientY-J.top,document.addEventListener("pointermove",this.#K),document.addEventListener("pointerup",this.#_)}#N(Q){if(this.#J&&!this.#Q){const $=Math.abs(Q.clientX-this.#$.x),J=Math.abs(Q.clientY-this.#$.y);if($>this.#X||J>this.#X){this.#Q=!0,this.#J=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#Q)return;this.style.left=`${Q.clientX-this.#Z.x}px`,this.style.top=`${Q.clientY-this.#Z.y}px`,Q.preventDefault()}#B(Q){if(this.#Q)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#Q=!1,this.#J=!1,document.removeEventListener("pointermove",this.#K),document.removeEventListener("pointerup",this.#_),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,J){if(Q==="drag")if(this.drag=J!==null&&J!=="false",this.drag)this.#U();else{this.#O();const Z=this.querySelector("fig-header, header");if(Z)Z.style.cursor=""}if(Q==="position"&&this.#j)this.#G()}}p("fig-dialog",Z0,{extends:"dialog"});class j0 extends HTMLDialogElement{_anchorObserver=null;_contentObserver=null;_mutationObserver=null;_anchorTrackRAF=null;_lastAnchorRect=null;_isPopupActive=!1;_boundReposition;_boundScroll;_boundOutsidePointerDown;_rafId=null;_anchorRef=null;_isDragging=!1;_dragPending=!1;_dragStartPos={x:0,y:0};_dragOffset={x:0,y:0};_dragThreshold=3;_boundPointerDown;_boundPointerMove;_boundPointerUp;_wasDragged=!1;constructor(){super();this._boundReposition=this.queueReposition.bind(this),this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()},this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this),this._boundPointerDown=this.handlePointerDown.bind(this),this._boundPointerMove=this.handlePointerMove.bind(this),this._boundPointerUp=this.handlePointerUp.bind(this)}ensureInitialized(){if(typeof this._anchorObserver==="undefined")this._anchorObserver=null;if(typeof this._contentObserver==="undefined")this._contentObserver=null;if(typeof this._mutationObserver==="undefined")this._mutationObserver=null;if(typeof this._anchorTrackRAF==="undefined")this._anchorTrackRAF=null;if(typeof this._lastAnchorRect==="undefined")this._lastAnchorRect=null;if(typeof this._isPopupActive==="undefined")this._isPopupActive=!1;if(typeof this._rafId==="undefined")this._rafId=null;if(typeof this._anchorRef==="undefined")this._anchorRef=null;if(typeof this._isDragging==="undefined")this._isDragging=!1;if(typeof this._dragPending==="undefined")this._dragPending=!1;if(typeof this._dragStartPos==="undefined")this._dragStartPos={x:0,y:0};if(typeof this._dragOffset==="undefined")this._dragOffset={x:0,y:0};if(typeof this._dragThreshold!=="number")this._dragThreshold=3;if(typeof this._wasDragged==="undefined")this._wasDragged=!1;if(typeof this._boundReposition!=="function")this._boundReposition=this.queueReposition.bind(this);if(typeof this._boundScroll!=="function")this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()};if(typeof this._boundOutsidePointerDown!=="function")this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this);if(typeof this._boundPointerDown!=="function")this._boundPointerDown=this.handlePointerDown.bind(this);if(typeof this._boundPointerMove!=="function")this._boundPointerMove=this.handlePointerMove.bind(this);if(typeof this._boundPointerUp!=="function")this._boundPointerUp=this.handlePointerUp.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._anchorRef??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this._anchorRef=Q;else if(typeof Q==="string")this._anchorRef=null,this.setAttribute("anchor",Q);else this._anchorRef=null;if(this.open)this.queueReposition()}connectedCallback(){if(this.ensureInitialized(),!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.teardownObservers(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.setupDragListeners()}),this.open)this.showPopup();else this.hidePopup()}disconnectedCallback(){if(this.ensureInitialized(),this.teardownObservers(),this.removeDragListeners(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._rafId!==null)cancelAnimationFrame(this._rafId),this._rafId=null}attributeChangedCallback(Q,$,J){if(this.ensureInitialized(),$===J)return;if(Q==="open"){if(J===null||J==="false"){this.hidePopup();return}this.showPopup();return}if(Q==="drag"){if(this.drag=J!==null&&J!=="false",this.drag)this.setupDragListeners();else this.removeDragListeners();return}if(this.open)this.queueReposition(),this.setupObservers()}showPopup(){if(this._isPopupActive){this.queueReposition();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(Q0()+1),!super.open)try{this.show()}catch($){}this.setupObservers(),document.addEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._wasDragged=!1,this.queueReposition(),this._isPopupActive=!0;const Q=this.resolveAnchor();if(Q)Q.classList.add("has-popup-open")}hidePopup(){const Q=this.resolveAnchor();if(Q)Q.classList.remove("has-popup-open");if(this._isPopupActive=!1,this._wasDragged=!1,this.teardownObservers(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}set autoresize(Q){if(Q||Q==="")this.setAttribute("autoresize",Q===!0?"":Q);else this.removeAttribute("autoresize")}setupObservers(){this.teardownObservers();const Q=this.resolveAnchor();if(Q&&"ResizeObserver"in window)this._anchorObserver=new ResizeObserver(this._boundReposition),this._anchorObserver.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this._contentObserver=new ResizeObserver(this._boundReposition),this._contentObserver.observe(this);this._mutationObserver=new MutationObserver(this._boundReposition),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this._boundReposition),window.addEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.startAnchorTracking()}teardownObservers(){if(this._anchorObserver)this._anchorObserver.disconnect(),this._anchorObserver=null;if(this._contentObserver)this._contentObserver.disconnect(),this._contentObserver=null;if(this._mutationObserver)this._mutationObserver.disconnect(),this._mutationObserver=null;window.removeEventListener("resize",this._boundReposition),window.removeEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.stopAnchorTracking()}readRectSnapshot(Q){if(!Q)return null;const $=Q.getBoundingClientRect();return{x:$.x,y:$.y,width:$.width,height:$.height}}hasRectChanged(Q,$,J=0.25){if(!Q&&!$)return!1;if(!Q||!$)return!0;return Math.abs(Q.x-$.x)>J||Math.abs(Q.y-$.y)>J||Math.abs(Q.width-$.width)>J||Math.abs(Q.height-$.height)>J}startAnchorTracking(){if(this.stopAnchorTracking(),!this.open)return;const Q=()=>{if(!this.open){this._anchorTrackRAF=null;return}const $=this.resolveAnchor(),J=this.readRectSnapshot($),Z=this.shouldAutoReposition();if(Z&&this.hasRectChanged(this._lastAnchorRect,J))this._lastAnchorRect=J,this.queueReposition();else if(!Z)this._lastAnchorRect=J;this._anchorTrackRAF=requestAnimationFrame(Q)};this._lastAnchorRect=this.readRectSnapshot(this.resolveAnchor()),this._anchorTrackRAF=requestAnimationFrame(Q)}stopAnchorTracking(){if(this._anchorTrackRAF!==null)cancelAnimationFrame(this._anchorTrackRAF),this._anchorTrackRAF=null;this._lastAnchorRect=null}handleOutsidePointerDown(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const J=Q.target;if(!(J instanceof Node))return;if(this.contains(J))return;const Z=this.resolveAnchor();if(Z&&Z.contains(J))return;if(this.isInsideDescendantPopup(J))return;this.open=!1}isInsideDescendantPopup(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let J=$;const Z=new Set;while(J&&!Z.has(J)){Z.add(J);const j=J.anchor;if(!(j instanceof Element))break;if(this.contains(j))return!0;J=j.closest?.('dialog[is="fig-popup"]')}return!1}setupDragListeners(){if(this.drag)this.addEventListener("pointerdown",this._boundPointerDown)}removeDragListeners(){this.removeEventListener("pointerdown",this._boundPointerDown),document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp)}isInteractiveElement(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["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"],Z=(_)=>$.some((K)=>_.matches?.(K))||_.tagName?.startsWith("FIG-")&&!J.includes(_.tagName);if(Z(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(Z(j))return!0;j=j.parentElement}return!1}handlePointerDown(Q){if(!this.drag)return;if(this.isInteractiveElement(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this._dragPending=!0,this._dragStartPos.x=Q.clientX,this._dragStartPos.y=Q.clientY;const J=this.getBoundingClientRect();this._dragOffset.x=Q.clientX-J.left,this._dragOffset.y=Q.clientY-J.top,document.addEventListener("pointermove",this._boundPointerMove),document.addEventListener("pointerup",this._boundPointerUp)}handlePointerMove(Q){if(this._dragPending&&!this._isDragging){const $=Math.abs(Q.clientX-this._dragStartPos.x),J=Math.abs(Q.clientY-this._dragStartPos.y);if($>this._dragThreshold||J>this._dragThreshold){this._isDragging=!0,this._dragPending=!1,this._wasDragged=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this._isDragging)return;this.style.left=`${Q.clientX-this._dragOffset.x}px`,this.style.top=`${Q.clientY-this._dragOffset.y}px`,Q.preventDefault()}handlePointerUp(Q){if(this._isDragging)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this._isDragging=!1,this._dragPending=!1,document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),Q.preventDefault()}resolveAnchor(){if(this._anchorRef)return this._anchorRef;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const J=$.querySelector(Q);if(J&&!this.contains(J))return J}return document.querySelector(Q)}parsePosition(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),J=new Set(["top","center","bottom"]),Z=new Set(["left","center","right"]);let j="top",_="center",K=null;if($.length>=2){if(J.has($[0]))j=$[0];if(Z.has($[1]))_=$[1];return{vertical:j,horizontal:_,shorthand:K}}if($.length===1){const q=$[0];if(q==="top"||q==="bottom")j=q,K=q;else if(q==="left"||q==="right")_=q,K=q;else if(q==="center")j="center",_="center"}return{vertical:j,horizontal:_,shorthand:K}}normalizeOffsetToken(Q,$="0px"){if(!Q)return $;const J=Q.trim();if(!J)return $;if(/^-?\d+(\.\d+)?$/.test(J))return`${J}px`;return J}measureLengthPx(Q,$="x"){if(!Q)return 0;const J=this.normalizeOffsetToken(Q,"0px");if(J.endsWith("px")){const _=parseFloat(J);return Number.isFinite(_)?_:0}const Z=document.createElement("div");if(Z.style.position="fixed",Z.style.visibility="hidden",Z.style.pointerEvents="none",Z.style.left="0",Z.style.top="0",Z.style.margin="0",Z.style.padding="0",Z.style.border="0",$==="x")Z.style.width=J,Z.style.height="0";else Z.style.height=J,Z.style.width="0";document.body.appendChild(Z);const j=Z.getBoundingClientRect();return Z.remove(),$==="x"?j.width:j.height}parseOffset(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),J=this.normalizeOffsetToken($[0],"0px"),Z=this.normalizeOffsetToken($[1],"0px");return{xToken:J,yToken:Z,xPx:this.measureLengthPx(J,"x"),yPx:this.measureLengthPx(Z,"y")}}parseViewportMargins(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((Z)=>!Number.isNaN(Z));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]}}getPlacementCandidates(Q,$,J){const Z={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(J){const _=J==="left"||J==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:J},{v:Q,h:$,s:Z[J]},{v:Q,h:$,s:_[0]},{v:Q,h:$,s:_[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:Z[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:Z[$],s:null},{v:"bottom",h:Z[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:Z[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:Z[Q],h:"left",s:null},{v:Z[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:Z[Q],h:$,s:null},{v:Q,h:Z[$],s:null},{v:Z[Q],h:Z[$],s:null}]}computeCoords(Q,$,J,Z,j,_){let K,q;if(_==="left"||_==="right")return q=_==="left"?Q.left-$.width-j.xPx:Q.right+j.xPx,K=Q.top,{top:K,left:q};if(_==="top"||_==="bottom")return K=_==="top"?Q.top-$.height-j.yPx:Q.bottom+j.yPx,q=Q.left,{top:K,left:q};if(J==="top")K=Q.top-$.height-j.yPx;else if(J==="bottom")K=Q.bottom+j.yPx;else K=Q.top+(Q.height-$.height)/2;if(J==="center")if(Z==="left")q=Q.left-$.width-j.xPx;else if(Z==="right")q=Q.right+j.xPx;else q=Q.left+(Q.width-$.width)/2;else if(Z==="left")q=Q.left+j.xPx;else if(Z==="right")q=Q.right-$.width-j.xPx;else q=Q.left+(Q.width-$.width)/2;return{top:K,left:q}}oppositeSide(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}getPlacementSide(Q,$,J){if(J==="top")return"top";if(J==="bottom")return"bottom";if(J==="left")return"left";if(J==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}updatePopoverBeak(Q,$,J,Z,j){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const _=this.oppositeSide(j);this.setAttribute("data-beak-side",_);const K=Q.left+Q.width/2,q=Q.top+Q.height/2,X=this.getBoundingClientRect(),W=X.width>0&&X.height>0?X:$,Y=W.left,U=W.top,L=10;let F;if(_==="top"||_==="bottom"){F=K-Y;const N=L,B=Math.max(N,W.width-L);F=Math.min(B,Math.max(N,F))}else{F=q-U;const N=L,B=Math.max(N,W.height-L);F=Math.min(B,Math.max(N,F))}this.style.setProperty("--beak-offset",`${F}px`)}overflowScore(Q,$,J){const{innerWidth:Z,innerHeight:j}=window,_=Q.left+$.width,K=Q.top+$.height,q=Math.max(0,J.left-Q.left),X=Math.max(0,J.top-Q.top),W=Math.max(0,_-(Z-J.right)),Y=Math.max(0,K-(j-J.bottom));return q+X+W+Y}fits(Q,$,J){return this.overflowScore(Q,$,J)===0}clamp(Q,$,J){const{left:Z,top:j}=J,_=Math.max(J.left,window.innerWidth-$.width-J.right),K=Math.max(J.top,window.innerHeight-$.height-J.bottom);return{left:Math.min(_,Math.max(Z,Q.left)),top:Math.min(K,Math.max(j,Q.top))}}positionPopup(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.parseOffset(),{vertical:J,horizontal:Z,shorthand:j}=this.parsePosition(),_=this.resolveAnchor(),K=this.parseViewportMargins();if(!_){this.updatePopoverBeak(null,Q,0,0,"top");const F={left:K.left+(window.innerWidth-K.right-K.left-Q.width)/2,top:K.top+(window.innerHeight-K.bottom-K.top-Q.height)/2},N=this.clamp(F,Q,K);this.style.left=`${N.left}px`,this.style.top=`${N.top}px`;return}const q=_.getBoundingClientRect(),X=this.getPlacementCandidates(J,Z,j);let W=null,Y="top",U=Number.POSITIVE_INFINITY;for(let{v:F,h:N,s:B}of X){const O=this.computeCoords(q,Q,F,N,$,B),H=this.getPlacementSide(F,N,B);if(B){const D=this.clamp(O,Q,K);if(B==="left"||B==="right"?O.left>=K.left&&O.left+Q.width<=window.innerWidth-K.right:O.top>=K.top&&O.top+Q.height<=window.innerHeight-K.bottom){this.style.left=`${D.left}px`,this.style.top=`${D.top}px`,this.updatePopoverBeak(q,Q,D.left,D.top,H);return}const E=this.overflowScore(O,Q,K);if(E<U)U=E,W=D,Y=H}else{if(this.fits(O,Q,K)){this.style.left=`${O.left}px`,this.style.top=`${O.top}px`,this.updatePopoverBeak(q,Q,O.left,O.top,H);return}const D=this.overflowScore(O,Q,K);if(D<U)U=D,W=O,Y=H}}const L=this.clamp(W||{left:0,top:0},Q,K);this.style.left=`${L.left}px`,this.style.top=`${L.top}px`,this.updatePopoverBeak(q,Q,L.left,L.top,Y)}queueReposition(){if(!this.open||!this.shouldAutoReposition())return;if(this._rafId!==null)return;this._rafId=requestAnimationFrame(()=>{this._rafId=null,this.positionPopup()})}shouldAutoReposition(){if(!(this.drag&&this._wasDragged))return!0;return!this.resolveAnchor()}}p("fig-popup",j0,{extends:"dialog"});class _0 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,$,J){if(Q==="selected"){if(this.#Q=J!==null&&J!=="false",this.setAttribute("aria-selected",this.#Q?"true":"false"),this?.content)this.content.style.display=this.#Q?"block":"none"}}}customElements.define("fig-tab",_0);class K0 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.#J.bind(this)),requestAnimationFrame(()=>{const Q=this.getAttribute("value");if(Q)this.#$(Q);if(this.hasAttribute("disabled"))this.#Q(!0)})}#Q(Q){this.querySelectorAll("fig-tab").forEach((J)=>{if(Q)J.setAttribute("disabled",""),J.setAttribute("aria-disabled","true"),J.setAttribute("tabindex","-1");else J.removeAttribute("disabled"),J.removeAttribute("aria-disabled"),J.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.#J)}#J(Q){const $=Array.from(this.querySelectorAll("fig-tab")),J=$.findIndex((j)=>j.hasAttribute("selected"));let Z=J;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),Z=J>0?J-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),Z=J<$.length-1?J+1:0;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;default:return}if(Z!==J&&$[Z])$.forEach((j)=>j.removeAttribute("selected")),this.selectedTab=$[Z],this.setAttribute("value",$[Z].getAttribute("value")||""),$[Z].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#$(Q){const $=this.querySelectorAll("fig-tab");for(let J of $)if(J.getAttribute("value")===Q)this.selectedTab=J,J.setAttribute("selected","true");else J.removeAttribute("selected")}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(J!==$)this.#$(J);break;case"disabled":this.#Q(J!==null&&J!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const J=this.querySelectorAll("fig-tab");for(let Z of J)if(Z===$)this.selectedTab=Z,Z.setAttribute("selected","true"),this.setAttribute("value",Z.getAttribute("value")||"");else Z.removeAttribute("selected")}}}customElements.define("fig-tabs",K0);class q0 extends HTMLElement{#Q;#J;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.#J}set selected(Q){this.#J=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,J){switch(Q){case"value":this.#Q=J;break;case"selected":this.#J=J;break}}}customElements.define("fig-segment",q0);class W0 extends HTMLElement{#Q=null;#J=this.handleClick.bind(this);#$=null;#Z=null;#q=0;#K=!1;#_=!1;constructor(){super()}static get observedAttributes(){return["disabled","value","animated","sizing"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.#J),this.#R(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#B(),this.#L(),requestAnimationFrame(()=>{this.#N({enforceFallback:!0}),this.#M(),this.#U({forceInstant:!0})})}disconnectedCallback(){if(this.removeEventListener("click",this.#J),this.#$?.disconnect(),this.#$=null,this.#Z?.disconnect(),this.#Z=null,this.#q)cancelAnimationFrame(this.#q),this.#q=0;this.#K=!1,this.#_=!1}get selectedSegment(){return this.#Q}set selectedSegment(Q){const $=this.querySelectorAll("fig-segment");for(let J of $){const Z=J===Q,j=J.hasAttribute("selected");if(Z&&!j)J.setAttribute("selected","true");else if(!Z&&j)J.removeAttribute("selected")}this.#Q=Q instanceof HTMLElement&&this.contains(Q)?Q:null,this.#U()}get value(){return this.getAttribute("value")||""}set value(Q){if(Q===null||Q===void 0){this.removeAttribute("value");return}this.setAttribute("value",String(Q))}#W(Q){this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#j(Q){const $=Q.getAttribute("value");if($!==null){const J=$.trim();if(J.length>0)return J}return Q.textContent?.trim()||""}#X(){const Q=this.querySelectorAll("fig-segment");for(let $ of Q)if($.hasAttribute("selected"))return $;return null}#Y(Q){const $=String(Q??"").trim();if(!$)return!1;const J=this.querySelectorAll("fig-segment");for(let Z of J){const j=this.#j(Z);if(!j)continue;if(j===$)return this.selectedSegment=Z,!0}return!1}#G(){const Q=this.getAttribute("animated");if(Q===null)return!1;if(Q==="")return!0;return Q.trim().toLowerCase()==="true"}#U({forceInstant:Q=!1}={}){if(this.#K=this.#K||Q,this.#q)return;this.#q=requestAnimationFrame(()=>{this.#q=0;const $=this.#K;this.#K=!1,this.#O({forceInstant:$})})}#O({forceInstant:Q=!1}={}){const $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#G(),Z=this.#Q&&this.contains(this.#Q)?this.#Q:this.#X();if($||!J){if(this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready"),!J||$)this.#_=!1;return}if(!Z){if(this.#_)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const j=this.getBoundingClientRect(),_=Z.getBoundingClientRect();if(j.width<=0||_.width<=0){if(this.#_)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const K=Math.max(0,_.left-j.left);this.style.setProperty("--seg-indicator-x",`${K}px`),this.style.setProperty("--seg-indicator-w",`${_.width}px`),this.style.setProperty("--seg-indicator-opacity","1"),this.style.setProperty("--seg-indicator-transition-duration",!this.#_||Q?"0ms":"150ms"),this.setAttribute("data-indicator-ready","true"),this.#_=!0}#L(){this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>{this.#U()}),this.#M()}#M(){if(!this.#Z)return;this.#Z.disconnect(),this.#Z.observe(this),this.querySelectorAll("fig-segment").forEach((Q)=>{this.#Z?.observe(Q)})}#N({enforceFallback:Q=!1}={}){const $=this.querySelectorAll("fig-segment");if($.length===0){this.#Q=null,this.#U({forceInstant:!0});return}const J=this.getAttribute("value"),Z=J?.trim()??"";if(J!==null){if(Z!==J){this.setAttribute("value",Z);return}if(Z&&this.#Y(Z))return}const j=this.#X();if(j){this.selectedSegment=j;return}if(Q)this.selectedSegment=$[0]}#B(){this.#$?.disconnect(),this.#$=new MutationObserver((Q)=>{let $=!1;for(let J of Q){if(J.type==="childList"){$=!0;break}if(J.type==="attributes"&&J.target instanceof HTMLElement&&J.target.tagName.toLowerCase()==="fig-segment"&&(J.attributeName==="value"||J.attributeName==="selected")){$=!0;break}if(J.type==="characterData"){$=!0;break}}if($)this.#R(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#M(),this.#N({enforceFallback:!0})}),this.#$.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","selected"]})}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if(!$||!this.contains($))return;const J=this.selectedSegment,Z=this.value;this.selectedSegment=$;const j=this.#j($);if(j)this.setAttribute("value",j);else this.removeAttribute("value");const _=this.value;if(J!==$||Z!==_)this.#W(_)}#R(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,$,J){if($===J)return;if(Q==="disabled"){this.#R(J!==null&&J!=="false"),this.#U({forceInstant:!0});return}if(Q==="value"){this.#N({enforceFallback:!1});return}if(Q==="animated"){if(!this.#G())this.#_=!1;this.#U({forceInstant:!0});return}if(Q==="sizing")this.#U({forceInstant:!0})}}customElements.define("fig-segmented-control",W0);class X0 extends HTMLElement{#Q=!1;#J=!1;#$={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"}};#Z;#q;#K;#_;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#Z=(Q)=>{Q.stopPropagation(),this.#B()},this.#q=(Q)=>{Q.stopPropagation(),this.#R()},this.#K=(Q)=>{Q.stopPropagation(),this.#j()},this.#_=(Q)=>{Q.stopPropagation(),this.#D()}}#W(){const Q=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.hasAttribute("text")&&this.getAttribute("text")!=="false",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,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";const $=this.#$[this.type];if(this.min=Number(this.getAttribute("min")||$.min),this.max=Number(this.getAttribute("max")||$.max),this.step=Number(this.getAttribute("step")||$.step),this.color=this.getAttribute("color")||$?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#J=Q===null||typeof Q==="string"&&Q.trim()==="",this.value=this.#L(Q),this.color)this.style.setProperty("--color",this.color);let J="",Z=`<div class="fig-slider-input-container" role="group">
36
36
  <input
37
37
  type="range"
38
38
  ${this.text?'tabindex="-1"':""}
@@ -56,21 +56,21 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
56
56
  value="${this.#J?"":this.value}"
57
57
  ${this.units?`units="${this.units}"`:""}
58
58
  ${this.precision!==null?`precision="${this.precision}"`:""}>
59
- </fig-input-number>`;else J=Z;this.innerHTML=J,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.#K),this.input.addEventListener("change",this.#K),this.input.addEventListener("pointerdown",()=>{this.#Q=!0}),this.input.addEventListener("pointerup",()=>{this.#Q=!1}),this.default)this.style.setProperty("--default",this.#G(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")||V()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",V());let _=(this.max-this.min)/this.step+1;for(let j=0;j<_;j++){let K=document.createElement("option");K.setAttribute("value",this.min+j*this.step),this.datalist.append(K)}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",V());let _=document.createElement("option");_.setAttribute("value",this.default),this.datalist.append(_),this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}if(this.datalist){let _=this.datalist.querySelector(`option[value='${this.default}']`);if(_)_.setAttribute("default","true")}if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.addEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#j),this.figInputNumber.addEventListener("change",this.#j);this.#N()})}connectedCallback(){this.#X()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#_),this.input.removeEventListener("change",this.#K);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#j)}#q(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#J=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#B(Q);this.value=$,this.input.value=String($),this.#N(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}}#G(Q){const{min:$,max:J}=this.#L(),Z=J-$;if(Z===0)return 0;return(Number(Q)-$)/Z}#Y(Q){if(Q===null||Q===void 0)return null;if(typeof Q==="string"&&Q.trim()==="")return null;const $=Number(Q);return Number.isFinite($)?$:null}#L(){let Q=this.#Y(this.min),$=this.#Y(this.max);if(Q===null)Q=0;if($===null)$=Q;if(Q>$)[Q,$]=[$,Q];return{min:Q,max:$}}#W(Q){const{min:$,max:J}=this.#L();return Math.min(J,Math.max($,Q))}#U(){if(this.type==="delta"){const $=this.#Y(this.default);if($!==null)return this.#W($);return this.#W(0)}const{min:Q}=this.#L();return Q}#B(Q){const $=this.#Y(Q);if($===null)return this.#U();return this.#W($)}#O(){let Q=this.#G(this.value);this.style.setProperty("--slider-complete",Q);let $=this.#G(this.default);this.style.setProperty("--default",$),this.style.setProperty("--unchanged",Q===$?1:0)}#N(){let Q=this.input.value;if(this.value=Q,this.#O(),this.input.setAttribute("aria-valuenow",Q),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#J?"":Q)}#M(){this.#J=!1,this.#N(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#k(){this.#Q=!1,this.#J=!1,this.#N(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#D(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#J=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#B(Q);this.value=$,this.input.value=String($),this.#N(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}}static get observedAttributes(){return["value","step","min","max","type","variant","disabled","color","units","transform","text","placeholder","default","precision"]}focus(){this.input.focus()}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"color":this.color=J,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=J!==null&&J!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#Q)break;if(this.#J=J===null||typeof J==="string"&&J.trim()==="",this.value=this.#B(J),this.input.value=String(this.value),this.#N(),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#J?"":this.value);break;case"transform":if(this.transform=Number(J)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=J!==null?Number(J):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"placeholder":if(this.placeholder=J!==null?J:"##",this.figInputNumber)this.figInputNumber.setAttribute("placeholder",this.placeholder);break;case"default":this.default=J!==null?J:this.type==="delta"?0:this.min,this.#O();break;case"min":case"max":case"step":case"type":case"variant":case"units":this[Q]=J,this.#X();break;case"text":this.text=J!==null&&J!=="false",this.#X();break;default:this[Q]=this.input[Q]=J,this.#N();break}}}customElements.define("fig-slider",K0);class q0 extends HTMLElement{#Q=!1;#J;#$;#_;#K;#Z;constructor(){super();this.#J=this.#q.bind(this),this.#$=this.#Y.bind(this),this.#_=this.#Y.bind(this),this.#K=this.#G.bind(this),this.#Z=(Q)=>{Q.stopPropagation(),this.#X(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.readonly=this.hasAttribute("readonly")&&this.getAttribute("readonly")!=="false",this.type==="number"){if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.input.setAttribute("min",String(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",String(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",String(this.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
59
+ </fig-input-number>`;else J=Z;this.innerHTML=J,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.removeEventListener("input",this.#Z),this.input.addEventListener("input",this.#Z),this.input.removeEventListener("change",this.#q),this.input.addEventListener("change",this.#q),this.input.addEventListener("pointerdown",()=>{this.#Q=!0}),this.input.addEventListener("pointerup",()=>{this.#Q=!1}),this.default)this.style.setProperty("--default",this.#X(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")||w()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",w());let j=(this.max-this.min)/this.step+1;for(let _=0;_<j;_++){let K=document.createElement("option");K.setAttribute("value",this.min+_*this.step),this.datalist.append(K)}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",w());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.#K),this.figInputNumber.addEventListener("input",this.#K),this.figInputNumber.removeEventListener("change",this.#_),this.figInputNumber.addEventListener("change",this.#_);this.#N()})}connectedCallback(){this.#W()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#Z),this.input.removeEventListener("change",this.#q);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#K),this.figInputNumber.removeEventListener("change",this.#_)}#j(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#J=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#L(Q);this.value=$,this.input.value=String($),this.#N(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}}#X(Q){const{min:$,max:J}=this.#G(),Z=J-$;if(Z===0)return 0;return(Number(Q)-$)/Z}#Y(Q){if(Q===null||Q===void 0)return null;if(typeof Q==="string"&&Q.trim()==="")return null;const $=Number(Q);return Number.isFinite($)?$:null}#G(){let Q=this.#Y(this.min),$=this.#Y(this.max);if(Q===null)Q=0;if($===null)$=Q;if(Q>$)[Q,$]=[$,Q];return{min:Q,max:$}}#U(Q){const{min:$,max:J}=this.#G();return Math.min(J,Math.max($,Q))}#O(){if(this.type==="delta"){const $=this.#Y(this.default);if($!==null)return this.#U($);return this.#U(0)}const{min:Q}=this.#G();return Q}#L(Q){const $=this.#Y(Q);if($===null)return this.#O();return this.#U($)}#M(){let Q=this.#X(this.value);this.style.setProperty("--slider-complete",Q);let $=this.#X(this.default);this.style.setProperty("--default",$),this.style.setProperty("--unchanged",Q===$?1:0)}#N(){let Q=this.input.value;if(this.value=Q,this.#M(),this.input.setAttribute("aria-valuenow",Q),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#J?"":Q)}#B(){this.#J=!1,this.#N(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#R(){this.#Q=!1,this.#J=!1,this.#N(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#D(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#J=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#L(Q);this.value=$,this.input.value=String($),this.#N(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}}static get observedAttributes(){return["value","step","min","max","type","variant","disabled","color","units","transform","text","placeholder","default","precision"]}focus(){this.input.focus()}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"color":this.color=J,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=J!==null&&J!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#Q)break;if(this.#J=J===null||typeof J==="string"&&J.trim()==="",this.value=this.#L(J),this.input.value=String(this.value),this.#N(),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#J?"":this.value);break;case"transform":if(this.transform=Number(J)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=J!==null?Number(J):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"placeholder":if(this.placeholder=J!==null?J:"##",this.figInputNumber)this.figInputNumber.setAttribute("placeholder",this.placeholder);break;case"default":this.default=J!==null?J:this.type==="delta"?0:this.min,this.#M();break;case"min":case"max":case"step":case"type":case"variant":case"units":this[Q]=J,this.#W();break;case"text":this.text=J!==null&&J!=="false",this.#W();break;default:this[Q]=this.input[Q]=J,this.#N();break}}}customElements.define("fig-slider",X0);class Y0 extends HTMLElement{#Q=!1;#J;#$;#Z;#q;#K;constructor(){super();this.#J=this.#j.bind(this),this.#$=this.#Y.bind(this),this.#Z=this.#Y.bind(this),this.#q=this.#X.bind(this),this.#K=(Q)=>{Q.stopPropagation(),this.#W(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.readonly=this.hasAttribute("readonly")&&this.getAttribute("readonly")!=="false",this.type==="number"){if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.input.setAttribute("min",String(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",String(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",String(this.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
60
60
  type="${this.type}"
61
61
  ${this.name?`name="${this.name}"`:""}
62
62
  placeholder="${this.placeholder}"
63
- value="${this.type==="number"?this.#j(this.value):this.value}" />`;if(this.multiline)Q=`<textarea
64
- placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{let $=this.querySelector("[slot=append]"),J=this.querySelector("[slot=prepend]");if(this.innerHTML=Q,J)J.addEventListener("click",this.focus.bind(this)),this.prepend(J);if($)$.addEventListener("click",this.focus.bind(this)),this.append($);if(this.input=this.querySelector("input,textarea"),this.input.readOnly=this.readonly,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.#K)}this.input.removeEventListener("change",this.#Z),this.input.addEventListener("change",this.#Z)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#Z);this.removeEventListener("pointerdown",this.#K),window.removeEventListener("pointermove",this.#J),window.removeEventListener("pointerup",this.#$),window.removeEventListener("blur",this.#_)}focus(){this.input.focus()}#j(Q){if(Q==="")return"";let $=Number(Q)*(this.transform||1);return $=this.#W($),$}#X(Q){Q.stopPropagation();let $=Q.target.value,J=$;if(this.type==="number")$=$/(this.transform||1),$=this.#L($,!1),J=$*(this.transform||1);this.value=$,this.input.value=J,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#q(Q){if(this.type!=="number")return;if(Q.buttons===0){this.#Y();return}let $=(this.step||1)*Q.movementX,J=Number(this.input.value);J=J/(this.transform||1)+$,J=this.#L(J,!1);let Z=J*(this.transform||1);J=this.#W(J),Z=this.#W(Z),this.value=J,this.input.value=Z,this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#G(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.#J),window.addEventListener("pointerup",this.#$),window.addEventListener("blur",this.#_)}#Y(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.#J),window.removeEventListener("pointerup",this.#$),window.removeEventListener("blur",this.#_)}#L(Q,$=!0){let J=Q;if(this.type==="number"){if(J=Number(J),typeof this.min==="number")J=Math.max($?this.#j(this.min):this.min,J);if(typeof this.max==="number")J=Math.min($?this.#j(this.max):this.max,J);J=this.#W(J)}return J}#W(Q,$=2){const J=Math.round(Q*100)/100;return Number.isInteger(J)?J:J.toFixed($)}static get observedAttributes(){return["value","placeholder","label","disabled","readonly","type","step","min","max","transform","name"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"readonly":this.readonly=J!==null&&J!=="false",this.input.readOnly=this.readonly;break;case"transform":if(this.type==="number")this.transform=Number(J)||1,this.input.value=this.#j(this.value);break;case"value":if(this.#Q)break;let Z=J;if(this.type==="number")Z=this.#L(Z,!1),this.value=Z,this.input.value=this.#j(Z);else this.value=Z,this.input.value=Z;break;case"min":case"max":case"step":if(this[Q]=this.input[Q]=Number(J),this.input)this.input.setAttribute(Q,J);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-text",q0);class X0 extends HTMLElement{#Q;#J;#$;#_;#K;#Z;#j;#X;#q;#G;#Y;#L;#W=!1;#U=null;#B(Q){if(Q&&!this.#U)this.#U=document.createElement("span"),this.#U.className="fig-steppers",this.#U.innerHTML='<button class="fig-stepper-up" tabindex="-1" aria-label="Increase"></button><button class="fig-stepper-down" tabindex="-1" aria-label="Decrease"></button>',this.#U.addEventListener("pointerdown",($)=>{$.preventDefault(),$.stopPropagation();const J=$.target.closest("button");if(!J||this.disabled)return;const Z=J.classList.contains("fig-stepper-up")?1:-1;this.#O(Z),this.input.focus()}),this.append(this.#U);else if(!Q&&this.#U)this.#U.remove(),this.#U=null}#O(Q){const $=this.step||1;let J=this.#N(this.input.value),Z=(J!==""?Number(J)/(this.transform||1):0)+$*Q;Z=this.#F(Z,!1),this.value=Z,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}constructor(){super();this.#Q=this.#z.bind(this),this.#J=this.#R.bind(this),this.#$=this.#R.bind(this),this.#_=this.#H.bind(this),this.#K=(Q)=>{Q.stopPropagation(),this.#P(Q)},this.#Z=(Q)=>{Q.stopPropagation(),this.#A(Q)},this.#j=(Q)=>{this.#D(Q)},this.#X=(Q)=>{this.#E(Q)},this.#q=(Q)=>{this.#T(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.#G=this.getAttribute("units")||"",this.#Y=this.getAttribute("unit-position")||"suffix",this.#L=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
63
+ value="${this.type==="number"?this.#_(this.value):this.value}" />`;if(this.multiline)Q=`<textarea
64
+ placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{let $=this.querySelector("[slot=append]"),J=this.querySelector("[slot=prepend]");if(this.innerHTML=Q,J)J.addEventListener("click",this.focus.bind(this)),this.prepend(J);if($)$.addEventListener("click",this.focus.bind(this)),this.append($);if(this.input=this.querySelector("input,textarea"),this.input.readOnly=this.readonly,this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#_(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#_(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#_(this.step));this.addEventListener("pointerdown",this.#q)}this.input.removeEventListener("change",this.#K),this.input.addEventListener("change",this.#K)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#K);this.removeEventListener("pointerdown",this.#q),window.removeEventListener("pointermove",this.#J),window.removeEventListener("pointerup",this.#$),window.removeEventListener("blur",this.#Z)}focus(){this.input.focus()}#_(Q){if(Q==="")return"";let $=Number(Q)*(this.transform||1);return $=this.#U($),$}#W(Q){Q.stopPropagation();let $=Q.target.value,J=$;if(this.type==="number")$=$/(this.transform||1),$=this.#G($,!1),J=$*(this.transform||1);this.value=$,this.input.value=J,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#j(Q){if(this.type!=="number")return;if(Q.buttons===0){this.#Y();return}let $=(this.step||1)*Q.movementX,J=Number(this.input.value);J=J/(this.transform||1)+$,J=this.#G(J,!1);let Z=J*(this.transform||1);J=this.#U(J),Z=this.#U(Z),this.value=J,this.input.value=Z,this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#X(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.#J),window.addEventListener("pointerup",this.#$),window.addEventListener("blur",this.#Z)}#Y(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.#J),window.removeEventListener("pointerup",this.#$),window.removeEventListener("blur",this.#Z)}#G(Q,$=!0){let J=Q;if(this.type==="number"){if(J=Number(J),typeof this.min==="number")J=Math.max($?this.#_(this.min):this.min,J);if(typeof this.max==="number")J=Math.min($?this.#_(this.max):this.max,J);J=this.#U(J)}return J}#U(Q,$=2){const J=Math.round(Q*100)/100;return Number.isInteger(J)?J:J.toFixed($)}static get observedAttributes(){return["value","placeholder","label","disabled","readonly","type","step","min","max","transform","name"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"readonly":this.readonly=J!==null&&J!=="false",this.input.readOnly=this.readonly;break;case"transform":if(this.type==="number")this.transform=Number(J)||1,this.input.value=this.#_(this.value);break;case"value":if(this.#Q)break;let Z=J;if(this.type==="number")Z=this.#G(Z,!1),this.value=Z,this.input.value=this.#_(Z);else this.value=Z,this.input.value=Z;break;case"min":case"max":case"step":if(this[Q]=this.input[Q]=Number(J),this.input)this.input.setAttribute(Q,J);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-text",Y0);class U0 extends HTMLElement{#Q;#J;#$;#Z;#q;#K;#_;#W;#j;#X;#Y;#G;#U=!1;#O=null;#L(Q){if(Q&&!this.#O)this.#O=document.createElement("span"),this.#O.className="fig-steppers",this.#O.innerHTML='<button class="fig-stepper-up" tabindex="-1" aria-label="Increase"></button><button class="fig-stepper-down" tabindex="-1" aria-label="Decrease"></button>',this.#O.addEventListener("pointerdown",($)=>{$.preventDefault(),$.stopPropagation();const J=$.target.closest("button");if(!J||this.disabled)return;const Z=J.classList.contains("fig-stepper-up")?1:-1;this.#M(Z),this.input.focus()}),this.append(this.#O);else if(!Q&&this.#O)this.#O.remove(),this.#O=null}#M(Q){const $=this.step||1;let J=this.#N(this.input.value),Z=(J!==""?Number(J)/(this.transform||1):0)+$*Q;Z=this.#H(Z,!1),this.value=Z,this.input.value=this.#B(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}constructor(){super();this.#Q=this.#A.bind(this),this.#J=this.#T.bind(this),this.#$=this.#T.bind(this),this.#Z=this.#f.bind(this),this.#q=(Q)=>{Q.stopPropagation(),this.#z(Q)},this.#K=(Q)=>{Q.stopPropagation(),this.#F(Q)},this.#_=(Q)=>{this.#D(Q)},this.#W=(Q)=>{this.#E(Q)},this.#j=(Q)=>{this.#k(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.#X=this.getAttribute("units")||"",this.#Y=this.getAttribute("unit-position")||"suffix",this.#G=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
65
65
  type="text"
66
66
  inputmode="decimal"
67
67
  ${this.name?`name="${this.name}"`:""}
68
68
  placeholder="${this.placeholder}"
69
- value="${this.#M(this.value)}" />`;requestAnimationFrame(()=>{let Z=this.querySelector("[slot=append]"),_=this.querySelector("[slot=prepend]");if(this.innerHTML=J,_)_.addEventListener("click",this.focus.bind(this)),this.prepend(_);if(Z)Z.addEventListener("click",this.focus.bind(this)),this.append(Z);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.#B($),this.hasAttribute("disabled")){const j=this.getAttribute("disabled");this.disabled=this.input.disabled=j!=="false"}this.addEventListener("pointerdown",this.#_),this.input.removeEventListener("change",this.#K),this.input.addEventListener("change",this.#K),this.input.removeEventListener("input",this.#Z),this.input.addEventListener("input",this.#Z),this.input.removeEventListener("focus",this.#j),this.input.addEventListener("focus",this.#j),this.input.removeEventListener("blur",this.#X),this.input.addEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#q),this.input.addEventListener("keydown",this.#q)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#K),this.input.removeEventListener("input",this.#Z),this.input.removeEventListener("focus",this.#j),this.input.removeEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#q);this.removeEventListener("pointerdown",this.#_),window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("blur",this.#$)}focus(){this.input.focus()}#N(Q){if(!Q)return"";if(!this.#G){let Z=Q.replace(/[^\d.-]/g,"");const _=Z.split(".");if(_.length>2)Z=_[0]+"."+_.slice(1).join("");return Z}let $=Q.replace(this.#G,"").trim();$=$.replace(/[^\d.-]/g,"");const J=$.split(".");if(J.length>2)$=J[0]+"."+J.slice(1).join("");return $}#M(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);if(isNaN($))return"";if($=this.#C($),!this.#G)return $.toString();if(this.#Y==="prefix")return this.#G+$;else return $+this.#G}#k(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);return $=this.#C($),$.toString()}#D(Q){this.#W=!0,setTimeout(()=>{const $=Q.target.value;if($&&this.#G)if(this.#Y==="prefix")Q.target.setSelectionRange(this.#G.length,$.length);else{const J=$.indexOf(this.#G);if(J>-1)Q.target.setSelectionRange(0,J)}},0)}#E(Q){this.#W=!1;let $=this.#N(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#F(J,!1),this.value=J,Q.target.value=this.#M(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#T(Q){if(this.disabled)return;if(Q.key!=="ArrowUp"&&Q.key!=="ArrowDown")return;Q.preventDefault();const $=this.step||1,J=Q.shiftKey?10:1,Z=$*J*(Q.key==="ArrowUp"?1:-1);let _=this.#N(this.input.value),j=(_!==""?Number(_)/(this.transform||1):0)+Z;j=this.#F(j,!1),this.value=j,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#A(Q){let $=this.#N(Q.target.value);if($!=="")this.value=Number($)/(this.transform||1);else this.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#P(Q){Q.stopPropagation();let $=this.#N(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#F(J,!1),this.value=J,Q.target.value=this.#M(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}))}#z(Q){if(this.disabled)return;if(Q.buttons===0){this.#R();return}let $=(this.step||1)*Q.movementX,J=this.#N(this.input.value),Z=Number(J)/(this.transform||1)+$;Z=this.#F(Z,!1),this.value=Z,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#H(Q){if(this.disabled)return;if(Q.altKey||Q.target.closest("[slot]"))this.#W=!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.#J),window.addEventListener("blur",this.#$)}#R(Q){this.#W=!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.#J),window.removeEventListener("blur",this.#$)}#F(Q,$=!0){let J=Number(Q);if(isNaN(J))return"";if(typeof this.min==="number")J=Math.max(this.min,J);if(typeof this.max==="number")J=Math.min(this.max,J);return J=this.#C(J),J}#C(Q){const $=this.#L??2,J=Math.pow(10,$),Z=Math.round(Q*J)/J;return Number.isInteger(Z)?Z:parseFloat(Z.toFixed($))}static get observedAttributes(){return["value","placeholder","disabled","step","min","max","transform","name","units","unit-position","steppers","precision"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"units":this.#G=J||"",this.input.value=this.#M(this.value);break;case"unit-position":this.#Y=J||"suffix",this.input.value=this.#M(this.value);break;case"transform":this.transform=Number(J)||1,this.input.value=this.#M(this.value);break;case"value":if(this.#W)break;let Z=J!==null&&J!==""?Number(J):"";if(Z!=="")Z=this.#F(Z,!1);this.value=Z,this.input.value=this.#M(this.value);break;case"min":case"max":case"step":if(J===null||J===""){this[Q]=void 0;break}this[Q]=Number(J);break;case"steppers":{const _=J!==null&&J!=="false";this.#B(_);break}case"precision":this.#L=J!==null?Number(J):2,this.input.value=this.#M(this.value);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-number",X0);class W0 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,$,J){if(this[Q]=J,Q==="name")this.img?.setAttribute("alt",J),this.name=J,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials);else if(Q==="src")this.src=J,this.setSrc(this.src)}}customElements.define("fig-avatar",W0);class Y0 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")||V();this.input.setAttribute("id",Q),this.label.setAttribute("for",Q)}})}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(this.label)this.label.textContent=J;break}}focus(){this.input.focus()}}customElements.define("fig-field",Y0);class G0 extends HTMLElement{#Q=null;#J=null;#$=null;#_=null;#K=new Set;#Z=0;#j=null;#X=null;#q=new Set(["variant","color","text","full"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#G();if(this.#Y(),this.#L(),this.#O(),!this.#_)this.#_=new MutationObserver((Q)=>{let $=!1,J=!1;for(let Z of Q)if(Z.type==="attributes"){if(Z.attributeName&&this.#q.has(Z.attributeName))continue;if(Z.attributeName==="label"||Z.attributeName==="direction")$=!0;else J=!0}if($)this.#Y();if(J)this.#L()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#_?.disconnect(),this.#Z)cancelAnimationFrame(this.#Z),this.#Z=0;this.#N()}attributeChangedCallback(Q,$,J){if($===J||!this.#Q)return;if(Q==="label"||Q==="direction")this.#Y()}#G(){const Q=Array.from(this.childNodes).filter((_)=>{return _.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())}),$=document.createElement("fig-field"),J=document.createElement("label"),Z=document.createElement("fig-slider");Z.setAttribute("text","true");for(let _ of this.#W()){const j=this.getAttribute(_);Z.setAttribute(_,j??"")}$.append(J,Z),this.#Q=$,this.#J=J,this.#$=Z,this.replaceChildren($);for(let _ of Q)this.#$.appendChild(_)}#Y(){if(!this.#Q||!this.#J)return;const Q=this.hasAttribute("label"),$=this.getAttribute("label");if(Q&&($??"").trim()===""){if(this.#J.parentElement===this.#Q)this.#J.remove()}else if(this.#J.textContent=Q?$??"":"Label",this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J);this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#L(){if(!this.#$)return;const Q=this.#W(),$=new Set(Q.filter((Z)=>Z!=="text"));for(let Z of this.#K)if(!$.has(Z))this.#$.removeAttribute(Z);for(let Z of Q){if(Z==="text")continue;const _=this.getAttribute(Z);this.#$.setAttribute(Z,_??"")}this.#$.removeAttribute("variant"),this.#$.removeAttribute("color"),this.#$.removeAttribute("transform"),this.#$.removeAttribute("full"),this.#$.setAttribute("text","true");const J=(this.getAttribute("type")||"range").toLowerCase();if(J==="delta"||J==="stepper")this.#$.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#$.removeAttribute("default");if(J==="stepper")this.#$.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#$.removeAttribute("step");if(J==="opacity")this.#$.style.setProperty("--color","var(--figma-color-bg-tertiary)");else this.#$.style.removeProperty("--color");this.#K=$,this.#U()}#W(){const Q=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter(($)=>!Q.has($)&&!this.#q.has($))}#U(){if(this.#Z)cancelAnimationFrame(this.#Z);this.#Z=requestAnimationFrame(()=>{this.#Z=0,this.#B()})}#B(){if(!this.#$)return;const Q=this.#$.querySelector("fig-input-number");if(!Q)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){Q.removeAttribute("steppers");return}const J=this.getAttribute("steppers");Q.setAttribute("steppers",J??"")}#O(){if(!this.#$)return;if(!this.#j)this.#j=this.#M.bind(this,"input");if(!this.#X)this.#X=this.#M.bind(this,"change");this.#$.addEventListener("input",this.#j),this.#$.addEventListener("change",this.#X)}#N(){if(!this.#$)return;if(this.#j)this.#$.removeEventListener("input",this.#j);if(this.#X)this.#$.removeEventListener("change",this.#X)}#M(Q,$){$.stopPropagation();const J=$ instanceof CustomEvent&&$.detail!==void 0?$.detail:this.#$?.value;this.dispatchEvent(new CustomEvent(Q,{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}}customElements.define("fig-field-slider",G0);class L0 extends HTMLElement{rgba;hex;alpha=100;#Q;#J;#$;#_;constructor(){super()}get picker(){return this.getAttribute("picker")||"native"}#K(){const Q={},$=this.getAttribute("experimental");if($)Q.experimental=$;for(let{name:J,value:Z}of this.attributes)if(J.startsWith("picker-")&&J!=="picker-anchor")Q[J.slice(7)]=Z;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([J,Z])=>`${J}="${Z}"`).join(" ")}connectedCallback(){this.#Z(this.getAttribute("value"));const Q=this.picker==="figma",$=this.picker==="false",J=this.getAttribute("alpha")==="true",Z=this.#K();let _="";if(this.getAttribute("text")){let j=`<fig-input-text
69
+ value="${this.#B(this.value)}" />`;requestAnimationFrame(()=>{let Z=this.querySelector("[slot=append]"),j=this.querySelector("[slot=prepend]");if(this.innerHTML=J,j)j.addEventListener("click",this.focus.bind(this)),this.prepend(j);if(Z)Z.addEventListener("click",this.focus.bind(this)),this.append(Z);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.#L($),this.hasAttribute("disabled")){const _=this.getAttribute("disabled");this.disabled=this.input.disabled=_!=="false"}this.addEventListener("pointerdown",this.#Z),this.input.removeEventListener("change",this.#q),this.input.addEventListener("change",this.#q),this.input.removeEventListener("input",this.#K),this.input.addEventListener("input",this.#K),this.input.removeEventListener("focus",this.#_),this.input.addEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#W),this.input.addEventListener("blur",this.#W),this.input.removeEventListener("keydown",this.#j),this.input.addEventListener("keydown",this.#j)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#q),this.input.removeEventListener("input",this.#K),this.input.removeEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#W),this.input.removeEventListener("keydown",this.#j);this.removeEventListener("pointerdown",this.#Z),window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("blur",this.#$)}focus(){this.input.focus()}#N(Q){if(!Q)return"";if(!this.#X){let Z=Q.replace(/[^\d.-]/g,"");const j=Z.split(".");if(j.length>2)Z=j[0]+"."+j.slice(1).join("");return Z}let $=Q.replace(this.#X,"").trim();$=$.replace(/[^\d.-]/g,"");const J=$.split(".");if(J.length>2)$=J[0]+"."+J.slice(1).join("");return $}#B(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);if(isNaN($))return"";if($=this.#P($),!this.#X)return $.toString();if(this.#Y==="prefix")return this.#X+$;else return $+this.#X}#R(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);return $=this.#P($),$.toString()}#D(Q){this.#U=!0,setTimeout(()=>{const $=Q.target.value;if($&&this.#X)if(this.#Y==="prefix")Q.target.setSelectionRange(this.#X.length,$.length);else{const J=$.indexOf(this.#X);if(J>-1)Q.target.setSelectionRange(0,J)}},0)}#E(Q){this.#U=!1;let $=this.#N(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#H(J,!1),this.value=J,Q.target.value=this.#B(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#k(Q){if(this.disabled)return;if(Q.key!=="ArrowUp"&&Q.key!=="ArrowDown")return;Q.preventDefault();const $=this.step||1,J=Q.shiftKey?10:1,Z=$*J*(Q.key==="ArrowUp"?1:-1);let j=this.#N(this.input.value),_=(j!==""?Number(j)/(this.transform||1):0)+Z;_=this.#H(_,!1),this.value=_,this.input.value=this.#B(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#F(Q){let $=this.#N(Q.target.value);if($!=="")this.value=Number($)/(this.transform||1);else this.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#z(Q){Q.stopPropagation();let $=this.#N(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#H(J,!1),this.value=J,Q.target.value=this.#B(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;if(Q.buttons===0){this.#T();return}let $=(this.step||1)*Q.movementX,J=this.#N(this.input.value),Z=Number(J)/(this.transform||1)+$;Z=this.#H(Z,!1),this.value=Z,this.input.value=this.#B(this.value),this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#f(Q){if(this.disabled)return;if(Q.altKey||Q.target.closest("[slot]"))this.#U=!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.#J),window.addEventListener("blur",this.#$)}#T(Q){this.#U=!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.#J),window.removeEventListener("blur",this.#$)}#H(Q,$=!0){let J=Number(Q);if(isNaN(J))return"";if(typeof this.min==="number")J=Math.max(this.min,J);if(typeof this.max==="number")J=Math.min(this.max,J);return J=this.#P(J),J}#P(Q){const $=this.#G??2,J=Math.pow(10,$),Z=Math.round(Q*J)/J;return Number.isInteger(Z)?Z:parseFloat(Z.toFixed($))}static get observedAttributes(){return["value","placeholder","disabled","step","min","max","transform","name","units","unit-position","steppers","precision"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"units":this.#X=J||"",this.input.value=this.#B(this.value);break;case"unit-position":this.#Y=J||"suffix",this.input.value=this.#B(this.value);break;case"transform":this.transform=Number(J)||1,this.input.value=this.#B(this.value);break;case"value":if(this.#U)break;let Z=J!==null&&J!==""?Number(J):"";if(Z!=="")Z=this.#H(Z,!1);this.value=Z,this.input.value=this.#B(this.value);break;case"min":case"max":case"step":if(J===null||J===""){this[Q]=void 0;break}this[Q]=Number(J);break;case"steppers":{const j=J!==null&&J!=="false";this.#L(j);break}case"precision":this.#G=J!==null?Number(J):2,this.input.value=this.#B(this.value);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-number",U0);class G0 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,$,J){if(this[Q]=J,Q==="name")this.img?.setAttribute("alt",J),this.name=J,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials);else if(Q==="src")this.src=J,this.setSrc(this.src)}}customElements.define("fig-avatar",G0);class L0 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")||w();this.input.setAttribute("id",Q),this.label.setAttribute("for",Q)}})}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(this.label)this.label.textContent=J;break}}focus(){this.input.focus()}}customElements.define("fig-field",L0);class N0 extends HTMLElement{#Q=null;#J=null;#$=null;#Z=null;#q=new Set;#K=0;#_=null;#W=null;#j=new Set(["variant","color","text","full"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#X();if(this.#Y(),this.#G(),this.#M(),!this.#Z)this.#Z=new MutationObserver((Q)=>{let $=!1,J=!1;for(let Z of Q)if(Z.type==="attributes"){if(Z.attributeName&&this.#j.has(Z.attributeName))continue;if(Z.attributeName==="label"||Z.attributeName==="direction")$=!0;else J=!0}if($)this.#Y();if(J)this.#G()});this.#Z.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#Z?.disconnect(),this.#K)cancelAnimationFrame(this.#K),this.#K=0;this.#N()}attributeChangedCallback(Q,$,J){if($===J||!this.#Q)return;if(Q==="label"||Q==="direction")this.#Y()}#X(){const Q=Array.from(this.childNodes).filter((j)=>{return j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())}),$=document.createElement("fig-field"),J=document.createElement("label"),Z=document.createElement("fig-slider");Z.setAttribute("text","true");for(let j of this.#U()){const _=this.getAttribute(j);Z.setAttribute(j,_??"")}$.append(J,Z),this.#Q=$,this.#J=J,this.#$=Z,this.replaceChildren($);for(let j of Q)this.#$.appendChild(j)}#Y(){if(!this.#Q||!this.#J)return;const Q=this.hasAttribute("label"),$=this.getAttribute("label");if(Q&&($??"").trim()===""){if(this.#J.parentElement===this.#Q)this.#J.remove()}else if(this.#J.textContent=Q?$??"":"Label",this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J);this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#G(){if(!this.#$)return;const Q=this.#U(),$=new Set(Q.filter((Z)=>Z!=="text"));for(let Z of this.#q)if(!$.has(Z))this.#$.removeAttribute(Z);for(let Z of Q){if(Z==="text")continue;const j=this.getAttribute(Z);this.#$.setAttribute(Z,j??"")}this.#$.removeAttribute("variant"),this.#$.removeAttribute("color"),this.#$.removeAttribute("transform"),this.#$.removeAttribute("full"),this.#$.setAttribute("text","true");const J=(this.getAttribute("type")||"range").toLowerCase();if(J==="delta"||J==="stepper")this.#$.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#$.removeAttribute("default");if(J==="stepper")this.#$.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#$.removeAttribute("step");if(J==="opacity")this.#$.style.setProperty("--color","var(--figma-color-bg-tertiary)");else this.#$.style.removeProperty("--color");this.#q=$,this.#O()}#U(){const Q=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter(($)=>!Q.has($)&&!this.#j.has($))}#O(){if(this.#K)cancelAnimationFrame(this.#K);this.#K=requestAnimationFrame(()=>{this.#K=0,this.#L()})}#L(){if(!this.#$)return;const Q=this.#$.querySelector("fig-input-number");if(!Q)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){Q.removeAttribute("steppers");return}const J=this.getAttribute("steppers");Q.setAttribute("steppers",J??"")}#M(){if(!this.#$)return;if(!this.#_)this.#_=this.#B.bind(this,"input");if(!this.#W)this.#W=this.#B.bind(this,"change");this.#$.addEventListener("input",this.#_),this.#$.addEventListener("change",this.#W)}#N(){if(!this.#$)return;if(this.#_)this.#$.removeEventListener("input",this.#_);if(this.#W)this.#$.removeEventListener("change",this.#W)}#B(Q,$){$.stopPropagation();const J=$ instanceof CustomEvent&&$.detail!==void 0?$.detail:this.#$?.value;this.dispatchEvent(new CustomEvent(Q,{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}}customElements.define("fig-field-slider",N0);class B0 extends HTMLElement{rgba;hex;alpha=100;#Q;#J;#$;#Z;constructor(){super()}get picker(){return this.getAttribute("picker")||"native"}set picker(Q){this.setAttribute("picker",Q)}#q(){const Q={},$=this.getAttribute("experimental");if($)Q.experimental=$;for(let{name:J,value:Z}of this.attributes)if(J.startsWith("picker-")&&J!=="picker-anchor")Q[J.slice(7)]=Z;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([J,Z])=>`${J}="${Z}"`).join(" ")}connectedCallback(){this.#K(this.getAttribute("value"));const Q=this.picker==="figma",$=this.picker==="false",J=this.getAttribute("alpha")==="true",Z=this.#q();let j="";if(this.getAttribute("text")){let _=`<fig-input-text
70
70
  type="text"
71
71
  placeholder="000000"
72
72
  value="${this.hexOpaque.slice(1).toUpperCase()}">
73
- </fig-input-text>`;if(J)j+=`<fig-tooltip text="Opacity">
73
+ </fig-input-text>`;if(J)_+=`<fig-tooltip text="Opacity">
74
74
  <fig-input-number
75
75
  placeholder="##"
76
76
  min="0"
@@ -78,10 +78,10 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
78
78
  value="${this.alpha}"
79
79
  units="%">
80
80
  </fig-input-number>
81
- </fig-tooltip>`;let K="";if(!$)K=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'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>`;_=`<div class="input-combo">
81
+ </fig-tooltip>`;let K="";if(!$)K=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'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">
82
82
  ${K}
83
- ${j}
84
- </div>`}else if($)_="";else _=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'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=_,requestAnimationFrame(()=>{if(this.#Q=this.querySelector("fig-chit"),this.#J=this.querySelector("fig-fill-picker"),this.#$=this.querySelector("fig-input-text:not([type=number])"),this.#_=this.querySelector("fig-input-number"),this.#Q)this.#Q.disabled=this.hasAttribute("disabled"),this.#Q.addEventListener("input",this.#G.bind(this));if(this.#J){const j=this.getAttribute("picker-anchor");if(j==="self")this.#J.anchorElement=this;else if(j){const K=document.querySelector(j);if(K)this.#J.anchorElement=K}if(this.hasAttribute("disabled"))this.#J.setAttribute("disabled","");this.#J.addEventListener("input",this.#Y.bind(this)),this.#J.addEventListener("change",this.#q.bind(this))}if(this.#$){const j=this.rgbAlphaToHex(this.rgba,1);if(this.#$.value=j.slice(1).toUpperCase(),this.#Q)this.#Q.background=j;this.#$.addEventListener("input",this.#j.bind(this)),this.#$.addEventListener("change",this.#q.bind(this))}if(this.#_)this.#_.addEventListener("input",this.#X.bind(this)),this.#_.addEventListener("change",this.#q.bind(this))})}#Z(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)}#j(Q){Q.stopPropagation();let $=Q.target.value.replace("#","");if(this.#Z("#"+$),this.#_)this.#_.setAttribute("value",this.alpha);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque);this.#L()}#X(Q){Q.stopPropagation();const $=Number(Q.target.value)||0,Z=Math.round($/100*255).toString(16).padStart(2,"0");if(this.#Z(this.hexOpaque+Z),this.#Q)this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));this.#L()}#q(Q){Q.stopPropagation(),this.#W()}focus(){this.#Q.focus()}#G(Q){if(Q.stopPropagation(),this.#Z(Q.target.value),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());this.#L()}#Y(Q){Q.stopPropagation();const $=Q.detail;if($&&$.color){let J=$.color;if($.alpha!==void 0){const Z=Math.round($.alpha*255).toString(16).padStart(2,"0");J=$.color+Z}if(this.#Z(J),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#_&&$.alpha!==void 0)this.#_.setAttribute("value",Math.round($.alpha*100));if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);this.#L()}}#L(){const Q=new CustomEvent("input",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}#W(){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,$,J){if($===J)return;switch(Q){case"value":if(this.#Z(J),this.#$)this.#$.setAttribute("value",this.value);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));if(this.#_)this.#_.setAttribute("value",this.alpha);break;case"mode":if(this.#J&&J)this.#J.setAttribute("mode",J);break;case"picker":break}}rgbAlphaToHex({r:Q,g:$,b:J},Z=1){Q=Math.max(0,Math.min(255,Math.round(Q))),$=Math.max(0,Math.min(255,Math.round($))),J=Math.max(0,Math.min(255,Math.round(J))),Z=Math.max(0,Math.min(1,Z));const _=Q.toString(16).padStart(2,"0"),j=$.toString(16).padStart(2,"0"),K=J.toString(16).padStart(2,"0");if(Z===1)return`#${_}${j}${K}`.toUpperCase();const X=Math.round(Z*255).toString(16).padStart(2,"0");return`#${_}${j}${K}${X}`.toUpperCase()}convertToRGBA(Q){let $,J,Z,_=1;if(Q.startsWith("#")){let j=Q.slice(1);if(j.length===8)_=parseInt(j.slice(6),16)/255,j=j.slice(0,6);$=parseInt(j.slice(0,2),16),J=parseInt(j.slice(2,4),16),Z=parseInt(j.slice(4,6),16)}else if(Q.startsWith("rgba")||Q.startsWith("rgb")){let j=Q.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(j)$=parseInt(j[1]),J=parseInt(j[2]),Z=parseInt(j[3]),_=j[4]?parseFloat(j[4]):1}else if(Q.startsWith("hsla")||Q.startsWith("hsl")){let j=Q.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)/);if(j){let K=parseInt(j[1])/360,q=parseInt(j[2])/100,X=parseInt(j[3])/100;if(_=j[4]?parseFloat(j[4]):1,q===0)$=J=Z=X;else{let W=(G,N,B)=>{if(B<0)B+=1;if(B>1)B-=1;if(B<0.16666666666666666)return G+(N-G)*6*B;if(B<0.5)return N;if(B<0.6666666666666666)return G+(N-G)*(0.6666666666666666-B)*6;return G},L=X<0.5?X*(1+q):X+q-X*q,U=2*X-L;$=W(U,L,K+0.3333333333333333),J=W(U,L,K),Z=W(U,L,K-0.3333333333333333)}$=Math.round($*255),J=Math.round(J*255),Z=Math.round(Z*255)}}else return null;return{r:$,g:J,b:Z,a:_}}}customElements.define("fig-input-color",L0);class U0 extends HTMLElement{#Q="solid";#J;#$;#_;#K={color:"#D9D9D9",alpha:1};#Z={type:"linear",angle:180,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#j={url:null,scaleMode:"fill",scale:50,opacity:1};#X={url:null,scaleMode:"fill",opacity:1};#q={snapshot:null,opacity:1};constructor(){super()}static get observedAttributes(){return["value","disabled","mode","experimental","alpha"]}connectedCallback(){this.#G(),this.#L()}#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.#K.color=$.color;if($.alpha!==void 0)this.#K.alpha=$.alpha;if($.opacity!==void 0)this.#K.alpha=$.opacity/100;break;case"gradient":if($.gradient)this.#Z={...this.#Z,...$.gradient};break;case"image":if($.image)this.#j={...this.#j,...$.image};break;case"video":if($.video)this.#X={...this.#X,...$.video};break;case"webcam":if($.webcam)this.#q={...this.#q,...$.webcam};if($.opacity!==void 0)this.#q.opacity=$.opacity;break}}catch($){if(Q.startsWith("#")){if(this.#Q="solid",this.#K.color=Q.slice(0,7),Q.length>7){const J=Q.slice(7,9);this.#K.alpha=parseInt(J,16)/255}}}}#Y(){const Q={},$=this.getAttribute("mode");if($)Q.mode=$;const J=this.getAttribute("experimental");if(J)Q.experimental=J;const Z=this.getAttribute("alpha");if(Z)Q.alpha=Z;for(let{name:_,value:j}of this.attributes)if(_.startsWith("picker-")&&_!=="picker-anchor")Q[_.slice(7)]=j;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([_,j])=>`${_}="${j}"`).join(" ")}#L(){const Q=this.hasAttribute("disabled"),$=JSON.stringify(this.value),J=this.getAttribute("alpha")!=="false",Z=(K)=>J?`<fig-tooltip text="Opacity">
83
+ ${_}
84
+ </div>`}else if($)j="";else j=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'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.#J=this.querySelector("fig-fill-picker"),this.#$=this.querySelector("fig-input-text:not([type=number])"),this.#Z=this.querySelector("fig-input-number"),this.#Q)this.#Q.disabled=this.hasAttribute("disabled"),this.#Q.addEventListener("input",this.#X.bind(this));if(this.#J){const _=this.getAttribute("picker-anchor");if(_==="self")this.#J.anchorElement=this;else if(_){const K=document.querySelector(_);if(K)this.#J.anchorElement=K}if(this.hasAttribute("disabled"))this.#J.setAttribute("disabled","");this.#J.addEventListener("input",this.#Y.bind(this)),this.#J.addEventListener("change",this.#j.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.#j.bind(this))}if(this.#Z)this.#Z.addEventListener("input",this.#W.bind(this)),this.#Z.addEventListener("change",this.#j.bind(this))})}#K(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.#K("#"+$),this.#Z)this.#Z.setAttribute("value",this.alpha);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque);this.#G()}#W(Q){Q.stopPropagation();const $=Number(Q.target.value)||0,Z=Math.round($/100*255).toString(16).padStart(2,"0");if(this.#K(this.hexOpaque+Z),this.#Q)this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));this.#G()}#j(Q){Q.stopPropagation(),this.#U()}focus(){this.#Q.focus()}#X(Q){if(Q.stopPropagation(),this.#K(Q.target.value),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());this.#G()}#Y(Q){Q.stopPropagation();const $=Q.detail;if($&&$.color){let J=$.color;if($.alpha!==void 0){const Z=Math.round($.alpha*255).toString(16).padStart(2,"0");J=$.color+Z}if(this.#K(J),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#Z&&$.alpha!==void 0)this.#Z.setAttribute("value",Math.round($.alpha*100));if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);this.#G()}}#G(){const Q=new CustomEvent("input",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}#U(){const Q=new CustomEvent("change",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}static get observedAttributes(){return["value","style","mode","picker","experimental","alpha"]}get mode(){return this.getAttribute("mode")}set mode(Q){this.setAttribute("mode",Q)}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#K(J),this.#$)this.#$.setAttribute("value",this.value);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));if(this.#Z)this.#Z.setAttribute("value",this.alpha);break;case"mode":if(this.#J&&J)this.#J.setAttribute("mode",J);break;case"picker":break;case"alpha":this.connectedCallback();break}}rgbAlphaToHex({r:Q,g:$,b:J},Z=1){Q=Math.max(0,Math.min(255,Math.round(Q))),$=Math.max(0,Math.min(255,Math.round($))),J=Math.max(0,Math.min(255,Math.round(J))),Z=Math.max(0,Math.min(1,Z));const j=Q.toString(16).padStart(2,"0"),_=$.toString(16).padStart(2,"0"),K=J.toString(16).padStart(2,"0");if(Z===1)return`#${j}${_}${K}`.toUpperCase();const X=Math.round(Z*255).toString(16).padStart(2,"0");return`#${j}${_}${K}${X}`.toUpperCase()}convertToRGBA(Q){let $,J,Z,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),J=parseInt(_.slice(2,4),16),Z=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]),J=parseInt(_[2]),Z=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 K=parseInt(_[1])/360,q=parseInt(_[2])/100,X=parseInt(_[3])/100;if(j=_[4]?parseFloat(_[4]):1,q===0)$=J=Z=X;else{let W=(L,F,N)=>{if(N<0)N+=1;if(N>1)N-=1;if(N<0.16666666666666666)return L+(F-L)*6*N;if(N<0.5)return F;if(N<0.6666666666666666)return L+(F-L)*(0.6666666666666666-N)*6;return L},Y=X<0.5?X*(1+q):X+q-X*q,U=2*X-Y;$=W(U,Y,K+0.3333333333333333),J=W(U,Y,K),Z=W(U,Y,K-0.3333333333333333)}$=Math.round($*255),J=Math.round(J*255),Z=Math.round(Z*255)}}else return null;return{r:$,g:J,b:Z,a:j}}}customElements.define("fig-input-color",B0);var u0=["srgb","srgb-linear","display-p3","oklab","oklch"],s0=["shorter","longer","increasing","decreasing"];class O0 extends HTMLElement{#Q="solid";#J;#$;#Z;#q={color:"#D9D9D9",alpha:1};#K={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#_={url:null,scaleMode:"fill",scale:50,opacity:1};#W={url:null,scaleMode:"fill",opacity:1};#j={snapshot:null,opacity:1};constructor(){super()}static get observedAttributes(){return["value","disabled","mode","experimental","alpha"]}connectedCallback(){this.#X(),this.#G()}#X(){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.#q.color=$.color;if($.alpha!==void 0)this.#q.alpha=$.alpha;if($.opacity!==void 0)this.#q.alpha=$.opacity/100;break;case"gradient":if($.gradient)this.#K=S({...this.#K,...$.gradient});break;case"image":if($.image)this.#_={...this.#_,...$.image};break;case"video":if($.video)this.#W={...this.#W,...$.video};break;case"webcam":if($.webcam)this.#j={...this.#j,...$.webcam};if($.opacity!==void 0)this.#j.opacity=$.opacity;break}}catch($){if(Q.startsWith("#")){if(this.#Q="solid",this.#q.color=Q.slice(0,7),Q.length>7){const J=Q.slice(7,9);this.#q.alpha=parseInt(J,16)/255}}}}#Y(){const Q={},$=this.getAttribute("mode");if($)Q.mode=$;const J=this.getAttribute("experimental");if(J)Q.experimental=J;const Z=this.getAttribute("alpha");if(Z)Q.alpha=Z;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(" ")}#G(){const Q=this.hasAttribute("disabled"),$=JSON.stringify(this.value),J=this.getAttribute("alpha")!=="false",Z=(K)=>J?`<fig-tooltip text="Opacity">
85
85
  <fig-input-number
86
86
  class="fig-input-fill-opacity"
87
87
  placeholder="##"
@@ -91,32 +91,32 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
91
91
  units="%"
92
92
  ${Q?"disabled":""}>
93
93
  </fig-input-number>
94
- </fig-tooltip>`:"";let _="";switch(this.#Q){case"solid":_=`
94
+ </fig-tooltip>`:"";let j="";switch(this.#Q){case"solid":j=`
95
95
  <fig-input-text
96
96
  type="text"
97
97
  class="fig-input-fill-hex"
98
98
  placeholder="000000"
99
- value="${this.#K.color.slice(1).toUpperCase()}"
99
+ value="${this.#q.color.slice(1).toUpperCase()}"
100
100
  ${Q?"disabled":""}>
101
101
  </fig-input-text>
102
- ${Z(Math.round(this.#K.alpha*100))}`;break;case"gradient":_=`
103
- <label class="fig-input-fill-label">${this.#Z.type.charAt(0).toUpperCase()+this.#Z.type.slice(1)}</label>
104
- ${Z(this.#Z.stops[0]?.opacity??100)}`;break;case"image":_=`
102
+ ${Z(Math.round(this.#q.alpha*100))}`;break;case"gradient":j=`
103
+ <label class="fig-input-fill-label">${this.#K.type.charAt(0).toUpperCase()+this.#K.type.slice(1)}</label>
104
+ ${Z(this.#K.stops[0]?.opacity??100)}`;break;case"image":j=`
105
105
  <label class="fig-input-fill-label">Image</label>
106
- ${Z(Math.round((this.#j.opacity??1)*100))}`;break;case"video":_=`
106
+ ${Z(Math.round((this.#_.opacity??1)*100))}`;break;case"video":j=`
107
107
  <label class="fig-input-fill-label">Video</label>
108
- ${Z(Math.round((this.#X.opacity??1)*100))}`;break;case"webcam":_=`
108
+ ${Z(Math.round((this.#W.opacity??1)*100))}`;break;case"webcam":j=`
109
109
  <label class="fig-input-fill-label">Webcam</label>
110
- ${Z(Math.round((this.#q.opacity??1)*100))}`;break}const j=this.#Y();this.innerHTML=`
110
+ ${Z(Math.round((this.#j.opacity??1)*100))}`;break}const _=this.#Y();this.innerHTML=`
111
111
  <div class="input-combo">
112
- <fig-fill-picker ${j} value='${$}' ${Q?"disabled":""}></fig-fill-picker>
113
- ${_}
114
- </div>`,this.#W()}#W(){requestAnimationFrame(()=>{this.#J=this.querySelector("fig-fill-picker"),this.#$=this.querySelector(".fig-input-fill-opacity"),this.#_=this.querySelector(".fig-input-fill-hex");const Q=this.querySelector(".fig-input-fill-label");if(Q&&this.#J)Q.addEventListener("click",()=>{const $=this.#J.querySelector("fig-chit");if($)$.click()});if(this.#J){const $=this.getAttribute("picker-anchor");if(!$||$==="self")this.#J.anchorElement=this;else{const J=document.querySelector($);if(J)this.#J.anchorElement=J}this.#J.addEventListener("input",(J)=>{J.stopPropagation();const Z=J.detail;if(!Z)return;const _=Z.type,j=_!==this.#Q;switch(this.#Q=_,_){case"solid":this.#K.color=Z.color,this.#K.alpha=Z.alpha;break;case"gradient":if(Z.gradient)this.#Z=Z.gradient;break;case"image":if(Z.image)this.#j=Z.image;break;case"video":if(Z.video)this.#X=Z.video;break}if(j)this.#B();else this.#U();this.#M()}),this.#J.addEventListener("change",(J)=>{J.stopPropagation(),this.#k()})}if(this.#_)this.#_.addEventListener("input",($)=>{$.stopPropagation();const J="#"+$.target.value.replace("#","");this.#K.color=J,this.#O(),this.#M()}),this.#_.addEventListener("change",($)=>{$.stopPropagation(),this.#k()});if(this.#$)this.#$.addEventListener("input",($)=>{$.stopPropagation();const J=parseFloat($.target.value),Z=isNaN(J)?100:J,_=Z/100;switch(this.#Q){case"solid":this.#K.alpha=_;break;case"gradient":this.#Z.stops.forEach((j)=>{j.opacity=Z});break;case"image":this.#j.opacity=_;break;case"video":this.#X.opacity=_;break;case"webcam":this.#q.opacity=_;break}this.#O(),this.#N(_),this.#M()}),this.#$.addEventListener("change",($)=>{$.stopPropagation(),this.#k()})})}#U(){switch(this.#Q){case"solid":if(this.#_)this.#_.setAttribute("value",this.#K.color.slice(1).toUpperCase());if(this.#$)this.#$.setAttribute("value",Math.round(this.#K.alpha*100));break;case"gradient":{if(this.#$)this.#$.setAttribute("value",this.#Z.stops[0]?.opacity??100);const Q=this.querySelector(".fig-input-fill-label");if(Q){const $=this.#Z.type.charAt(0).toUpperCase()+this.#Z.type.slice(1);Q.textContent=$}break}case"image":if(this.#$)this.#$.setAttribute("value",Math.round((this.#j.opacity??1)*100));break;case"video":if(this.#$)this.#$.setAttribute("value",Math.round((this.#X.opacity??1)*100));break;case"webcam":if(this.#$)this.#$.setAttribute("value",Math.round((this.#q.opacity??1)*100));break}}#B(){const Q=this.hasAttribute("disabled"),$=this.querySelector(".input-combo");if(!$)return;const J=$.querySelector(".fig-input-fill-label"),Z=$.querySelector(".fig-input-fill-hex"),_=$.querySelector(".fig-input-fill-opacity"),j=$.querySelectorAll("fig-tooltip");J?.remove(),Z?.remove(),j.forEach((q)=>q.remove());let K="";switch(this.#Q){case"solid":K=`
112
+ <fig-fill-picker ${_} value='${$}' ${Q?"disabled":""}></fig-fill-picker>
113
+ ${j}
114
+ </div>`,this.#U()}#U(){requestAnimationFrame(()=>{this.#J=this.querySelector("fig-fill-picker"),this.#$=this.querySelector(".fig-input-fill-opacity"),this.#Z=this.querySelector(".fig-input-fill-hex");const Q=this.querySelector(".fig-input-fill-label");if(Q&&this.#J)Q.addEventListener("click",()=>{const $=this.#J.querySelector("fig-chit");if($)$.click()});if(this.#J){const $=this.getAttribute("picker-anchor");if(!$||$==="self")this.#J.anchorElement=this;else{const J=document.querySelector($);if(J)this.#J.anchorElement=J}this.#J.addEventListener("input",(J)=>{J.stopPropagation();const Z=J.detail;if(!Z)return;const j=Z.type,_=j!==this.#Q;switch(this.#Q=j,j){case"solid":this.#q.color=Z.color,this.#q.alpha=Z.alpha;break;case"gradient":if(Z.gradient)this.#K=S({...this.#K,...Z.gradient});break;case"image":if(Z.image)this.#_=Z.image;break;case"video":if(Z.video)this.#W=Z.video;break}if(_)this.#L();else this.#O();this.#B()}),this.#J.addEventListener("change",(J)=>{J.stopPropagation(),this.#R()})}if(this.#Z)this.#Z.addEventListener("input",($)=>{$.stopPropagation();const J="#"+$.target.value.replace("#","");this.#q.color=J,this.#M(),this.#B()}),this.#Z.addEventListener("change",($)=>{$.stopPropagation(),this.#R()});if(this.#$)this.#$.addEventListener("input",($)=>{$.stopPropagation();const J=parseFloat($.target.value),Z=isNaN(J)?100:J,j=Z/100;switch(this.#Q){case"solid":this.#q.alpha=j;break;case"gradient":this.#K.stops.forEach((_)=>{_.opacity=Z});break;case"image":this.#_.opacity=j;break;case"video":this.#W.opacity=j;break;case"webcam":this.#j.opacity=j;break}this.#M(),this.#N(j),this.#B()}),this.#$.addEventListener("change",($)=>{$.stopPropagation(),this.#R()})})}#O(){switch(this.#Q){case"solid":if(this.#Z)this.#Z.setAttribute("value",this.#q.color.slice(1).toUpperCase());if(this.#$)this.#$.setAttribute("value",Math.round(this.#q.alpha*100));break;case"gradient":{if(this.#$)this.#$.setAttribute("value",this.#K.stops[0]?.opacity??100);const Q=this.querySelector(".fig-input-fill-label");if(Q){const $=this.#K.type.charAt(0).toUpperCase()+this.#K.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.#W.opacity??1)*100));break;case"webcam":if(this.#$)this.#$.setAttribute("value",Math.round((this.#j.opacity??1)*100));break}}#L(){const Q=this.hasAttribute("disabled"),$=this.querySelector(".input-combo");if(!$)return;const J=$.querySelector(".fig-input-fill-label"),Z=$.querySelector(".fig-input-fill-hex"),j=$.querySelector(".fig-input-fill-opacity"),_=$.querySelectorAll("fig-tooltip");J?.remove(),Z?.remove(),_.forEach((q)=>q.remove());let K="";switch(this.#Q){case"solid":K=`
115
115
  <fig-input-text
116
116
  type="text"
117
117
  class="fig-input-fill-hex"
118
118
  placeholder="000000"
119
- value="${this.#K.color.slice(1).toUpperCase()}"
119
+ value="${this.#q.color.slice(1).toUpperCase()}"
120
120
  ${Q?"disabled":""}>
121
121
  </fig-input-text>
122
122
  <fig-tooltip text="Opacity">
@@ -125,19 +125,19 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
125
125
  placeholder="##"
126
126
  min="0"
127
127
  max="100"
128
- value="${Math.round(this.#K.alpha*100)}"
128
+ value="${Math.round(this.#q.alpha*100)}"
129
129
  units="%"
130
130
  ${Q?"disabled":""}>
131
131
  </fig-input-number>
132
132
  </fig-tooltip>`;break;case"gradient":K=`
133
- <label class="fig-input-fill-label">${this.#Z.type.charAt(0).toUpperCase()+this.#Z.type.slice(1)}</label>
133
+ <label class="fig-input-fill-label">${this.#K.type.charAt(0).toUpperCase()+this.#K.type.slice(1)}</label>
134
134
  <fig-tooltip text="Opacity">
135
135
  <fig-input-number
136
136
  class="fig-input-fill-opacity"
137
137
  placeholder="##"
138
138
  min="0"
139
139
  max="100"
140
- value="${this.#Z.stops[0]?.opacity??100}"
140
+ value="${this.#K.stops[0]?.opacity??100}"
141
141
  units="%"
142
142
  ${Q?"disabled":""}>
143
143
  </fig-input-number>
@@ -149,7 +149,7 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
149
149
  placeholder="##"
150
150
  min="0"
151
151
  max="100"
152
- value="${Math.round((this.#j.opacity??1)*100)}"
152
+ value="${Math.round((this.#_.opacity??1)*100)}"
153
153
  units="%"
154
154
  ${Q?"disabled":""}>
155
155
  </fig-input-number>
@@ -161,7 +161,7 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
161
161
  placeholder="##"
162
162
  min="0"
163
163
  max="100"
164
- value="${Math.round((this.#X.opacity??1)*100)}"
164
+ value="${Math.round((this.#W.opacity??1)*100)}"
165
165
  units="%"
166
166
  ${Q?"disabled":""}>
167
167
  </fig-input-number>
@@ -173,12 +173,13 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
173
173
  placeholder="##"
174
174
  min="0"
175
175
  max="100"
176
- value="${Math.round((this.#q.opacity??1)*100)}"
176
+ value="${Math.round((this.#j.opacity??1)*100)}"
177
177
  units="%"
178
178
  ${Q?"disabled":""}>
179
179
  </fig-input-number>
180
- </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",K),requestAnimationFrame(()=>{this.#$=this.querySelector(".fig-input-fill-opacity"),this.#_=this.querySelector(".fig-input-fill-hex");const q=this.querySelector(".fig-input-fill-label");if(q&&this.#J)q.addEventListener("click",()=>{const X=this.#J.querySelector("fig-chit");if(X)X.click()});if(this.#_)this.#_.addEventListener("input",(X)=>{X.stopPropagation();const W="#"+X.target.value.replace("#","");this.#K.color=W,this.#O(),this.#M()}),this.#_.addEventListener("change",(X)=>{X.stopPropagation(),this.#k()});if(this.#$)this.#$.addEventListener("input",(X)=>{X.stopPropagation();const W=parseFloat(X.target.value),L=isNaN(W)?100:W,U=L/100;switch(this.#Q){case"solid":this.#K.alpha=U;break;case"gradient":this.#Z.stops.forEach((G)=>{G.opacity=L});break;case"image":this.#j.opacity=U;break;case"video":this.#X.opacity=U;break;case"webcam":this.#q.opacity=U;break}this.#O(),this.#N(U),this.#M()}),this.#$.addEventListener("change",(X)=>{X.stopPropagation(),this.#k()})})}#O(){if(this.#J)this.#J.setAttribute("value",JSON.stringify(this.value))}#N(Q){if(this.#J){const $=this.#J.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#M(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#K.color,alpha:this.#K.alpha,opacity:Math.round(this.#K.alpha*100)};case"gradient":return{type:"gradient",gradient:{...this.#Z}};case"image":return{type:"image",image:{...this.#j}};case"video":return{type:"video",video:{...this.#X}};case"webcam":return{type:"webcam",webcam:{...this.#q}};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,$,J){if($===J)return;switch(Q){case"value":const Z=this.#Q;if(this.#G(),this.#J)if(this.#Q!==Z)this.#L();else this.#O(),this.#U();break;case"disabled":if(this.#J)this.#L();break;case"mode":case"experimental":if(this.#J)if(J)this.#J.setAttribute(Q,J);else this.#J.removeAttribute(Q);break}}}customElements.define("fig-input-fill",U0);class h extends HTMLElement{#Q=null;#J;constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",V()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.input.setAttribute("role","checkbox"),this.#J=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.#J),this.input.addEventListener("change",this.#J),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","indeterminate"]}#$(){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.#J),this.input.remove()}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(J)this.#$(),this.#Q.innerText=J;else if(this.#Q)this.#Q.remove(),this.#Q=null;break;case"checked":if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.checked&&this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"indeterminate":if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"value":this.input.value=J;break;default:this.input[Q]=J,this.input.setAttribute(Q,J);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",h);class N0 extends h{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}customElements.define("fig-radio",N0);class B0 extends h{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",B0);class O0 extends HTMLDialogElement{_defaultOffset=16;_autoCloseTimer=null;constructor(){super()}getOffset(){return parseInt(this.getAttribute("offset")??this._defaultOffset)}connectedCallback(){if(typeof this._defaultOffset!=="number")this._defaultOffset=16;if(typeof this._autoCloseTimer==="undefined")this._autoCloseTimer=null;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.addCloseListeners(),this.applyPosition(),Q)this.showToast()})}disconnectedCallback(){this.clearAutoClose()}addCloseListeners(){this.querySelectorAll("[close-toast]").forEach((Q)=>{Q.removeEventListener("click",this.handleClose),Q.addEventListener("click",this.handleClose.bind(this))})}handleClose(){this.hideToast()}applyPosition(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.getOffset()}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}startAutoClose(){this.clearAutoClose();const Q=parseInt(this.getAttribute("duration")??"5000");if(Q>0)this._autoCloseTimer=setTimeout(()=>{this.hideToast()},Q)}clearAutoClose(){if(this._autoCloseTimer)clearTimeout(this._autoCloseTimer),this._autoCloseTimer=null}#Q(){if(this.getAttribute("theme")!=="auto")return;const $=(getComputedStyle(document.documentElement).colorScheme||"").includes("dark");this.style.colorScheme=$?"light":"dark"}showToast(){this.#Q(),this.show(),this.applyPosition(),this.startAutoClose(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.clearAutoClose(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme"]}attributeChangedCallback(Q,$,J){if(Q==="offset")this.applyPosition();if(Q==="open")if(J!==null&&J!=="false")this.showToast();else this.hideToast();if(Q==="theme")if(J==="auto")this.#Q();else this.style.removeProperty("color-scheme")}}c("fig-toast",O0,{extends:"dialog"});class M0 extends HTMLElement{#Q=!1;#J=null;constructor(){super();this.#J=this.handleSelectInput.bind(this)}getOptionsFromAttribute(){return(this.getAttribute("options")||"").split(",")}connectedCallback(){const Q=Array.from(this.children).find((_)=>_.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"),J=$?`experimental="${$}"`:"",Z=this.#Q?"":`<fig-dropdown type="dropdown" ${J}>
181
- ${this.options.map((_)=>`<option>${_}</option>`).join("")}
180
+ </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",K),requestAnimationFrame(()=>{this.#$=this.querySelector(".fig-input-fill-opacity"),this.#Z=this.querySelector(".fig-input-fill-hex");const q=this.querySelector(".fig-input-fill-label");if(q&&this.#J)q.addEventListener("click",()=>{const X=this.#J.querySelector("fig-chit");if(X)X.click()});if(this.#Z)this.#Z.addEventListener("input",(X)=>{X.stopPropagation();const W="#"+X.target.value.replace("#","");this.#q.color=W,this.#M(),this.#B()}),this.#Z.addEventListener("change",(X)=>{X.stopPropagation(),this.#R()});if(this.#$)this.#$.addEventListener("input",(X)=>{X.stopPropagation();const W=parseFloat(X.target.value),Y=isNaN(W)?100:W,U=Y/100;switch(this.#Q){case"solid":this.#q.alpha=U;break;case"gradient":this.#K.stops.forEach((L)=>{L.opacity=Y});break;case"image":this.#_.opacity=U;break;case"video":this.#W.opacity=U;break;case"webcam":this.#j.opacity=U;break}this.#M(),this.#N(U),this.#B()}),this.#$.addEventListener("change",(X)=>{X.stopPropagation(),this.#R()})})}#M(){if(this.#J)this.#J.setAttribute("value",JSON.stringify(this.value))}#N(Q){if(this.#J){const $=this.#J.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#B(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#R(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#q.color,alpha:this.#q.alpha,opacity:Math.round(this.#q.alpha*100)};case"gradient":return{type:"gradient",gradient:u(this.#K)};case"image":return{type:"image",image:{...this.#_}};case"video":return{type:"video",video:{...this.#W}};case"webcam":return{type:"webcam",webcam:{...this.#j}};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,$,J){if($===J)return;switch(Q){case"value":const Z=this.#Q;if(this.#X(),this.#J)if(this.#Q!==Z)this.#G();else this.#M(),this.#O();break;case"disabled":if(this.#J)this.#G();break;case"mode":case"experimental":if(this.#J)if(J)this.#J.setAttribute(Q,J);else this.#J.removeAttribute(Q);break}}}customElements.define("fig-input-fill",O0);class M0 extends HTMLElement{#Q;#J={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled","experimental","picker-anchor"]}connectedCallback(){this.#$(),this.#q()}#$(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if($?.type==="gradient"&&$.gradient){this.#J=S({...this.#J,...$.gradient});return}if($?.gradient)this.#J=S({...this.#J,...$.gradient})}catch($){}}#Z(){const Q={},$=this.getAttribute("experimental");if($)Q.experimental=$;for(let{name:J,value:Z}of this.attributes)if(J.startsWith("picker-")&&J!=="picker-anchor")Q[J.slice(7)]=Z;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([J,Z])=>`${J}="${Z}"`).join(" ")}#q(){const Q=this.hasAttribute("disabled"),$=JSON.stringify(this.value),J=this.#Z();this.innerHTML=`
181
+ <fig-fill-picker mode="gradient" ${J} value='${$}' ${Q?"disabled":""}></fig-fill-picker>`,this.#K()}#K(){requestAnimationFrame(()=>{if(this.#Q=this.querySelector("fig-fill-picker"),!this.#Q)return;const Q=this.getAttribute("picker-anchor");if(!Q||Q==="self")this.#Q.anchorElement=this;else{const $=document.querySelector(Q);if($)this.#Q.anchorElement=$}this.#Q.addEventListener("input",($)=>{$.stopPropagation();const J=$.detail;if(J?.gradient)this.#J=S({...this.#J,...J.gradient}),this.#_()}),this.#Q.addEventListener("change",($)=>{$.stopPropagation(),this.#W()})})}#_(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#W(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){return{type:"gradient",gradient:u(this.#J)}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#$(),this.#Q)this.#Q.setAttribute("value",JSON.stringify(this.value));break;case"disabled":case"experimental":case"picker-anchor":if(this.#Q)this.#q();break}}}customElements.define("fig-input-gradient",M0);class g extends HTMLElement{#Q=null;#J;constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",w()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.input.setAttribute("role","checkbox"),this.#J=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.#J),this.input.addEventListener("change",this.#J),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","indeterminate"]}#$(){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.#J),this.input.remove()}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(J)this.#$(),this.#Q.innerText=J;else if(this.#Q)this.#Q.remove(),this.#Q=null;break;case"checked":if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.checked&&this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"indeterminate":if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"value":this.input.value=J;break;default:this.input[Q]=J,this.input.setAttribute(Q,J);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",g);class R0 extends g{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}customElements.define("fig-radio",R0);class F0 extends g{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",F0);class D0 extends HTMLDialogElement{_defaultOffset=16;_autoCloseTimer=null;constructor(){super()}getOffset(){return parseInt(this.getAttribute("offset")??this._defaultOffset)}connectedCallback(){if(typeof this._defaultOffset!=="number")this._defaultOffset=16;if(typeof this._autoCloseTimer==="undefined")this._autoCloseTimer=null;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.addCloseListeners(),this.applyPosition(),Q)this.showToast()})}disconnectedCallback(){this.clearAutoClose()}addCloseListeners(){this.querySelectorAll("[close-toast]").forEach((Q)=>{Q.removeEventListener("click",this.handleClose),Q.addEventListener("click",this.handleClose.bind(this))})}handleClose(){this.hideToast()}applyPosition(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.getOffset()}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}startAutoClose(){this.clearAutoClose();const Q=parseInt(this.getAttribute("duration")??"5000");if(Q>0)this._autoCloseTimer=setTimeout(()=>{this.hideToast()},Q)}clearAutoClose(){if(this._autoCloseTimer)clearTimeout(this._autoCloseTimer),this._autoCloseTimer=null}#Q(){if(this.getAttribute("theme")!=="auto")return;const $=(getComputedStyle(document.documentElement).colorScheme||"").includes("dark");this.style.colorScheme=$?"light":"dark"}showToast(){this.#Q(),this.show(),this.applyPosition(),this.startAutoClose(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.clearAutoClose(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme"]}attributeChangedCallback(Q,$,J){if(Q==="offset")this.applyPosition();if(Q==="open")if(J!==null&&J!=="false")this.showToast();else this.hideToast();if(Q==="theme")if(J==="auto")this.#Q();else this.style.removeProperty("color-scheme")}}p("fig-toast",D0,{extends:"dialog"});class A0 extends HTMLElement{#Q=!1;#J=null;constructor(){super();this.#J=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"),J=$?`experimental="${$}"`:"",Z=this.#Q?"":`<fig-dropdown type="dropdown" ${J}>
182
+ ${this.options.map((j)=>`<option>${j}</option>`).join("")}
182
183
  </fig-dropdown>`;this.innerHTML=`<div class="input-combo">
183
184
  <fig-input-text placeholder="${this.placeholder}">
184
185
  </fig-input-text>
@@ -188,30 +189,30 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
188
189
  </svg>
189
190
  ${Z}
190
191
  </fig-button>
191
- </div>`,requestAnimationFrame(()=>{this.input=this.querySelector("fig-input-text");const _=this.querySelector("fig-button");if(this.#Q&&Q&&_){if(!Q.hasAttribute("type"))Q.setAttribute("type","dropdown");if($)Q.setAttribute("experimental",$);_.append(Q)}if(this.dropdown=this.querySelector("fig-dropdown"),this.dropdown?.removeEventListener("input",this.#J),this.dropdown?.addEventListener("input",this.#J),this.input)this.input.setAttribute("value",this.value);if(this.hasAttribute("disabled"))this.#$(!0)})}disconnectedCallback(){this.dropdown?.removeEventListener("input",this.#J)}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,$,J){switch(Q){case"options":if(this.options=J.split(","),this.dropdown&&!this.#Q)this.dropdown.innerHTML=this.options.map((Z)=>`<option>${Z}</option>`).join("");break;case"placeholder":if(this.placeholder=J,this.input)this.input.setAttribute("placeholder",J);break;case"value":if(this.value=J,this.input)this.input.setAttribute("value",J);break;case"disabled":this.#$(J!==null&&J!=="false");break;case"experimental":if(this.dropdown){if(J)this.dropdown.setAttribute("experimental",J);else if(!this.#Q)this.dropdown.removeAttribute("experimental")}break}}}customElements.define("fig-combo-input",M0);class k0 extends HTMLElement{#Q="color";#J=null;#$=!1;constructor(){super();this.#J=this.#q.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha"]}connectedCallback(){this.#X(),this.#_()}#_(){const Q=this.getAttribute("alpha");if(Q!==null)this.style.setProperty("--alpha",Q);else this.style.removeProperty("--alpha")}#K(Q){if(!Q)return"color";const $=Q.toLowerCase();if($.includes("gradient"))return"gradient";if($.includes("url("))return"image";return"color"}#Z(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"}}#j(Q){if(!Q||!Q.includes("var("))return Q;const $=this.style.background;this.style.background=Q;const J=getComputedStyle(this),Z=J.backgroundImage,_=J.backgroundColor;if(this.style.background=$,Z&&Z!=="none")return Z;return _||Q}#X(){const Q=this.getAttribute("background")||"#D9D9D9",$=Q.includes("var("),J=$?this.#j(Q):Q,Z=this.#K(J);if(Z!==this.#Q||!this.input){if(this.#Q=Z,this.setAttribute("data-type",this.#Q),this.input)this.input.removeEventListener("input",this.#J);if(this.#Q==="color"){const _=this.#Z(J);if(this.innerHTML=`<input type="color" value="${_}" />`,this.input=this.querySelector("input"),!$)this.input.addEventListener("input",this.#J)}else this.innerHTML="",this.input=null}else if(this.#Q==="color"&&this.input){const _=this.#Z(J);if(this.input.value!==_)this.input.value=_}this.style.setProperty("--chit-background",Q)}#q(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,$,J){if($===J)return;if(Q==="background"){if(this.#$){this.style.setProperty("--chit-background",J);return}this.#X()}else if(Q==="alpha")this.#_()}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",k0);class D0 extends HTMLElement{#Q=null;#J=this.#X.bind(this);#$=this.#Z.bind(this);constructor(){super()}#_(){const Q=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";return`<fig-chit size="large" data-type="image" background="${this.src?`url(${this.src})`:Q?"url()":"var(--figma-color-bg-secondary)"}" disabled${Q?" checkerboard":""}></fig-chit><div>${this.upload?`<fig-button variant="overlay" type="upload">
192
+ </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.#J),this.dropdown?.addEventListener("input",this.#J),this.input)this.input.setAttribute("value",this.value);if(this.hasAttribute("disabled"))this.#$(!0)})}disconnectedCallback(){this.dropdown?.removeEventListener("input",this.#J)}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,$,J){switch(Q){case"options":if(this.options=J.split(","),this.dropdown&&!this.#Q)this.dropdown.innerHTML=this.options.map((Z)=>`<option>${Z}</option>`).join("");break;case"placeholder":if(this.placeholder=J,this.input)this.input.setAttribute("placeholder",J);break;case"value":if(this.value=J,this.input)this.input.setAttribute("value",J);break;case"disabled":this.#$(J!==null&&J!=="false");break;case"experimental":if(this.dropdown){if(J)this.dropdown.setAttribute("experimental",J);else if(!this.#Q)this.dropdown.removeAttribute("experimental")}break}}}customElements.define("fig-combo-input",A0);class T0 extends HTMLElement{#Q="color";#J=null;#$=!1;constructor(){super();this.#J=this.#j.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha"]}connectedCallback(){this.#W(),this.#Z()}#Z(){const Q=this.getAttribute("alpha");if(Q!==null)this.style.setProperty("--alpha",Q);else this.style.removeProperty("--alpha")}#q(Q){if(!Q)return"color";const $=Q.toLowerCase();if($.includes("gradient"))return"gradient";if($.includes("url("))return"image";return"color"}#K(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"}}#_(Q){if(!Q||!Q.includes("var("))return Q;const $=this.style.background;this.style.background=Q;const J=getComputedStyle(this),Z=J.backgroundImage,j=J.backgroundColor;if(this.style.background=$,Z&&Z!=="none")return Z;return j||Q}#W(){const Q=this.getAttribute("background")||"#D9D9D9",$=Q.includes("var("),J=$?this.#_(Q):Q,Z=this.#q(J);if(Z!==this.#Q||!this.input){if(this.#Q=Z,this.setAttribute("data-type",this.#Q),this.input)this.input.removeEventListener("input",this.#J);if(this.#Q==="color"){const j=this.#K(J);if(this.innerHTML=`<input type="color" value="${j}" />`,this.input=this.querySelector("input"),!$)this.input.addEventListener("input",this.#J)}else this.innerHTML="",this.input=null}else if(this.#Q==="color"&&this.input){const j=this.#K(J);if(this.input.value!==j)this.input.value=j}this.style.setProperty("--chit-background",Q)}#j(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,$,J){if($===J)return;if(Q==="background"){if(this.#$){this.style.setProperty("--chit-background",J);return}this.#W()}else if(Q==="alpha")this.#Z()}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",T0);class E0 extends HTMLElement{#Q=null;#J=this.#W.bind(this);#$=this.#K.bind(this);constructor(){super()}#Z(){const Q=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";return`<fig-chit size="large" data-type="image" background="${this.src?`url(${this.src})`:Q?"url()":"var(--figma-color-bg-secondary)"}" disabled${Q?" checkerboard":""}></fig-chit><div>${this.upload?`<fig-button variant="overlay" type="upload">
192
193
  ${this.label}
193
194
  <input type="file" accept="image/*" />
194
195
  </fig-button>`:""} ${this.download?`<fig-button variant="overlay" icon="true" type="download">
195
196
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
196
197
  <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"/>
197
- </svg></fig-button>`:""}</div>`}connectedCallback(){this.#Q=this.getAttribute("src")||"",this.upload=this.hasAttribute("upload")&&this.getAttribute("upload")!=="false",this.download=this.hasAttribute("download")&&this.getAttribute("download")!=="false",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#_(),this.#K();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.#J),this.downloadButton?.removeEventListener("click",this.#$)}#K(){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.#J),this.fileInput?.addEventListener("change",this.#J);if(this.download)this.downloadButton=this.querySelector("fig-button[type='download']"),this.downloadButton?.removeEventListener("click",this.#$),this.downloadButton?.addEventListener("click",this.#$)})}#Z(){const Q=document.createElement("a");Q.href=this.blob,Q.download="image.png",Q.click()}async#j(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 J=this.getAttribute("aspect-ratio");if(!J||J==="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 Z=document.createElement("canvas"),_=Z.getContext("2d");Z.width=this.image.width,Z.height=this.image.height,_.drawImage(this.image,0,0),this.base64=Z.toDataURL(),Z.toBlob((j)=>{if(this.blob)URL.revokeObjectURL(this.blob);if(j)this.blob=URL.createObjectURL(j)})},this.image.src=Q})}async#X(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((J)=>{$.onload=(Z)=>{this.base64=Z.target.result,J()}}),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","download","aspect-ratio","fit","checkerboard"]}get src(){return this.#Q}set src(Q){this.#Q=Q,this.setAttribute("src",Q)}attributeChangedCallback(Q,$,J){if(Q==="src"){if(this.#Q=J,this.chit){const Z=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";if(this.#Q)this.chit.setAttribute("background",`url(${this.#Q})`);else this.chit.setAttribute("background",Z?"url()":"var(--figma-color-bg-secondary)")}if(this.#Q)this.#j(this.#Q)}if(Q==="upload")this.upload=J!==null&&J!=="false",this.innerHTML=this.#_(),this.#K();if(Q==="download")this.download=J!==null&&J!=="false",this.innerHTML=this.#_(),this.#K();if(Q==="size")this.size=J;if(Q==="aspect-ratio"){if(J&&J!=="auto")this.style.setProperty("--aspect-ratio",J);else if(!J)this.style.removeProperty("--aspect-ratio")}if(Q==="fit")if(J)this.style.setProperty("--fit",J);else this.style.removeProperty("--fit");if(Q==="checkerboard"){if(this.chit)if(J!==null&&J!=="false")this.chit.setAttribute("checkerboard","");else this.chit.removeAttribute("checkerboard")}}}customElements.define("fig-image",D0);class f extends HTMLElement{#Q={x:0.42,y:0};#J={x:0.58,y:1};#$={stiffness:200,damping:15,mass:1};#_="bezier";#K=2;#Z=null;#j=null;#X=null;#q=null;#G=null;#Y=null;#L=null;#W=null;#U=null;#B=null;#O=null;#N=null;#M=0.8;#k=200;#D=200;#E=null;#T=null;#A=null;#P=3.625;#z=2;#H=3.625;#R=6;#F=16;#C=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.#K=parseInt(this.getAttribute("precision")||"2"),this.#h(this.getAttribute("aspect-ratio"));const Q=this.getAttribute("value");if(Q)this.#b(Q);this.#O=this.#f(),this.#v(),this.#l()}disconnectedCallback(){if(this.#Z=null,this.#A)this.#A.disconnect(),this.#A=null}#h(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){if(this.#h(J),this.#j)this.#c(),this.#V();return}if(!this.#j)return;if(Q==="value"&&J){const Z=this.#_;if(this.#b(J),this.#O=this.#f(),Z!==this.#_)this.#v();else this.#V(),this.#s()}if(Q==="precision")this.#K=parseInt(J||"2")}get value(){if(this.#_==="spring"){const{stiffness:$,damping:J,mass:Z}=this.#$;return`spring(${$}, ${J}, ${Z})`}const Q=this.#K;return`${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#J.x.toFixed(Q)}, ${this.#J.y.toFixed(Q)}`}get cssValue(){if(this.#_==="spring"){const $=this.#y(),Z=Math.max(1,Math.floor($.length/20)),_=[];for(let j=0;j<$.length;j+=Z)_.push($[j].value.toFixed(3));if($.length>0)_.push($[$.length-1].value.toFixed(3));return`linear(${_.join(", ")})`}const Q=this.#K;return`cubic-bezier(${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#J.x.toFixed(Q)}, ${this.#J.y.toFixed(Q)})`}get preset(){return this.#O}set value(Q){this.setAttribute("value",Q)}#b(Q){const $=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if($){this.#_="spring",this.#$.stiffness=parseFloat($[1]),this.#$.damping=parseFloat($[2]),this.#$.mass=parseFloat($[3]);return}const J=Q.split(",").map((Z)=>parseFloat(Z.trim()));if(J.length>=4&&J.every((Z)=>!isNaN(Z)))this.#_="bezier",this.#Q.x=J[0],this.#Q.y=J[1],this.#J.x=J[2],this.#J.y=J[3]}#f(){if(this.#_==="bezier"){for(let $ of f.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.#J.x-$.value[2])<0.001&&Math.abs(this.#J.y-$.value[3])<0.001)return $.name}return"Custom bezier"}for(let $ of f.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"}#y(){const{stiffness:Q,damping:$,mass:J}=this.#$,j=[];let K=0,q=0;for(let X=0;X<=5;X+=0.004){const W=-Q*(K-1)-$*q;if(q+=W/J*0.004,K+=q*0.004,j.push({t:X,value:K}),X>0.1&&Math.abs(K-1)<0.0005&&Math.abs(q)<0.0005)break}return j}static#g(Q,$=24){const{stiffness:J,damping:Z,mass:_}=Q,q=[];let X=0,W=0;for(let D=0;D<=5;D+=0.004){const k=-J*(X-1)-Z*W;if(W+=k/_*0.004,X+=W*0.004,q.push({t:D,value:X}),D>0.1&&Math.abs(X-1)<0.001&&Math.abs(W)<0.001)break}const L=q[q.length-1].t||1;let U=1;for(let D of q)if(D.value>U)U=D.value;let G=0;for(let D of q)if(D.value<G)G=D.value;const N=Math.max(U-G,1),B=6,M=$-B*2,R=Math.max(1,Math.floor(q.length/30));let H="";for(let D=0;D<q.length;D+=R){const k=B+q[D].t/L*M,T=B+(1-(q[D].value-G)/N)*M;H+=(D===0?"M":"L")+k.toFixed(1)+","+T.toFixed(1)}return`<svg width="${$}" height="${$}" viewBox="0 0 ${$} ${$}" fill="none"><path d="${H}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,$,J,Z,_=24){const K=(_-12)/2,X=[],W=(k,T,C,y,S)=>{const I=1-S;return I*I*I*k+3*I*I*S*T+3*I*S*S*C+S*S*S*y};for(let k=0;k<=48;k++){const T=k/48;X.push({x:W(0,Q,J,1,T),y:W(0,$,Z,1,T)})}let L=1/0,U=-1/0,G=1/0,N=-1/0;for(let k of X){if(k.x<L)L=k.x;if(k.x>U)U=k.x;if(k.y<G)G=k.y;if(k.y>N)N=k.y}const B=Math.max(U-L,0.000001),M=Math.max(N-G,0.000001),R=(k)=>K+(k-L)/B*12,H=(k)=>K+(1-(k-G)/M)*12;let D="";for(let k=0;k<X.length;k++){const T=R(X[k].x),C=H(X[k].y);D+=`${k===0?"M":"L"}${T.toFixed(1)},${C.toFixed(1)}`}return`<svg width="${_}" height="${_}" viewBox="0 0 ${_} ${_}" fill="none"><path d="${D}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#v(){this.classList.toggle("spring-mode",this.#_==="spring"),this.classList.toggle("bezier-mode",this.#_!=="spring"),this.#d(),this.innerHTML=this.#u(),this.#o(),this.#c(),this.#V(),this.#Z0()}#m(){if(this.getAttribute("dropdown")!=="true")return"";let Q="",$=void 0;for(let J of f.PRESETS){if(J.group!==$){if($!==void 0)Q+="</optgroup>";if(J.group)Q+=`<optgroup label="${J.group}">`;$=J.group}let Z;if(J.type==="spring"){const j=J.spring||this.#$;Z=f.#g(j)}else{const j=J.value||[this.#Q.x,this.#Q.y,this.#J.x,this.#J.y];Z=f.curveIcon(...j)}const _=J.name===this.#O?" selected":"";Q+=`<option value="${J.name}"${_}>${Z} ${J.name}</option>`}if($)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#u(){const $=this.#m(),J=this.#P*2;if(this.#_==="spring")return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
198
+ </svg></fig-button>`:""}</div>`}connectedCallback(){this.#Q=this.getAttribute("src")||"",this.upload=this.hasAttribute("upload")&&this.getAttribute("upload")!=="false",this.download=this.hasAttribute("download")&&this.getAttribute("download")!=="false",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#Z(),this.#q();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.#J),this.downloadButton?.removeEventListener("click",this.#$)}#q(){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.#J),this.fileInput?.addEventListener("change",this.#J);if(this.download)this.downloadButton=this.querySelector("fig-button[type='download']"),this.downloadButton?.removeEventListener("click",this.#$),this.downloadButton?.addEventListener("click",this.#$)})}#K(){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 J=this.getAttribute("aspect-ratio");if(!J||J==="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 Z=document.createElement("canvas"),j=Z.getContext("2d");Z.width=this.image.width,Z.height=this.image.height,j.drawImage(this.image,0,0),this.base64=Z.toDataURL(),Z.toBlob((_)=>{if(this.blob)URL.revokeObjectURL(this.blob);if(_)this.blob=URL.createObjectURL(_)})},this.image.src=Q})}async#W(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((J)=>{$.onload=(Z)=>{this.base64=Z.target.result,J()}}),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","download","aspect-ratio","fit","checkerboard"]}get src(){return this.#Q}set src(Q){this.#Q=Q,this.setAttribute("src",Q)}attributeChangedCallback(Q,$,J){if(Q==="src"){if(this.#Q=J,this.chit){const Z=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";if(this.#Q)this.chit.setAttribute("background",`url(${this.#Q})`);else this.chit.setAttribute("background",Z?"url()":"var(--figma-color-bg-secondary)")}if(this.#Q)this.#_(this.#Q)}if(Q==="upload")this.upload=J!==null&&J!=="false",this.innerHTML=this.#Z(),this.#q();if(Q==="download")this.download=J!==null&&J!=="false",this.innerHTML=this.#Z(),this.#q();if(Q==="size")this.size=J;if(Q==="aspect-ratio"){if(J&&J!=="auto")this.style.setProperty("--aspect-ratio",J);else if(!J)this.style.removeProperty("--aspect-ratio")}if(Q==="fit")if(J)this.style.setProperty("--fit",J);else this.style.removeProperty("--fit");if(Q==="checkerboard"){if(this.chit)if(J!==null&&J!=="false")this.chit.setAttribute("checkerboard","");else this.chit.removeAttribute("checkerboard")}}}customElements.define("fig-image",E0);class I extends HTMLElement{#Q={x:0.42,y:0};#J={x:0.58,y:1};#$={stiffness:200,damping:15,mass:1};#Z="bezier";#q=2;#K=null;#_=null;#W=null;#j=null;#X=null;#Y=null;#G=null;#U=null;#O=null;#L=null;#M=null;#N=null;#B=0.8;#R=200;#D=200;#E=null;#k=null;#F=null;#z=3.625;#A=2;#f=3.625;#T=6;#H=16;#P=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.#q=parseInt(this.getAttribute("precision")||"2"),this.#I(this.getAttribute("aspect-ratio"));const Q=this.getAttribute("value");if(Q)this.#S(Q);this.#M=this.#y(),this.#u(),this.#h()}disconnectedCallback(){if(this.#K=null,this.#F)this.#F.disconnect(),this.#F=null}#I(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){if(this.#I(J),this.#_)this.#o(),this.#w();return}if(!this.#_)return;if(Q==="value"&&J){const Z=this.#Z;if(this.#S(J),this.#M=this.#y(),Z!==this.#Z)this.#u();else this.#w(),this.#Q0()}if(Q==="precision")this.#q=parseInt(J||"2")}get value(){if(this.#Z==="spring"){const{stiffness:$,damping:J,mass:Z}=this.#$;return`spring(${$}, ${J}, ${Z})`}const Q=this.#q;return`${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#J.x.toFixed(Q)}, ${this.#J.y.toFixed(Q)}`}get cssValue(){if(this.#Z==="spring"){const $=this.#c(),Z=Math.max(1,Math.floor($.length/20)),j=[];for(let _=0;_<$.length;_+=Z)j.push($[_].value.toFixed(3));if($.length>0)j.push($[$.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}const Q=this.#q;return`cubic-bezier(${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#J.x.toFixed(Q)}, ${this.#J.y.toFixed(Q)})`}get preset(){return this.#M}set value(Q){this.setAttribute("value",Q)}#S(Q){const $=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if($){this.#Z="spring",this.#$.stiffness=parseFloat($[1]),this.#$.damping=parseFloat($[2]),this.#$.mass=parseFloat($[3]);return}const J=Q.split(",").map((Z)=>parseFloat(Z.trim()));if(J.length>=4&&J.every((Z)=>!isNaN(Z)))this.#Z="bezier",this.#Q.x=J[0],this.#Q.y=J[1],this.#J.x=J[2],this.#J.y=J[3]}#y(){if(this.#Z==="bezier"){for(let $ of I.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.#J.x-$.value[2])<0.001&&Math.abs(this.#J.y-$.value[3])<0.001)return $.name}return"Custom bezier"}for(let $ of I.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"}#c(){const{stiffness:Q,damping:$,mass:J}=this.#$,_=[];let K=0,q=0;for(let X=0;X<=5;X+=0.004){const W=-Q*(K-1)-$*q;if(q+=W/J*0.004,K+=q*0.004,_.push({t:X,value:K}),X>0.1&&Math.abs(K-1)<0.0005&&Math.abs(q)<0.0005)break}return _}static#p(Q,$=24){const{stiffness:J,damping:Z,mass:j}=Q,q=[];let X=0,W=0;for(let D=0;D<=5;D+=0.004){const R=-J*(X-1)-Z*W;if(W+=R/j*0.004,X+=W*0.004,q.push({t:D,value:X}),D>0.1&&Math.abs(X-1)<0.001&&Math.abs(W)<0.001)break}const Y=q[q.length-1].t||1;let U=1;for(let D of q)if(D.value>U)U=D.value;let L=0;for(let D of q)if(D.value<L)L=D.value;const F=Math.max(U-L,1),N=6,B=$-N*2,O=Math.max(1,Math.floor(q.length/30));let H="";for(let D=0;D<q.length;D+=O){const R=N+q[D].t/Y*B,E=N+(1-(q[D].value-L)/F)*B;H+=(D===0?"M":"L")+R.toFixed(1)+","+E.toFixed(1)}return`<svg width="${$}" height="${$}" viewBox="0 0 ${$} ${$}" fill="none"><path d="${H}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,$,J,Z,j=24){const K=(j-12)/2,X=[],W=(R,E,z,x,f)=>{const y=1-f;return y*y*y*R+3*y*y*f*E+3*y*f*f*z+f*f*f*x};for(let R=0;R<=48;R++){const E=R/48;X.push({x:W(0,Q,J,1,E),y:W(0,$,Z,1,E)})}let Y=1/0,U=-1/0,L=1/0,F=-1/0;for(let R of X){if(R.x<Y)Y=R.x;if(R.x>U)U=R.x;if(R.y<L)L=R.y;if(R.y>F)F=R.y}const N=Math.max(U-Y,0.000001),B=Math.max(F-L,0.000001),O=(R)=>K+(R-Y)/N*12,H=(R)=>K+(1-(R-L)/B)*12;let D="";for(let R=0;R<X.length;R++){const E=O(X[R].x),z=H(X[R].y);D+=`${R===0?"M":"L"}${E.toFixed(1)},${z.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${D}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#u(){this.classList.toggle("spring-mode",this.#Z==="spring"),this.classList.toggle("bezier-mode",this.#Z!=="spring"),this.#j0(),this.innerHTML=this.#x(),this.#v(),this.#o(),this.#w(),this.#i()}#r(){if(this.getAttribute("dropdown")!=="true")return"";let Q="",$=void 0;for(let J of I.PRESETS){if(J.group!==$){if($!==void 0)Q+="</optgroup>";if(J.group)Q+=`<optgroup label="${J.group}">`;$=J.group}let Z;if(J.type==="spring"){const _=J.spring||this.#$;Z=I.#p(_)}else{const _=J.value||[this.#Q.x,this.#Q.y,this.#J.x,this.#J.y];Z=I.curveIcon(..._)}const j=J.name===this.#M?" selected":"";Q+=`<option value="${J.name}"${j}>${Z} ${J.name}</option>`}if($)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#x(){const $=this.#r(),J=this.#z*2;if(this.#Z==="spring")return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
198
199
  <rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
199
200
  <line class="fig-easing-curve-target" x1="0" y1="40" x2="200" y2="40"/>
200
201
  <line class="fig-easing-curve-diagonal" x1="0" y1="180" x2="0" y2="180"/>
201
202
  <path class="fig-easing-curve-path"/>
202
203
  <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="${J}" height="${J}"><fig-handle></fig-handle></foreignObject>
203
- <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="${this.#R}" height="${this.#F}"><fig-handle></fig-handle></foreignObject>
204
+ <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="${this.#T}" height="${this.#H}"><fig-handle></fig-handle></foreignObject>
204
205
  </svg></div>`;return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
205
206
  <rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
206
207
  <line class="fig-easing-curve-diagonal" x1="0" y1="200" x2="200" y2="0"/>
207
208
  <line class="fig-easing-curve-arm" data-arm="1"/>
208
209
  <line class="fig-easing-curve-arm" data-arm="2"/>
209
210
  <path class="fig-easing-curve-path"/>
210
- <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#z}"/>
211
- <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#z}"/>
211
+ <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#A}"/>
212
+ <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#A}"/>
212
213
  <foreignObject class="fig-easing-curve-handle" data-handle="1" width="${J}" height="${J}"><fig-handle></fig-handle></foreignObject>
213
214
  <foreignObject class="fig-easing-curve-handle" data-handle="2" width="${J}" height="${J}"><fig-handle></fig-handle></foreignObject>
214
- </svg></div>`}#x(Q,$){const J=getComputedStyle(this).getPropertyValue(Q).trim();if(!J)return $;const Z=Number.parseFloat(J);return Number.isFinite(Z)?Z:$}#d(){this.#P=this.#x("--easing-bezier-handle-radius",this.#P),this.#z=this.#x("--easing-bezier-endpoint-radius",this.#z),this.#H=this.#x("--easing-spring-handle-radius",this.#H),this.#R=this.#x("--easing-duration-bar-width",this.#R),this.#F=this.#x("--easing-duration-bar-height",this.#F),this.#C=this.#x("--easing-duration-bar-radius",this.#C)}#o(){this.#j=this.querySelector(".fig-easing-curve-svg"),this.#X=this.querySelector(".fig-easing-curve-path"),this.#q=this.querySelector('[data-arm="1"]'),this.#G=this.querySelector('[data-arm="2"]'),this.#Y=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#L=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#W=this.querySelector('[data-endpoint="start"]'),this.#U=this.querySelector('[data-endpoint="end"]'),this.#B=this.querySelector(".fig-easing-curve-dropdown"),this.#N=this.querySelector(".fig-easing-curve-target"),this.#E=this.querySelector(".fig-easing-curve-bounds"),this.#T=this.querySelector(".fig-easing-curve-diagonal")}#l(){if(this.#A||!window.ResizeObserver)return;this.#A=new ResizeObserver(()=>{if(this.#c())this.#V()}),this.#A.observe(this)}#c(){if(!this.#j)return!1;const Q=this.#j.getBoundingClientRect(),$=Math.max(1,Math.round(Q.width||200)),J=Math.max(1,Math.round(Q.height||200)),Z=$!==this.#k||J!==this.#D;return this.#k=$,this.#D=J,this.#j.setAttribute("viewBox",`0 0 ${$} ${J}`),Z}#p(Q,$){return{x:Q*this.#k,y:(1-$)*this.#D}}#t(Q,$){return{x:Q/this.#k,y:1-$/this.#D}}#r={minVal:0,maxVal:1.2,totalTime:1};#I(Q,$){const Z=this.#D-40,{minVal:_,maxVal:j}=this.#r,K=j-_||1;return{x:Q*this.#k,y:20+(1-($-_)/K)*Z}}#V(){if(this.#c(),this.#_==="spring")this.#Q0();else this.#a()}#a(){if(this.#E)this.#E.setAttribute("x","0"),this.#E.setAttribute("y","0"),this.#E.setAttribute("width",this.#k),this.#E.setAttribute("height",this.#D);if(this.#T)this.#T.setAttribute("x1","0"),this.#T.setAttribute("y1",this.#D),this.#T.setAttribute("x2",this.#k),this.#T.setAttribute("y2","0");const Q=this.#p(0,0),$=this.#p(this.#Q.x,this.#Q.y),J=this.#p(this.#J.x,this.#J.y),Z=this.#p(1,1);this.#X.setAttribute("d",`M${Q.x},${Q.y} C${$.x},${$.y} ${J.x},${J.y} ${Z.x},${Z.y}`),this.#q.setAttribute("x1",Q.x),this.#q.setAttribute("y1",Q.y),this.#q.setAttribute("x2",$.x),this.#q.setAttribute("y2",$.y),this.#G.setAttribute("x1",Z.x),this.#G.setAttribute("y1",Z.y),this.#G.setAttribute("x2",J.x),this.#G.setAttribute("y2",J.y);const _=this.#P;if(this.#Y.setAttribute("x",$.x-_),this.#Y.setAttribute("y",$.y-_),this.#L.setAttribute("x",J.x-_),this.#L.setAttribute("y",J.y-_),this.#W)this.#W.setAttribute("cx",Q.x),this.#W.setAttribute("cy",Q.y);if(this.#U)this.#U.setAttribute("cx",Z.x),this.#U.setAttribute("cy",Z.y)}#Q0(){if(this.#E)this.#E.setAttribute("x","0"),this.#E.setAttribute("y","0"),this.#E.setAttribute("width",this.#k),this.#E.setAttribute("height",this.#D);const Q=this.#y();if(!Q.length)return;const $=Q[Q.length-1].t||1;let J=0,Z=1;for(let M of Q){if(M.value<J)J=M.value;if(M.value>Z)Z=M.value}const _=Math.max(Math.abs(J-1),Math.abs(Z-1),0.01),j=0;this.#r={minVal:1-_-j,maxVal:1+_+j,totalTime:$};const K=Math.max(0.05,Math.min(0.95,this.#M));let q="";for(let M=0;M<Q.length;M++){const R=Q[M].t/$*K,H=this.#I(R,Q[M].value);q+=(M===0?"M":"L")+H.x.toFixed(1)+","+H.y.toFixed(1)}const X=this.#I(K,1),W=this.#I(1,1);if(q+=`L${X.x.toFixed(1)},${X.y.toFixed(1)} L${W.x.toFixed(1)},${W.y.toFixed(1)}`,this.#X.setAttribute("d",q),this.#N){const M=this.#I(0,1),R=this.#I(1,1);this.#N.setAttribute("x1",M.x),this.#N.setAttribute("y1",M.y),this.#N.setAttribute("x2",R.x),this.#N.setAttribute("y2",R.y)}const L=this.#$0(Q),U=L.t/$*K,G=this.#I(U,L.value),N=this.#P;this.#Y.setAttribute("x",G.x-N),this.#Y.setAttribute("y",G.y-N);const B=this.#I(K,1);this.#L.setAttribute("x",B.x-this.#R/2),this.#L.setAttribute("y",B.y-this.#F/2)}#$0(Q){let $={t:0,value:1},J=!1;for(let Z of Q){if(Z.value>=0.99)J=!0;if(J&&Z.value>$.value)$={t:Z.t,value:Z.value}}return $}#s(){if(!this.#B)return;this.#B.value=this.#O,this.#S()}#i(Q,$,J){if(!Q)return;for(let Z of Q.querySelectorAll("option"))if(Z.value===$)Z.innerHTML=`${J} ${$}`}#S(){if(!this.#B)return;const Q=f.curveIcon(this.#Q.x,this.#Q.y,this.#J.x,this.#J.y),$=f.#g(this.#$);this.#i(this.#B,"Custom bezier",Q),this.#i(this.#B,"Custom spring",$),this.#i(this.#B.select,"Custom bezier",Q),this.#i(this.#B.select,"Custom spring",$)}#w(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#_,value:this.value,cssValue:this.cssValue,preset:this.#O}}))}#Z0(){if(this.#_==="bezier"){this.#Y.addEventListener("pointerdown",($)=>this.#n($,1)),this.#L.addEventListener("pointerdown",($)=>this.#n($,2));const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#n($,this.#_0($))})}else{this.#Y.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#e($,"bounce")}),this.#L.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#e($,"duration")});const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#e($,"duration")})}if(this.#B)this.#B.addEventListener("change",(Q)=>{const $=Q.detail,J=f.PRESETS.find((Z)=>Z.name===$);if(!J)return;if(J.type==="bezier"){if(J.value)this.#Q.x=J.value[0],this.#Q.y=J.value[1],this.#J.x=J.value[2],this.#J.y=J.value[3];if(this.#O=$,this.#_!=="bezier")this.#_="bezier",this.#v();else this.#V()}else if(J.type==="spring"){if(J.spring)this.#$={...J.spring};if(this.#O=$,this.#_!=="spring")this.#_="spring",this.#v();else this.#V()}this.#w("input"),this.#w("change")})}#J0(Q){const $=this.#j.getScreenCTM();if(!$)return{x:0,y:0};const J=$.inverse();return{x:J.a*Q.clientX+J.c*Q.clientY+J.e,y:J.b*Q.clientX+J.d*Q.clientY+J.f}}#_0(Q){return this.#J0(Q).x<=this.#k/2?1:2}#n(Q,$){Q.preventDefault(),this.#Z=$;const J=(_)=>{if(!this.#Z)return;const j=this.#J0(_),K=this.#t(j.x,j.y);if(K.x=Math.round(K.x*100)/100,K.y=Math.round(K.y*100)/100,K.x=Math.max(0,Math.min(1,K.x)),this.#Z===1)this.#Q.x=K.x,this.#Q.y=K.y;else this.#J.x=K.x,this.#J.y=K.y;this.#V(),this.#O=this.#f(),this.#s(),this.#w("input")},Z=()=>{this.#Z=null,document.removeEventListener("pointermove",J),document.removeEventListener("pointerup",Z),this.#w("change")};document.addEventListener("pointermove",J),document.addEventListener("pointerup",Z)}#e(Q,$){Q.preventDefault(),this.#Z=$;const J=this.#$.damping,Z=this.#$.stiffness,_=this.#M,j=Q.clientY,K=Q.clientX,q=(W)=>{if(!this.#Z)return;if($==="bounce"){const L=W.clientY-j;this.#$.damping=Math.max(1,Math.round(J+L*0.15))}else{const L=W.clientX-K;this.#M=Math.max(0.05,Math.min(0.95,_+L/200)),this.#$.stiffness=Math.max(10,Math.round(Z-L*1.5))}this.#V(),this.#O=this.#f(),this.#s(),this.#w("input")},X=()=>{this.#Z=null,document.removeEventListener("pointermove",q),document.removeEventListener("pointerup",X),this.#w("change")};document.addEventListener("pointermove",q),document.addEventListener("pointerup",X)}}customElements.define("fig-easing-curve",f);class A0 extends HTMLElement{#Q=0;#J=0;#$=0;#_=1;#K=!1;#Z=!1;#j=null;#X=null;#q=null;#G=null;#Y=[];#L={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#_=parseInt(this.getAttribute("precision")||"1"),this.#W(this.getAttribute("aspect-ratio")),this.#U(this.getAttribute("perspective")),this.#B("--perspective-origin",this.getAttribute("perspective-origin")),this.#O(this.getAttribute("transform-origin")),this.#k(this.getAttribute("fields"));const Q=this.getAttribute("value");if(Q)this.#D(Q);this.#E(),this.#M(this.getAttribute("selected")),this.#N()}disconnectedCallback(){if(this.#K=!1,this.#q)window.removeEventListener("keydown",this.#q),window.removeEventListener("keyup",this.#G)}#W(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}#U(Q){if(Q&&Q.trim())this.style.setProperty("--perspective",Q.trim());else this.style.removeProperty("--perspective")}#B(Q,$){if($&&$.trim())this.style.setProperty(Q,$.trim());else this.style.removeProperty(Q)}#O(Q){if(!Q||!Q.trim()){this.style.removeProperty("--transform-origin");return}const $=Q.trim().split(/\s+/);if($.length===2)this.style.setProperty("--transform-origin",`${$[0]} ${$[1]} -50cqi`);else this.style.setProperty("--transform-origin",Q.trim())}#N(){if(!this.#X)return;this.#X.style.cursor=this.#R?"":"default"}#M(Q){if(!this.#j)return;const $=this.#j.querySelectorAll(".fig-3d-rotate-face"),J=Q?Q.trim().toLowerCase():"";for(let Z of $)Z.classList.toggle("selected",J!==""&&Z.classList.contains(J))}#k(Q){if(!Q||!Q.trim()){this.#Y=[];return}const $=["rotateX","rotateY","rotateZ"];this.#Y=Q.split(",").map((J)=>J.trim()).filter((J)=>$.includes(J))}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){this.#W(J);return}if(Q==="perspective"){this.#U(J);return}if(Q==="perspective-origin"){this.#B("--perspective-origin",J);return}if(Q==="transform-origin"){this.#O(J);return}if(Q==="selected"){this.#M(J);return}if(Q==="drag"){this.#N();return}if(Q==="fields"){if(this.#k(J),this.#j)this.#E();return}if(!this.#j)return;if(Q==="value"&&J){if(this.#K)return;this.#D(J),this.#A(),this.#T()}if(Q==="precision")this.#_=parseInt(J||"1")}get value(){const Q=this.#_;return`rotateX(${this.#Q.toFixed(Q)}deg) rotateY(${this.#J.toFixed(Q)}deg) rotateZ(${this.#$.toFixed(Q)}deg)`}set value(Q){this.setAttribute("value",Q)}get rotateX(){return this.#Q}get rotateY(){return this.#J}get rotateZ(){return this.#$}#D(Q){const $=Q.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),J=Q.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),Z=Q.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if($)this.#Q=parseFloat($[1]);if(J)this.#J=parseFloat(J[1]);if(Z)this.#$=parseFloat(Z[1])}#E(){const Q={rotateX:"X",rotateY:"Y",rotateZ:"Z"},$={rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#$},J=this.#Y.map((Z)=>`<fig-input-number
215
+ </svg></div>`}#V(Q,$){const J=getComputedStyle(this).getPropertyValue(Q).trim();if(!J)return $;const Z=Number.parseFloat(J);return Number.isFinite(Z)?Z:$}#j0(){this.#z=this.#V("--easing-bezier-handle-radius",this.#z),this.#A=this.#V("--easing-bezier-endpoint-radius",this.#A),this.#f=this.#V("--easing-spring-handle-radius",this.#f),this.#T=this.#V("--easing-duration-bar-width",this.#T),this.#H=this.#V("--easing-duration-bar-height",this.#H),this.#P=this.#V("--easing-duration-bar-radius",this.#P)}#v(){this.#_=this.querySelector(".fig-easing-curve-svg"),this.#W=this.querySelector(".fig-easing-curve-path"),this.#j=this.querySelector('[data-arm="1"]'),this.#X=this.querySelector('[data-arm="2"]'),this.#Y=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#G=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#U=this.querySelector('[data-endpoint="start"]'),this.#O=this.querySelector('[data-endpoint="end"]'),this.#L=this.querySelector(".fig-easing-curve-dropdown"),this.#N=this.querySelector(".fig-easing-curve-target"),this.#E=this.querySelector(".fig-easing-curve-bounds"),this.#k=this.querySelector(".fig-easing-curve-diagonal")}#h(){if(this.#F||!window.ResizeObserver)return;this.#F=new ResizeObserver(()=>{if(this.#o())this.#w()}),this.#F.observe(this)}#o(){if(!this.#_)return!1;const Q=this.#_.getBoundingClientRect(),$=Math.max(1,Math.round(Q.width||200)),J=Math.max(1,Math.round(Q.height||200)),Z=$!==this.#R||J!==this.#D;return this.#R=$,this.#D=J,this.#_.setAttribute("viewBox",`0 0 ${$} ${J}`),Z}#s(Q,$){return{x:Q*this.#R,y:(1-$)*this.#D}}#Z0(Q,$){return{x:Q/this.#R,y:1-$/this.#D}}#l={minVal:0,maxVal:1.2,totalTime:1};#g(Q,$){const Z=this.#D-40,{minVal:j,maxVal:_}=this.#l,K=_-j||1;return{x:Q*this.#R,y:20+(1-($-j)/K)*Z}}#w(){if(this.#o(),this.#Z==="spring")this.#e();else this.#t()}#t(){if(this.#E)this.#E.setAttribute("x","0"),this.#E.setAttribute("y","0"),this.#E.setAttribute("width",this.#R),this.#E.setAttribute("height",this.#D);if(this.#k)this.#k.setAttribute("x1","0"),this.#k.setAttribute("y1",this.#D),this.#k.setAttribute("x2",this.#R),this.#k.setAttribute("y2","0");const Q=this.#s(0,0),$=this.#s(this.#Q.x,this.#Q.y),J=this.#s(this.#J.x,this.#J.y),Z=this.#s(1,1);this.#W.setAttribute("d",`M${Q.x},${Q.y} C${$.x},${$.y} ${J.x},${J.y} ${Z.x},${Z.y}`),this.#j.setAttribute("x1",Q.x),this.#j.setAttribute("y1",Q.y),this.#j.setAttribute("x2",$.x),this.#j.setAttribute("y2",$.y),this.#X.setAttribute("x1",Z.x),this.#X.setAttribute("y1",Z.y),this.#X.setAttribute("x2",J.x),this.#X.setAttribute("y2",J.y);const j=this.#z;if(this.#Y.setAttribute("x",$.x-j),this.#Y.setAttribute("y",$.y-j),this.#G.setAttribute("x",J.x-j),this.#G.setAttribute("y",J.y-j),this.#U)this.#U.setAttribute("cx",Q.x),this.#U.setAttribute("cy",Q.y);if(this.#O)this.#O.setAttribute("cx",Z.x),this.#O.setAttribute("cy",Z.y)}#e(){if(this.#E)this.#E.setAttribute("x","0"),this.#E.setAttribute("y","0"),this.#E.setAttribute("width",this.#R),this.#E.setAttribute("height",this.#D);const Q=this.#c();if(!Q.length)return;const $=Q[Q.length-1].t||1;let J=0,Z=1;for(let B of Q){if(B.value<J)J=B.value;if(B.value>Z)Z=B.value}const j=Math.max(Math.abs(J-1),Math.abs(Z-1),0.01),_=0;this.#l={minVal:1-j-_,maxVal:1+j+_,totalTime:$};const K=Math.max(0.05,Math.min(0.95,this.#B));let q="";for(let B=0;B<Q.length;B++){const O=Q[B].t/$*K,H=this.#g(O,Q[B].value);q+=(B===0?"M":"L")+H.x.toFixed(1)+","+H.y.toFixed(1)}const X=this.#g(K,1),W=this.#g(1,1);if(q+=`L${X.x.toFixed(1)},${X.y.toFixed(1)} L${W.x.toFixed(1)},${W.y.toFixed(1)}`,this.#W.setAttribute("d",q),this.#N){const B=this.#g(0,1),O=this.#g(1,1);this.#N.setAttribute("x1",B.x),this.#N.setAttribute("y1",B.y),this.#N.setAttribute("x2",O.x),this.#N.setAttribute("y2",O.y)}const Y=this.#_0(Q),U=Y.t/$*K,L=this.#g(U,Y.value),F=this.#z;this.#Y.setAttribute("x",L.x-F),this.#Y.setAttribute("y",L.y-F);const N=this.#g(K,1);this.#G.setAttribute("x",N.x-this.#T/2),this.#G.setAttribute("y",N.y-this.#H/2)}#_0(Q){let $={t:0,value:1},J=!1;for(let Z of Q){if(Z.value>=0.99)J=!0;if(J&&Z.value>$.value)$={t:Z.t,value:Z.value}}return $}#Q0(){if(!this.#L)return;this.#L.value=this.#M,this.#K0()}#n(Q,$,J){if(!Q)return;for(let Z of Q.querySelectorAll("option"))if(Z.value===$)Z.innerHTML=`${J} ${$}`}#K0(){if(!this.#L)return;const Q=I.curveIcon(this.#Q.x,this.#Q.y,this.#J.x,this.#J.y),$=I.#p(this.#$);this.#n(this.#L,"Custom bezier",Q),this.#n(this.#L,"Custom spring",$),this.#n(this.#L.select,"Custom bezier",Q),this.#n(this.#L.select,"Custom spring",$)}#m(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#Z,value:this.value,cssValue:this.cssValue,preset:this.#M}}))}#i(){if(this.#Z==="bezier"){this.#Y.addEventListener("pointerdown",($)=>this.#$0($,1)),this.#G.addEventListener("pointerdown",($)=>this.#$0($,2));const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#$0($,this.#a($))})}else{this.#Y.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#J0($,"bounce")}),this.#G.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#J0($,"duration")});const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#J0($,"duration")})}if(this.#L)this.#L.addEventListener("change",(Q)=>{const $=Q.detail,J=I.PRESETS.find((Z)=>Z.name===$);if(!J)return;if(J.type==="bezier"){if(J.value)this.#Q.x=J.value[0],this.#Q.y=J.value[1],this.#J.x=J.value[2],this.#J.y=J.value[3];if(this.#M=$,this.#Z!=="bezier")this.#Z="bezier",this.#u();else this.#w()}else if(J.type==="spring"){if(J.spring)this.#$={...J.spring};if(this.#M=$,this.#Z!=="spring")this.#Z="spring",this.#u();else this.#w()}this.#m("input"),this.#m("change")})}#b(Q){const $=this.#_.getScreenCTM();if(!$)return{x:0,y:0};const J=$.inverse();return{x:J.a*Q.clientX+J.c*Q.clientY+J.e,y:J.b*Q.clientX+J.d*Q.clientY+J.f}}#a(Q){return this.#b(Q).x<=this.#R/2?1:2}#$0(Q,$){Q.preventDefault(),this.#K=$;const J=(j)=>{if(!this.#K)return;const _=this.#b(j),K=this.#Z0(_.x,_.y);if(K.x=Math.round(K.x*100)/100,K.y=Math.round(K.y*100)/100,K.x=Math.max(0,Math.min(1,K.x)),this.#K===1)this.#Q.x=K.x,this.#Q.y=K.y;else this.#J.x=K.x,this.#J.y=K.y;this.#w(),this.#M=this.#y(),this.#Q0(),this.#m("input")},Z=()=>{this.#K=null,document.removeEventListener("pointermove",J),document.removeEventListener("pointerup",Z),this.#m("change")};document.addEventListener("pointermove",J),document.addEventListener("pointerup",Z)}#J0(Q,$){Q.preventDefault(),this.#K=$;const J=this.#$.damping,Z=this.#$.stiffness,j=this.#B,_=Q.clientY,K=Q.clientX,q=(W)=>{if(!this.#K)return;if($==="bounce"){const Y=W.clientY-_;this.#$.damping=Math.max(1,Math.round(J+Y*0.15))}else{const Y=W.clientX-K;this.#B=Math.max(0.05,Math.min(0.95,j+Y/200)),this.#$.stiffness=Math.max(10,Math.round(Z-Y*1.5))}this.#w(),this.#M=this.#y(),this.#Q0(),this.#m("input")},X=()=>{this.#K=null,document.removeEventListener("pointermove",q),document.removeEventListener("pointerup",X),this.#m("change")};document.addEventListener("pointermove",q),document.addEventListener("pointerup",X)}}customElements.define("fig-easing-curve",I);class k0 extends HTMLElement{#Q=0;#J=0;#$=0;#Z=1;#q=!1;#K=!1;#_=null;#W=null;#j=null;#X=null;#Y=[];#G={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#Z=parseInt(this.getAttribute("precision")||"1"),this.#U(this.getAttribute("aspect-ratio")),this.#O(this.getAttribute("perspective")),this.#L("--perspective-origin",this.getAttribute("perspective-origin")),this.#M(this.getAttribute("transform-origin")),this.#R(this.getAttribute("fields"));const Q=this.getAttribute("value");if(Q)this.#D(Q);this.#E(),this.#B(this.getAttribute("selected")),this.#N()}disconnectedCallback(){if(this.#q=!1,this.#j)window.removeEventListener("keydown",this.#j),window.removeEventListener("keyup",this.#X)}#U(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}#O(Q){if(Q&&Q.trim())this.style.setProperty("--perspective",Q.trim());else this.style.removeProperty("--perspective")}#L(Q,$){if($&&$.trim())this.style.setProperty(Q,$.trim());else this.style.removeProperty(Q)}#M(Q){if(!Q||!Q.trim()){this.style.removeProperty("--transform-origin");return}const $=Q.trim().split(/\s+/);if($.length===2)this.style.setProperty("--transform-origin",`${$[0]} ${$[1]} -50cqi`);else this.style.setProperty("--transform-origin",Q.trim())}#N(){if(!this.#W)return;this.#W.style.cursor=this.#T?"":"default"}#B(Q){if(!this.#_)return;const $=this.#_.querySelectorAll(".fig-3d-rotate-face"),J=Q?Q.trim().toLowerCase():"";for(let Z of $)Z.classList.toggle("selected",J!==""&&Z.classList.contains(J))}#R(Q){if(!Q||!Q.trim()){this.#Y=[];return}const $=["rotateX","rotateY","rotateZ"];this.#Y=Q.split(",").map((J)=>J.trim()).filter((J)=>$.includes(J))}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){this.#U(J);return}if(Q==="perspective"){this.#O(J);return}if(Q==="perspective-origin"){this.#L("--perspective-origin",J);return}if(Q==="transform-origin"){this.#M(J);return}if(Q==="selected"){this.#B(J);return}if(Q==="drag"){this.#N();return}if(Q==="fields"){if(this.#R(J),this.#_)this.#E();return}if(!this.#_)return;if(Q==="value"&&J){if(this.#q)return;this.#D(J),this.#F(),this.#k()}if(Q==="precision")this.#Z=parseInt(J||"1")}get value(){const Q=this.#Z;return`rotateX(${this.#Q.toFixed(Q)}deg) rotateY(${this.#J.toFixed(Q)}deg) rotateZ(${this.#$.toFixed(Q)}deg)`}set value(Q){this.setAttribute("value",Q)}get rotateX(){return this.#Q}get rotateY(){return this.#J}get rotateZ(){return this.#$}#D(Q){const $=Q.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),J=Q.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),Z=Q.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if($)this.#Q=parseFloat($[1]);if(J)this.#J=parseFloat(J[1]);if(Z)this.#$=parseFloat(Z[1])}#E(){const Q={rotateX:"X",rotateY:"Y",rotateZ:"Z"},$={rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#$},J=this.#Y.map((Z)=>`<fig-input-number
215
216
  name="${Z}"
216
217
  step="1"
217
218
  precision="1"
@@ -229,9 +230,9 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
229
230
  <div class="fig-3d-rotate-face bottom"></div>
230
231
  </div>
231
232
  </div>
232
- </div>${J}`,this.#X=this.querySelector(".fig-3d-rotate-container"),this.#j=this.querySelector(".fig-3d-rotate-cube"),this.#L={};for(let Z of this.#Y){const _=this.querySelector(`fig-input-number[name="${Z}"]`);if(_){this.#L[Z]=_;const j=(K)=>{K.stopPropagation();const q=parseFloat(K.target.value);if(isNaN(q))return;if(Z==="rotateX")this.#Q=q;else if(Z==="rotateY")this.#J=q;else if(Z==="rotateZ")this.#$=q;this.#A(),this.#P(K.type)};_.addEventListener("input",j),_.addEventListener("change",j)}}this.#A(),this.#H()}#T(){const Q={rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#$};for(let $ of this.#Y){const J=this.#L[$];if(J)J.setAttribute("value",Q[$].toFixed(this.#_))}}#A(){if(!this.#j)return;this.#j.style.transform=`rotateX(${this.#Q}deg) rotateY(${this.#J}deg) rotateZ(${this.#$}deg)`}#P(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#$}}))}#z(Q){if(!this.#Z)return Q;return Math.round(Q/15)*15}#H(){this.#X.addEventListener("pointerdown",(Q)=>this.#F(Q)),this.#q=(Q)=>{if(Q.key==="Shift")this.#Z=!0},this.#G=(Q)=>{if(Q.key==="Shift")this.#Z=!1},window.addEventListener("keydown",this.#q),window.addEventListener("keyup",this.#G)}get#R(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}#F(Q){if(!this.#R)return;Q.preventDefault(),this.#K=!0,this.#X.classList.add("dragging"),this.#X.setPointerCapture(Q.pointerId);const{clientX:$,clientY:J}=Q,Z=this.#Q,_=this.#J,j=(q)=>{if(!this.#K)return;if(q.buttons===0){K();return}const X=q.clientX-$,W=q.clientY-J;this.#J=this.#z(_+X*0.5),this.#Q=this.#z(Z-W*0.5),this.#A(),this.#T(),this.setAttribute("value",this.value),this.#P("input")},K=()=>{if(!this.#K)return;this.setAttribute("value",this.value),this.#K=!1,this.#X.classList.remove("dragging"),this.#X.removeEventListener("pointermove",j),this.#X.removeEventListener("pointerup",K),this.#X.removeEventListener("pointercancel",K),this.#X.removeEventListener("lostpointercapture",K),this.#P("change")};this.#X.addEventListener("pointermove",j),this.#X.addEventListener("pointerup",K),this.#X.addEventListener("pointercancel",K),this.#X.addEventListener("lostpointercapture",K)}}customElements.define("fig-3d-rotate",A0);class p extends HTMLElement{#Q=50;#J=50;#$=0;#_=null;#K=[];#Z=null;#j=null;#X=null;#q=!1;#G=!1;#Y=null;#L=null;#W=null;static SNAP_POINTS=[0,16.6667,33.3333,50,66.6667,83.3333,100];static get observedAttributes(){return["value","precision","aspect-ratio","drag","fields"]}connectedCallback(){this.#$=parseInt(this.getAttribute("precision")||"0"),this.#O(this.getAttribute("aspect-ratio")),this.#E(this.getAttribute("value")),this.#T(),this.#N(),this.#P()}disconnectedCallback(){this.#q=!1,this.#m()}get value(){const Q=this.#$;return`${this.#Q.toFixed(Q)}% ${this.#J.toFixed(Q)}%`}set value(Q){this.setAttribute("value",Q)}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){this.#O(J);return}if(Q==="drag"){this.#N();return}if(Q==="fields"){this.#T(),this.#N(),this.#P();return}if(Q==="precision"){this.#$=parseInt(J||"0"),this.#A(),this.#P();return}if(Q==="value"){if(this.#G||this.#q)return;this.#E(J),this.#H(),this.#R(),this.#A()}}get#U(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}get#B(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#O(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}#N(){if(!this.#_)return;this.#_.classList.toggle("drag-disabled",!this.#U)}#M(Q){return Math.max(0,Math.min(100,Q))}#k(Q,$){const J=(Q||"").trim().toLowerCase();if(!J)return $==="x"?this.#Q:this.#J;const Z=$==="x"?{left:0,center:50,right:100}:{top:0,center:50,bottom:100};if(J in Z)return Z[J];const _=Number.parseFloat(J.replace("%",""));if(Number.isFinite(_))return _;return $==="x"?this.#Q:this.#J}#D(Q){const $=Q.trim().replace(/,/g," ").split(/\s+/).filter(Boolean);if($.length<1)return;if($.length===1){const J=this.#k($[0],"x");this.#Q=J,this.#J=J;return}this.#Q=this.#k($[0],"x"),this.#J=this.#k($[1],"y")}#E(Q){const $=typeof Q==="string"?Q.trim():"";if(!$){this.#Q=50,this.#J=50;return}this.#D($)}#T(){const Q=Array.from({length:9},(_,j)=>{const K=j%3,q=Math.floor(j/3);return`<span class="origin-grid-cell" data-col="${K}" data-row="${q}">
233
+ </div>${J}`,this.#W=this.querySelector(".fig-3d-rotate-container"),this.#_=this.querySelector(".fig-3d-rotate-cube"),this.#G={};for(let Z of this.#Y){const j=this.querySelector(`fig-input-number[name="${Z}"]`);if(j){this.#G[Z]=j;const _=(K)=>{K.stopPropagation();const q=parseFloat(K.target.value);if(isNaN(q))return;if(Z==="rotateX")this.#Q=q;else if(Z==="rotateY")this.#J=q;else if(Z==="rotateZ")this.#$=q;this.#F(),this.#z(K.type)};j.addEventListener("input",_),j.addEventListener("change",_)}}this.#F(),this.#f()}#k(){const Q={rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#$};for(let $ of this.#Y){const J=this.#G[$];if(J)J.setAttribute("value",Q[$].toFixed(this.#Z))}}#F(){if(!this.#_)return;this.#_.style.transform=`rotateX(${this.#Q}deg) rotateY(${this.#J}deg) rotateZ(${this.#$}deg)`}#z(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#$}}))}#A(Q){if(!this.#K)return Q;return Math.round(Q/15)*15}#f(){this.#W.addEventListener("pointerdown",(Q)=>this.#H(Q)),this.#j=(Q)=>{if(Q.key==="Shift")this.#K=!0},this.#X=(Q)=>{if(Q.key==="Shift")this.#K=!1},window.addEventListener("keydown",this.#j),window.addEventListener("keyup",this.#X)}get#T(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}#H(Q){if(!this.#T)return;Q.preventDefault(),this.#q=!0,this.#W.classList.add("dragging"),this.#W.setPointerCapture(Q.pointerId);const{clientX:$,clientY:J}=Q,Z=this.#Q,j=this.#J,_=(q)=>{if(!this.#q)return;if(q.buttons===0){K();return}const X=q.clientX-$,W=q.clientY-J;this.#J=this.#A(j+X*0.5),this.#Q=this.#A(Z-W*0.5),this.#F(),this.#k(),this.setAttribute("value",this.value),this.#z("input")},K=()=>{if(!this.#q)return;this.setAttribute("value",this.value),this.#q=!1,this.#W.classList.remove("dragging"),this.#W.removeEventListener("pointermove",_),this.#W.removeEventListener("pointerup",K),this.#W.removeEventListener("pointercancel",K),this.#W.removeEventListener("lostpointercapture",K),this.#z("change")};this.#W.addEventListener("pointermove",_),this.#W.addEventListener("pointerup",K),this.#W.addEventListener("pointercancel",K),this.#W.addEventListener("lostpointercapture",K)}}customElements.define("fig-3d-rotate",k0);class s extends HTMLElement{#Q=50;#J=50;#$=0;#Z=null;#q=[];#K=null;#_=null;#W=null;#j=!1;#X=!1;#Y=null;#G=null;#U=null;static SNAP_POINTS=[0,16.6667,33.3333,50,66.6667,83.3333,100];static get observedAttributes(){return["value","precision","aspect-ratio","drag","fields"]}connectedCallback(){this.#$=parseInt(this.getAttribute("precision")||"0"),this.#M(this.getAttribute("aspect-ratio")),this.#E(this.getAttribute("value")),this.#k(),this.#N(),this.#z()}disconnectedCallback(){this.#j=!1,this.#r()}get value(){const Q=this.#$;return`${this.#Q.toFixed(Q)}% ${this.#J.toFixed(Q)}%`}set value(Q){this.setAttribute("value",Q)}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){this.#M(J);return}if(Q==="drag"){this.#N();return}if(Q==="fields"){this.#k(),this.#N(),this.#z();return}if(Q==="precision"){this.#$=parseInt(J||"0"),this.#F(),this.#z();return}if(Q==="value"){if(this.#X||this.#j)return;this.#E(J),this.#f(),this.#T(),this.#F()}}get#O(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}get#L(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#M(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}#N(){if(!this.#Z)return;this.#Z.classList.toggle("drag-disabled",!this.#O)}#B(Q){return Math.max(0,Math.min(100,Q))}#R(Q,$){const J=(Q||"").trim().toLowerCase();if(!J)return $==="x"?this.#Q:this.#J;const Z=$==="x"?{left:0,center:50,right:100}:{top:0,center:50,bottom:100};if(J in Z)return Z[J];const j=Number.parseFloat(J.replace("%",""));if(Number.isFinite(j))return j;return $==="x"?this.#Q:this.#J}#D(Q){const $=Q.trim().replace(/,/g," ").split(/\s+/).filter(Boolean);if($.length<1)return;if($.length===1){const J=this.#R($[0],"x");this.#Q=J,this.#J=J;return}this.#Q=this.#R($[0],"x"),this.#J=this.#R($[1],"y")}#E(Q){const $=typeof Q==="string"?Q.trim():"";if(!$){this.#Q=50,this.#J=50;return}this.#D($)}#k(){const Q=Array.from({length:9},(j,_)=>{const K=_%3,q=Math.floor(_/3);return`<span class="origin-grid-cell" data-col="${K}" data-row="${q}">
233
234
  <span class="origin-grid-dot"></span>
234
- </span>`}).join(""),$=this.#Q.toFixed(this.#$),J=this.#J.toFixed(this.#$),Z=this.#B?`<div class="origin-values">
235
+ </span>`}).join(""),$=this.#Q.toFixed(this.#$),J=this.#J.toFixed(this.#$),Z=this.#L?`<div class="origin-values">
235
236
  <fig-input-number name="x" value="${$}" step="1" units="%"><span slot="prepend">X</span></fig-input-number>
236
237
  <fig-input-number name="y" value="${J}" step="1" units="%"><span slot="prepend">Y</span></fig-input-number>
237
238
  </div>`:"";this.innerHTML=`<div class="fig-origin-grid-surface">
@@ -240,12 +241,12 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
240
241
  <fig-handle></fig-handle>
241
242
  </div>
242
243
  </div>
243
- ${Z}`,this.#_=this.querySelector(".origin-grid"),this.#K=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#Z=this.querySelector("fig-handle"),this.#j=this.querySelector('fig-input-number[name="x"]'),this.#X=this.querySelector('fig-input-number[name="y"]'),this.#H(),this.#R(),this.#A(),this.#x()}#A(){const Q=this.#Q.toFixed(this.#$),$=this.#J.toFixed(this.#$);if(this.#j)this.#j.setAttribute("value",Q);if(this.#X)this.#X.setAttribute("value",$)}#P(){const Q=this.value;if(this.getAttribute("value")===Q)return;this.#G=!0,this.setAttribute("value",Q),this.#G=!1}#z(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,x:this.#Q,y:this.#J}}))}#H(){if(!this.#Z)return;const Q=($)=>16.6667+this.#M($)/100*66.6667;this.#Z.style.left=`${Q(this.#Q)}%`,this.#Z.style.top=`${Q(this.#J)}%`}#R(){if(!this.#Z)return;const Q=this.#Q<0||this.#Q>100,$=this.#J<0||this.#J>100,J=this.#Q<0,Z=this.#Q>100,_=this.#J<0,j=this.#J>100;this.#Z.classList.toggle("beyond-bounds-x",Q),this.#Z.classList.toggle("beyond-bounds-y",$),this.#Z.classList.toggle("overflow-left",J),this.#Z.classList.toggle("overflow-right",Z),this.#Z.classList.toggle("overflow-up",_),this.#Z.classList.toggle("overflow-down",j)}#F(Q,$){if(!this.#_)return null;const J=this.#_.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1),_=($-J.top)/Math.max(J.height,1);if(Z<0||Z>1||_<0||_>1)return null;const j=Math.max(0,Math.min(2,Math.floor(Z*3))),K=Math.max(0,Math.min(2,Math.floor(_*3)));return this.#K.find((q)=>Number(q.getAttribute("data-col"))===j&&Number(q.getAttribute("data-row"))===K)}#C(){for(let Q of this.#K)Q.classList.remove("is-hovered")}#h(Q){if(this.#C(),Q)Q.classList.add("is-hovered")}#b(Q,$,J){const Z=Number(Q),_=Number($);if(!Number.isFinite(Z)||!Number.isFinite(_))return;if(Z===this.#Q&&_===this.#J&&J==="input")return;this.#Q=Z,this.#J=_,this.#H(),this.#R(),this.#A(),this.#P(),this.#z(J)}#f(Q,$){if(!this.#_)return{x:this.#Q,y:this.#J};const J=this.#_.getBoundingClientRect(),Z=J.width/6,_=J.height/6,j=Math.max(1,J.width-Z*2),K=Math.max(1,J.height-_*2),q=(Q-(J.left+Z))/j,X=($-(J.top+_))/K;return{x:q*100,y:X*100}}#y(Q,$){if(!this.#_)return{x:50,y:50};const J=this.#_.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1)*3,_=($-J.top)/Math.max(J.height,1)*3,j=Math.max(0,Math.min(2,Math.floor(Z))),K=Math.max(0,Math.min(2,Math.floor(_)));return{x:j*50,y:K*50}}#g(Q){let J=Q,Z=1/0;for(let _ of p.SNAP_POINTS){const j=Math.abs(Q-_);if(j<Z)Z=j,J=_}return Z<=2.5?J:Q}#v(Q,$){if(!$)return Q;return{x:this.#g(Q.x),y:this.#g(Q.y)}}#m(){if(!this.#_||!this.#L||!this.#W)return;this.#_.removeEventListener("pointermove",this.#L),this.#_.removeEventListener("pointerup",this.#W),this.#_.removeEventListener("pointercancel",this.#W),this.#_.removeEventListener("lostpointercapture",this.#W),this.#L=null,this.#W=null}#u(Q){if(!this.#_||!this.#U)return;Q.preventDefault(),this.#q=!0,this.#Y=Q.pointerId;const{clientX:$,clientY:J}=Q,Z=3;let _=!1;this.#_.setPointerCapture(Q.pointerId),this.#L=(j)=>{if(!this.#q||j.pointerId!==this.#Y)return;const K=j.clientX-$,q=j.clientY-J,X=Math.hypot(K,q);if(!_&&X<Z)return;if(!_)_=!0,this.#_.classList.add("is-dragging"),this.#C();const W=this.#v(this.#f(j.clientX,j.clientY),j.shiftKey);this.#b(W.x,W.y,"input")},this.#W=(j)=>{if(!this.#q||j.pointerId!==this.#Y)return;if(this.#q=!1,this.#Y=null,this.#_.classList.remove("is-dragging"),this.#C(),this.#m(),!_){const K=this.#y($,J);this.#b(K.x,K.y,"input")}this.#z("change")},this.#_.addEventListener("pointermove",this.#L),this.#_.addEventListener("pointerup",this.#W),this.#_.addEventListener("pointercancel",this.#W),this.#_.addEventListener("lostpointercapture",this.#W)}#x(){if(!this.#_||!this.#Z)return;this.#_.addEventListener("pointerdown",($)=>{const J=this.#F($.clientX,$.clientY);if(this.#h(J),this.#U){this.#u($);return}const Z=this.#y($.clientX,$.clientY);this.#b(Z.x,Z.y,"input"),this.#z("change")}),this.#_.addEventListener("pointermove",($)=>{if(this.#q)return;const J=this.#F($.clientX,$.clientY);this.#h(J)}),this.#_.addEventListener("pointerleave",()=>{this.#C()});const Q=($,J)=>{if(!$)return;const Z=(_)=>{const j=Number.parseFloat(_.target.value);if(!Number.isFinite(j))return;if(J==="x")this.#b(j,this.#J,"input");else this.#b(this.#Q,j,"input")};$.addEventListener("input",Z),$.addEventListener("change",Z),$.addEventListener("focusout",()=>{this.#z("change")})};Q(this.#j,"x"),Q(this.#X,"y")}}customElements.define("fig-origin-grid",p);class R0 extends HTMLElement{#Q=null;#J=null;#$=null;#_=null;#K=null;#Z=null;#j=null;#X=null;#q=!1;#G={x:0.5,y:0.5};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.#Y=!1,this.#Q=(Q)=>this.#f(Q),this.#J=(Q)=>this.#y(Q),this.#$=(Q)=>this.#g(Q),this.#_=(Q)=>this.#v(Q),this.#K=(Q)=>this.#D(Q),this.#Z=(Q)=>this.#E(Q),this.#j=()=>this.#T(),this.#X=()=>this.#T()}#Y=!1;connectedCallback(){requestAnimationFrame(()=>{if(this.precision=this.getAttribute("precision")||3,this.precision=parseInt(this.precision),this.transform=this.getAttribute("transform")||1,this.transform=Number(this.transform),this.coordinates=this.getAttribute("coordinates")||"screen",this.#W(this.getAttribute("aspect-ratio")),!this.hasAttribute("value"))this.setAttribute("value","50% 50%");this.#B(),this.#M(),this.#F(),this.#C(),this.#h(),this.#Y=!0})}#L(Q){return this.coordinates==="math"?1-Q:Q}#W(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}disconnectedCallback(){this.#k()}get#U(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#B(){this.innerHTML=this.#N()}#O(){const Q=(this.getAttribute("axis-labels")||"").trim();if(!Q)return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1};const $=Q.split(/\s+/).filter(Boolean);if($.length===1)return{left:"",right:"",top:$[0],bottom:"",leftNoRotate:!1};if($.length===2){const[J,Z]=$;return{left:J,right:"",top:"",bottom:Z,leftNoRotate:!0}}if($.length===4){const[J,Z,_,j]=$;return{left:J,right:Z,top:_,bottom:j,leftNoRotate:!1}}return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1}}#N(){const Q=this.#O();return`
244
+ ${Z}`,this.#Z=this.querySelector(".origin-grid"),this.#q=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#K=this.querySelector("fig-handle"),this.#_=this.querySelector('fig-input-number[name="x"]'),this.#W=this.querySelector('fig-input-number[name="y"]'),this.#f(),this.#T(),this.#F(),this.#V()}#F(){const Q=this.#Q.toFixed(this.#$),$=this.#J.toFixed(this.#$);if(this.#_)this.#_.setAttribute("value",Q);if(this.#W)this.#W.setAttribute("value",$)}#z(){const Q=this.value;if(this.getAttribute("value")===Q)return;this.#X=!0,this.setAttribute("value",Q),this.#X=!1}#A(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,x:this.#Q,y:this.#J}}))}#f(){if(!this.#K)return;const Q=($)=>16.6667+this.#B($)/100*66.6667;this.#K.style.left=`${Q(this.#Q)}%`,this.#K.style.top=`${Q(this.#J)}%`}#T(){if(!this.#K)return;const Q=this.#Q<0||this.#Q>100,$=this.#J<0||this.#J>100,J=this.#Q<0,Z=this.#Q>100,j=this.#J<0,_=this.#J>100;this.#K.classList.toggle("beyond-bounds-x",Q),this.#K.classList.toggle("beyond-bounds-y",$),this.#K.classList.toggle("overflow-left",J),this.#K.classList.toggle("overflow-right",Z),this.#K.classList.toggle("overflow-up",j),this.#K.classList.toggle("overflow-down",_)}#H(Q,$){if(!this.#Z)return null;const J=this.#Z.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1),j=($-J.top)/Math.max(J.height,1);if(Z<0||Z>1||j<0||j>1)return null;const _=Math.max(0,Math.min(2,Math.floor(Z*3))),K=Math.max(0,Math.min(2,Math.floor(j*3)));return this.#q.find((q)=>Number(q.getAttribute("data-col"))===_&&Number(q.getAttribute("data-row"))===K)}#P(){for(let Q of this.#q)Q.classList.remove("is-hovered")}#I(Q){if(this.#P(),Q)Q.classList.add("is-hovered")}#S(Q,$,J){const Z=Number(Q),j=Number($);if(!Number.isFinite(Z)||!Number.isFinite(j))return;if(Z===this.#Q&&j===this.#J&&J==="input")return;this.#Q=Z,this.#J=j,this.#f(),this.#T(),this.#F(),this.#z(),this.#A(J)}#y(Q,$){if(!this.#Z)return{x:this.#Q,y:this.#J};const J=this.#Z.getBoundingClientRect(),Z=J.width/6,j=J.height/6,_=Math.max(1,J.width-Z*2),K=Math.max(1,J.height-j*2),q=(Q-(J.left+Z))/_,X=($-(J.top+j))/K;return{x:q*100,y:X*100}}#c(Q,$){if(!this.#Z)return{x:50,y:50};const J=this.#Z.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1)*3,j=($-J.top)/Math.max(J.height,1)*3,_=Math.max(0,Math.min(2,Math.floor(Z))),K=Math.max(0,Math.min(2,Math.floor(j)));return{x:_*50,y:K*50}}#p(Q){let J=Q,Z=1/0;for(let j of s.SNAP_POINTS){const _=Math.abs(Q-j);if(_<Z)Z=_,J=j}return Z<=2.5?J:Q}#u(Q,$){if(!$)return Q;return{x:this.#p(Q.x),y:this.#p(Q.y)}}#r(){if(!this.#Z||!this.#G||!this.#U)return;this.#Z.removeEventListener("pointermove",this.#G),this.#Z.removeEventListener("pointerup",this.#U),this.#Z.removeEventListener("pointercancel",this.#U),this.#Z.removeEventListener("lostpointercapture",this.#U),this.#G=null,this.#U=null}#x(Q){if(!this.#Z||!this.#O)return;Q.preventDefault(),this.#j=!0,this.#Y=Q.pointerId;const{clientX:$,clientY:J}=Q,Z=3;let j=!1;this.#Z.setPointerCapture(Q.pointerId),this.#G=(_)=>{if(!this.#j||_.pointerId!==this.#Y)return;const K=_.clientX-$,q=_.clientY-J,X=Math.hypot(K,q);if(!j&&X<Z)return;if(!j)j=!0,this.#Z.classList.add("is-dragging"),this.#P();const W=this.#u(this.#y(_.clientX,_.clientY),_.shiftKey);this.#S(W.x,W.y,"input")},this.#U=(_)=>{if(!this.#j||_.pointerId!==this.#Y)return;if(this.#j=!1,this.#Y=null,this.#Z.classList.remove("is-dragging"),this.#P(),this.#r(),!j){const K=this.#c($,J);this.#S(K.x,K.y,"input")}this.#A("change")},this.#Z.addEventListener("pointermove",this.#G),this.#Z.addEventListener("pointerup",this.#U),this.#Z.addEventListener("pointercancel",this.#U),this.#Z.addEventListener("lostpointercapture",this.#U)}#V(){if(!this.#Z||!this.#K)return;this.#Z.addEventListener("pointerdown",($)=>{const J=this.#H($.clientX,$.clientY);if(this.#I(J),this.#O){this.#x($);return}const Z=this.#c($.clientX,$.clientY);this.#S(Z.x,Z.y,"input"),this.#A("change")}),this.#Z.addEventListener("pointermove",($)=>{if(this.#j)return;const J=this.#H($.clientX,$.clientY);this.#I(J)}),this.#Z.addEventListener("pointerleave",()=>{this.#P()});const Q=($,J)=>{if(!$)return;const Z=(j)=>{const _=Number.parseFloat(j.target.value);if(!Number.isFinite(_))return;if(J==="x")this.#S(_,this.#J,"input");else this.#S(this.#Q,_,"input")};$.addEventListener("input",Z),$.addEventListener("change",Z),$.addEventListener("focusout",()=>{this.#A("change")})};Q(this.#_,"x"),Q(this.#W,"y")}}customElements.define("fig-origin-grid",s);class z0 extends HTMLElement{#Q=null;#J=null;#$=null;#Z=null;#q=null;#K=null;#_=null;#W=null;#j=!1;#X={x:0.5,y:0.5};constructor(){super();this.position={x:0.5,y:0.5},this.isDragging=!1,this.plane=null,this.cursor=null,this.xInput=null,this.yInput=null,this.coordinates="screen",this.#Y=!1,this.#Q=(Q)=>this.#z(Q),this.#J=()=>{this.isDragging=!0,this.plane?.classList.add("dragging")},this.#$=(Q)=>this.#A(Q),this.#Z=()=>this.#f(),this.#q=(Q)=>this.#D(Q),this.#K=(Q)=>this.#E(Q),this.#_=()=>this.#k(),this.#W=()=>this.#k()}#Y=!1;connectedCallback(){requestAnimationFrame(()=>{if(this.precision=this.getAttribute("precision")||3,this.precision=parseInt(this.precision),this.transform=this.getAttribute("transform")||1,this.transform=Number(this.transform),this.coordinates=this.getAttribute("coordinates")||"screen",this.#U(this.getAttribute("aspect-ratio")),!this.hasAttribute("value"))this.setAttribute("value","50% 50%");this.#L(),this.#B(),this.#P(),this.#I(),this.#S(),this.#Y=!0})}#G(Q){return this.coordinates==="math"?1-Q:Q}#U(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}disconnectedCallback(){this.#R()}get#O(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#L(){this.innerHTML=this.#N()}#M(){const Q=(this.getAttribute("axis-labels")||"").trim();if(!Q)return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1};const $=Q.split(/\s+/).filter(Boolean);if($.length===1)return{left:"",right:"",top:$[0],bottom:"",leftNoRotate:!1};if($.length===2){const[J,Z]=$;return{left:J,right:"",top:"",bottom:Z,leftNoRotate:!0}}if($.length===4){const[J,Z,j,_]=$;return{left:J,right:Z,top:j,bottom:_,leftNoRotate:!1}}return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1}}#N(){const Q=this.#M();return`
244
245
  <div class="fig-input-joystick-plane-container" tabindex="0">
245
246
  ${[Q.left?`<label class="fig-joystick-axis-label left${Q.leftNoRotate?" no-rotate":""}" aria-hidden="true">${Q.left}</label>`:"",Q.right?`<label class="fig-joystick-axis-label right" aria-hidden="true">${Q.right}</label>`:"",Q.top?`<label class="fig-joystick-axis-label top" aria-hidden="true">${Q.top}</label>`:"",Q.bottom?`<label class="fig-joystick-axis-label bottom" aria-hidden="true">${Q.bottom}</label>`:""].join("")}
246
247
  <div class="fig-input-joystick-plane">
247
248
  <div class="fig-input-joystick-guides"></div>
248
- <fig-handle></fig-handle>
249
+ <fig-handle drag drag-surface=".fig-input-joystick-plane" drag-axes="x,y" drag-snapping="modifier"></fig-handle>
249
250
  </div>
250
251
  <fig-tooltip text="Reset">
251
252
  <fig-button variant="ghost" icon="true" class="fig-joystick-reset" aria-label="Reset to default">
@@ -253,7 +254,7 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
253
254
  </fig-button>
254
255
  </fig-tooltip>
255
256
  </div>
256
- ${this.#U?`<div class="joystick-values">
257
+ ${this.#O?`<div class="joystick-values">
257
258
  <fig-input-number
258
259
  name="x"
259
260
  step="1"
@@ -273,10 +274,10 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
273
274
  <span slot="prepend">Y</span>
274
275
  </fig-input-number>
275
276
  </div>`:""}
276
- `}#M(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane.addEventListener("mousedown",this.#Q),this.plane.addEventListener("touchstart",this.#J),window.addEventListener("keydown",this.#$),window.addEventListener("keyup",this.#_);const Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#b());if(this.#U&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#K),this.xInput.addEventListener("change",this.#K),this.xInput.addEventListener("focusout",this.#j),this.yInput.addEventListener("input",this.#Z),this.yInput.addEventListener("change",this.#Z),this.yInput.addEventListener("focusout",this.#X)}#k(){if(this.plane)this.plane.removeEventListener("mousedown",this.#Q),this.plane.removeEventListener("touchstart",this.#J);if(window.removeEventListener("keydown",this.#$),window.removeEventListener("keyup",this.#_),this.#U&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#K),this.xInput.removeEventListener("change",this.#K),this.xInput.removeEventListener("focusout",this.#j),this.yInput.removeEventListener("input",this.#Z),this.yInput.removeEventListener("change",this.#Z),this.yInput.removeEventListener("focusout",this.#X)}#D(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.x=Math.max(0,Math.min(1,$/100)),this.#F(),this.#C(),this.#H()}#E(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.y=Math.max(0,Math.min(1,$/100)),this.#F(),this.#C(),this.#H()}#T(){this.#C(),this.#R()}#A(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}#P(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:$}}#z(Q){const $=this.plane.getBoundingClientRect();let J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),Z=Math.max(0,Math.min(1,(Q.clientY-$.top)/$.height)),_=this.coordinates==="math"?1-Z:Z;J=this.#A(J),_=this.#A(_);const j=this.#P(J,_);this.position=j;const K=this.#L(j.y);if(this.cursor.style.left=`${j.x*100}%`,this.cursor.style.top=`${K*100}%`,this.#U&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(j.x*100)),this.yInput.setAttribute("value",Math.round(j.y*100));this.#C(),this.#H()}#H(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#R(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#F(){const Q=this.#L(this.position.y);if(this.cursor)this.cursor.style.left=`${this.position.x*100}%`,this.cursor.style.top=`${Q*100}%`;if(this.#U&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#C(){const Q=this.value;if(this.getAttribute("value")!==Q)this.#q=!0,this.setAttribute("value",Q),this.#q=!1;this.#h()}#h(){const Q=this.#G,$=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",$),this.style.setProperty("--is-not-default",$?"0":"1")}#b(){this.position={...this.#G},this.#F(),this.#C(),this.#H(),this.#R()}#f(Q){if(Q.target.closest(".fig-joystick-reset, fig-tooltip"))return;this.isDragging=!0,this.#z(Q),this.plane.style.cursor="grabbing";const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#z(Z)},J=()=>{this.isDragging=!1,this.plane.classList.remove("dragging"),this.plane.style.cursor="",window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",J),this.#C(),this.#R()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",J)}#y(Q){if(Q.target.closest(".fig-joystick-reset, fig-tooltip"))return;Q.preventDefault(),this.isDragging=!0,this.#z(Q.touches[0]);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#z(Z.touches[0])},J=()=>{this.isDragging=!1,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",J),this.#C(),this.#R()};window.addEventListener("touchmove",$),window.addEventListener("touchend",J)}#g(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#v(Q){if(Q.key==="Shift")this.isShiftHeld=!1}focus(){this.querySelector(".fig-input-joystick-plane-container")?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){const $=Q==null?"":String(Q).trim();if(!$)this.position={x:0.5,y:0.5};else{const J=$.split(/[\s,]+/).filter(Boolean),Z=(K)=>{if(!K)return 0.5;const q=K.includes("%"),X=Number.parseFloat(K.replace(/%/g,"").trim());if(!Number.isFinite(X))return 0.5;const W=q||Math.abs(X)>1?X/100:X;return Math.max(0,Math.min(1,W))},_=Z(J[0]),j=Z(J[1]??J[0]);this.position={x:_,y:j}}if(this.#Y)this.#F(),this.#h()}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){this.#W(J);return}if(Q==="value"){if(this.#q||this.isDragging)return;this.value=J}if(Q==="precision")this.precision=parseInt(J);if(Q==="transform")this.transform=Number(J);if(Q==="fields"&&J!==$)this.#k(),this.#B(),this.#M(),this.#F();if(Q==="axis-labels"&&J!==$)this.#k(),this.#B(),this.#M(),this.#F();if(Q==="coordinates")this.coordinates=J||"screen",this.#F()}}customElements.define("fig-joystick",R0);class E0 extends HTMLElement{#Q;#J;#$=null;#_;constructor(){super();this.angle=0,this.#Q=1,this.#J=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.#_=this.#B.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.#K(),this.#W(),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#U()}#K(){this.innerHTML=this.#Z()}#Z(){const Q=this.#q(),$=this.min!==null?`min="${this.min}"`:"",J=this.max!==null?`max="${this.max}"`:"";return`
277
- <div class="fig-input-angle-plane" tabindex="0">
277
+ `}#B(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane?.addEventListener("pointerdown",this.#Q),this.cursor?.addEventListener("pointerdown",this.#J),this.cursor?.addEventListener("input",this.#$),this.cursor?.addEventListener("change",this.#Z);const Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#y());if(this.#O&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#q),this.xInput.addEventListener("change",this.#q),this.xInput.addEventListener("focusout",this.#_),this.yInput.addEventListener("input",this.#K),this.yInput.addEventListener("change",this.#K),this.yInput.addEventListener("focusout",this.#W)}#R(){if(this.plane?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("pointerdown",this.#J),this.cursor?.removeEventListener("input",this.#$),this.cursor?.removeEventListener("change",this.#Z),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#O&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#q),this.xInput.removeEventListener("change",this.#q),this.xInput.removeEventListener("focusout",this.#_),this.yInput.removeEventListener("input",this.#K),this.yInput.removeEventListener("change",this.#K),this.yInput.removeEventListener("focusout",this.#W)}#D(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.x=Math.max(0,Math.min(1,$/100)),this.#P(),this.#I(),this.#T()}#E(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.y=Math.max(0,Math.min(1,$/100)),this.#P(),this.#I(),this.#T()}#k(){this.#I(),this.#H()}#F(Q,$,{syncHandle:J=!0}={}){const Z=Math.max(0,Math.min(1,Q)),j=Math.max(0,Math.min(1,$)),_=this.coordinates==="math"?1-j:j;if(this.position={x:Z,y:_},J)this.#P();this.#I()}#z(Q){if(!this.plane||!this.cursor)return;if(Q.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;const $=this.plane.getBoundingClientRect(),J=$.width>0?(Q.clientX-$.left)/$.width:0.5,Z=$.height>0?(Q.clientY-$.top)/$.height:0.5;this.cursor.value=`${Math.round(J*100)}% ${Math.round(Z*100)}%`,this.#F(J,Z,{syncHandle:!1}),this.#T(),this.#H()}#A(Q){const $=Q.detail??{};if(typeof $.px!=="number"||typeof $.py!=="number")return;this.#F($.px,$.py,{syncHandle:!1}),this.#T()}#f(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#I(),this.#H()}#T(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#H(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#P(){const Q=this.#G(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${Q*100}%`;if(this.#O&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#I(){const Q=this.value;if(this.getAttribute("value")!==Q)this.#j=!0,this.setAttribute("value",Q),this.#j=!1;this.#S()}#S(){const Q=this.#X,$=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",$),this.style.setProperty("--is-not-default",$?"0":"1")}#y(){this.position={...this.#X},this.#P(),this.#I(),this.#T(),this.#H()}focus(){this.querySelector(".fig-input-joystick-plane-container")?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){const $=Q==null?"":String(Q).trim();if(!$)this.position={x:0.5,y:0.5};else{const J=$.split(/[\s,]+/).filter(Boolean),Z=(K)=>{if(!K)return 0.5;const q=K.includes("%"),X=Number.parseFloat(K.replace(/%/g,"").trim());if(!Number.isFinite(X))return 0.5;const W=q||Math.abs(X)>1?X/100:X;return Math.max(0,Math.min(1,W))},j=Z(J[0]),_=Z(J[1]??J[0]);this.position={x:j,y:_}}if(this.#Y)this.#P(),this.#S()}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){this.#U(J);return}if(Q==="value"){if(this.#j||this.isDragging)return;this.value=J}if(Q==="precision")this.precision=parseInt(J);if(Q==="transform")this.transform=Number(J);if(Q==="fields"&&J!==$)this.#R(),this.#L(),this.#B(),this.#P();if(Q==="axis-labels"&&J!==$)this.#R(),this.#L(),this.#B(),this.#P();if(Q==="coordinates")this.coordinates=J||"screen",this.#P()}}customElements.define("fig-joystick",z0);class H0 extends HTMLElement{#Q;#J;#$=null;#Z;constructor(){super();this.angle=0,this.#Q=1,this.#J=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.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#Z=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.dial=this.#K("dial",!0),this.showRotations=this.#_(),this.#q(),this.#L(),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#M()}#q(){this.innerHTML=this.#W()}#K(Q,$=!1){const J=this.getAttribute(Q);if(J===null)return $;const Z=J.trim().toLowerCase();if(Z===""||Z==="true")return!0;if(Z==="false")return!1;return!0}#_(){if(this.hasAttribute("rotations"))return this.#K("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#K("show-rotations",!1);return!1}#W(){const Q=this.#Y(),$=this.min!==null?`min="${this.min}"`:"",J=this.max!==null?`max="${this.max}"`:"";return`
278
+ ${this.dial?`<div class="fig-input-angle-plane" tabindex="0">
278
279
  <div class="fig-input-angle-handle"></div>
279
- </div>
280
+ </div>`:""}
280
281
  ${this.text?`<fig-input-number
281
282
  name="angle"
282
283
  step="${Q}"
@@ -286,33 +287,69 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
286
287
  units="${this.units}">
287
288
  ${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
288
289
  </fig-input-number>`:""}
289
- `}#j(){const Q=Math.abs(this.#G(this.angle));return Math.floor(Q/360)}#X(){if(!this.rotationSpan)return;const Q=this.#j();if(Q>1)this.rotationSpan.textContent=`\xD7${Q}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#q(){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}}#Y(Q){switch(this.units){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#L(Q,$,J){let Z;switch($){case"rad":Z=Q*180/Math.PI;break;case"turn":Z=Q*360;break;default:Z=Q}switch(J){case"rad":return Z*Math.PI/180;case"turn":return Z/360;default:return Z}}#W(){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.#X(),this.plane.addEventListener("mousedown",this.#P.bind(this)),this.plane.addEventListener("touchstart",this.#z.bind(this)),window.addEventListener("keydown",this.#H.bind(this)),window.addEventListener("keyup",this.#R.bind(this)),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#O.bind(this));this.addEventListener("change",this.#_,!0)}#U(){if(this.plane?.removeEventListener("mousedown",this.#P),this.plane?.removeEventListener("touchstart",this.#z),window.removeEventListener("keydown",this.#H),window.removeEventListener("keyup",this.#R),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#O);this.removeEventListener("change",this.#_,!0)}#B(Q){if(!Q.target?.matches?.("input"))return;const J=Q.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(J){const Z=parseFloat(J[1]);let _=J[2].toLowerCase();if(_==="deg")_="\xB0";if(_!==this.units){const j=this.#L(Z,_,this.units);Q.target.value=String(j)}}}#O(Q){Q.stopPropagation(),this.angle=Number(Q.target.value),this.#N(),this.#A(),this.#X(),this.#E(),this.#T()}#N(){const $=this.#G(this.angle)*Math.PI/180;this.#Q=Math.cos($),this.#J=Math.sin($)}#M(Q){if(!this.isShiftHeld)return Q;const $=45;return Math.round(Q/$)*$}#k(Q){const $=this.plane.getBoundingClientRect(),J=$.left+$.width/2,Z=$.top+$.height/2,_=Q.clientX-J,j=Q.clientY-Z;return Math.atan2(j,_)*180/Math.PI}#D(Q){let J=(this.#k(Q)%360+360)%360;if(J=this.#M(J),this.min!==null||this.max!==null)this.angle=this.#Y(J);else if(this.#$===null){this.#$=J;const j=(this.#G(this.angle)%360+360)%360;let K=J-j;if(K>180)K-=360;if(K<-180)K+=360;this.angle+=this.#Y(K)}else{let _=J-this.#$;if(_>180)_-=360;if(_<-180)_+=360;this.angle+=this.#Y(_),this.#$=J}if(this.#N(),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X(),this.#E()}#E(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#T(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#A(){if(this.handle){const $=this.#G(this.angle)*Math.PI/180,J=this.plane.offsetWidth/2-this.handle.offsetWidth/2,Z=Math.cos($)*J,_=Math.sin($)*J;this.handle.style.transform=`translate(${Z}px, ${_}px)`}}#P(Q){this.isDragging=!0,this.#$=null,this.#D(Q);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#D(Z)},J=()=>{this.isDragging=!1,this.#$=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",J),this.#T()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",J)}#z(Q){Q.preventDefault(),this.isDragging=!0,this.#$=null,this.#D(Q.touches[0]);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#D(Z.touches[0])},J=()=>{this.isDragging=!1,this.#$=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",J),this.#T()};window.addEventListener("touchmove",$),window.addEventListener("touchend",J)}#H(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.#J}set value(Q){if(isNaN(Q)){console.error("Invalid value: must be a number.");return}if(this.angle=Q,this.#N(),this.#A(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X()}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(this.isDragging)break;this.value=Number(J);break;case"precision":this.precision=parseInt(J);break;case"text":if(J!==$){if(this.text=J?.toLowerCase()==="true",this.plane)this.#K(),this.#W(),this.#A()}break;case"units":{let Z=J||"\xB0";if(Z==="deg")Z="\xB0";if(this.units=Z,this.plane)this.#K(),this.#W(),this.#A();break}case"min":if(this.min=J!==null?Number(J):null,this.plane)this.#K(),this.#W(),this.#A();break;case"max":if(this.max=J!==null?Number(J):null,this.plane)this.#K(),this.#W(),this.#A();break;case"show-rotations":if(this.showRotations=J==="true",this.plane)this.#K(),this.#W(),this.#A();break}}}customElements.define("fig-input-angle",E0);class F0 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,$,J){if(Q==="duration")this.style.setProperty("--shimmer-duration",J||"1.5s")}}customElements.define("fig-shimmer",F0);class P0 extends HTMLElement{static get observedAttributes(){return["open","visible"]}#Q=null;#J=null;connectedCallback(){requestAnimationFrame(()=>{this.#$()})}disconnectedCallback(){if(this.#Q&&this.#J)this.#Q.removeEventListener("click",this.#J)}#$(){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.#J=this.#_.bind(this),this.#Q.addEventListener("click",this.#J)}#_(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,$,J){if($===J)return;if(Q==="open"){const Z=J!==null&&J!=="false";this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Z},bubbles:!0}))}if(Q==="visible"){const Z=J!=="false";this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Z},bubbles:!0}))}}}customElements.define("fig-layer",P0);class H0 extends HTMLElement{#Q=null;#J=null;#$=null;#_="solid";anchorElement=null;#K="solid";#Z={h:0,s:0,v:85,a:1};#j={type:"linear",angle:0,centerX:50,centerY:50,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#q={url:null,scaleMode:"fill",scale:50};#G={stream:null,snapshot:null};#Y={};#L={};#W=null;#U=null;#B=null;#O=null;#N=!1;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#M(),this.#k(),this.#D()})}disconnectedCallback(){if(this.#$)this.#$.close(),this.#$.remove()}#M(){const Q=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Q)this.#J=document.createElement("fig-chit"),this.#J.setAttribute("background","#D9D9D9"),this.appendChild(this.#J),this.#Q=this.#J;else if(Q.tagName==="FIG-CHIT")this.#J=Q,this.#Q=Q;else this.#Q=Q,this.#J=null;if(this.#Q.addEventListener("click",($)=>{if(this.hasAttribute("disabled"))return;$.stopPropagation(),$.preventDefault(),this.#T()}),this.#J)requestAnimationFrame(()=>{const $=this.#J.querySelector('input[type="color"]');if($)$.style.pointerEvents="none"})}#k(){const Q=this.getAttribute("value");if(!Q)return;const $=["solid","gradient","image","video","webcam"];try{const J=JSON.parse(Q);if(J.type)this.#K=J.type;if(J.color){if(typeof J.color==="string")this.#Z=this.#V(J.color);else if(typeof J.color==="object"&&J.color.h!==void 0)this.#Z=J.color}if(J.opacity!==void 0)this.#Z.a=J.opacity/100;if(J.gradient)this.#j={...this.#j,...J.gradient};if(J.image)this.#X={...this.#X,...J.image};if(J.video)this.#q={...this.#q,...J.video};if(J.type&&!$.includes(J.type)){const{type:Z,..._}=J;this.#L[J.type]=_}}catch(J){if(Q.startsWith("#"))this.#K="solid",this.#Z=this.#V(Q)}}#D(){if(!this.#J)return;let Q,$="cover",J="center";switch(this.#K){case"solid":Q=this.#I(this.#Z);break;case"gradient":Q=this.#v();break;case"image":if(this.#X.url){Q=`url(${this.#X.url})`;const _=this.#E(this.#X.scaleMode,this.#X.scale);$=_.size,J=_.position}else Q="";break;case"video":if(this.#q.url){Q=`url(${this.#q.url})`;const _=this.#E(this.#q.scaleMode,this.#q.scale);$=_.size,J=_.position}else Q="";break;default:Q=this.#Y[this.#K]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#J.setAttribute("background",Q),this.#J.style.setProperty("--chit-bg-size",$),this.#J.style.setProperty("--chit-bg-position",J),this.#K==="solid")this.#J.setAttribute("alpha",this.#Z.a);else this.#J.removeAttribute("alpha")}#E(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"}}}#T(){if(!this.#$)this.#A();this.#P(this.#K),this.#$.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#H(),this.#R()})})}#A(){this.#Y={},this.querySelectorAll('[slot^="mode-"]').forEach((G)=>{const N=G.getAttribute("slot").slice(5);this.#Y[N]={element:G,label:G.getAttribute("label")||N.charAt(0).toUpperCase()+N.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"],J={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Z=this.getAttribute("mode");let _;if(Z){if(_=Z.split(",").map((N)=>N.trim().toLowerCase()).filter((N)=>$.includes(N)||this.#Y[N]),_.length===0)_=[...$]}else _=[...$];const j={...J};for(let[G,{label:N}]of Object.entries(this.#Y))j[G]=N;if(!_.includes(this.#K))this.#K=_[0],this.#_=_[0];const K=this.getAttribute("experimental"),q=K?`experimental="${K}"`:"";let X;if(_.length===1)X=`<h3 class="fig-fill-picker-type-label">${j[_[0]]}</h3>`;else{const G=_.map((N)=>`<option value="${N}">${j[N]}</option>`).join("\n ");X=`<fig-dropdown class="fig-fill-picker-type" ${q} value="${this.#K}">
290
- ${G}
291
- </fig-dropdown>`}const W=_.map((G)=>`<div class="fig-fill-picker-tab" data-tab="${G}"></div>`).join("\n ");this.#$.innerHTML=`
290
+ `}#j(){const Q=Math.abs(this.#G(this.angle));return Math.floor(Q/360)}#X(){if(!this.rotationSpan)return;const Q=this.#j();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}}#U(Q){switch(this.units){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#O(Q,$,J){let Z;switch($){case"rad":Z=Q*180/Math.PI;break;case"turn":Z=Q*360;break;default:Z=Q}switch(J){case"rad":return Z*Math.PI/180;case"turn":return Z/360;default:return Z}}#L(){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.#X(),this.plane?.addEventListener("mousedown",this.#f.bind(this)),this.plane?.addEventListener("touchstart",this.#T.bind(this)),window.addEventListener("keydown",this.#H.bind(this)),window.addEventListener("keyup",this.#P.bind(this)),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#B.bind(this));this.addEventListener("change",this.#Z,!0)}#M(){if(this.plane?.removeEventListener("mousedown",this.#f),this.plane?.removeEventListener("touchstart",this.#T),window.removeEventListener("keydown",this.#H),window.removeEventListener("keyup",this.#P),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#B);this.removeEventListener("change",this.#Z,!0)}#N(Q){if(!Q.target?.matches?.("input"))return;const J=Q.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(J){const Z=parseFloat(J[1]);let j=J[2].toLowerCase();if(j==="deg")j="\xB0";if(j!==this.units){const _=this.#O(Z,j,this.units);Q.target.value=String(_)}}}#B(Q){Q.stopPropagation(),this.angle=Number(Q.target.value),this.#R(),this.#A(),this.#X(),this.#F(),this.#z()}#R(){const $=this.#G(this.angle)*Math.PI/180;this.#Q=Math.cos($),this.#J=Math.sin($)}#D(Q){if(!this.isShiftHeld)return Q;const $=45;return Math.round(Q/$)*$}#E(Q){const $=this.plane.getBoundingClientRect(),J=$.left+$.width/2,Z=$.top+$.height/2,j=Q.clientX-J,_=Q.clientY-Z;return Math.atan2(_,j)*180/Math.PI}#k(Q){let J=(this.#E(Q)%360+360)%360;if(J=this.#D(J),this.min!==null||this.max!==null)this.angle=this.#U(J);else if(this.#$===null){this.#$=J;const _=(this.#G(this.angle)%360+360)%360;let K=J-_;if(K>180)K-=360;if(K<-180)K+=360;this.angle+=this.#U(K)}else{let j=J-this.#$;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#U(j),this.#$=J}if(this.#R(),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X(),this.#F()}#F(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#z(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#A(){if(this.handle){const $=this.#G(this.angle)*Math.PI/180,J=this.plane.offsetWidth/2-this.handle.offsetWidth/2,Z=Math.cos($)*J,j=Math.sin($)*J;this.handle.style.transform=`translate(${Z}px, ${j}px)`}}#f(Q){this.isDragging=!0,this.#$=null,this.#k(Q);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#k(Z)},J=()=>{this.isDragging=!1,this.#$=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",J),this.#z()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",J)}#T(Q){Q.preventDefault(),this.isDragging=!0,this.#$=null,this.#k(Q.touches[0]);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#k(Z.touches[0])},J=()=>{this.isDragging=!1,this.#$=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",J),this.#z()};window.addEventListener("touchmove",$),window.addEventListener("touchend",J)}#H(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#P(Q){if(Q.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","dial","rotations","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#Q}get opposite(){return this.#J}set value(Q){if(isNaN(Q)){console.error("Invalid value: must be a number.");return}if(this.angle=Q,this.#R(),this.#A(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X()}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(this.isDragging)break;this.value=Number(J);break;case"precision":this.precision=parseInt(J);break;case"text":if(J!==$){if(this.text=J?.toLowerCase()==="true",this.isConnected)this.#q(),this.#L(),this.#A()}break;case"dial":if(this.dial=this.#K("dial",!0),this.isConnected)this.#q(),this.#L(),this.#A();break;case"units":{let Z=J||"\xB0";if(Z==="deg")Z="\xB0";if(this.units=Z,this.isConnected)this.#q(),this.#L(),this.#A();break}case"min":if(this.min=J!==null?Number(J):null,this.isConnected)this.#q(),this.#L(),this.#A();break;case"max":if(this.max=J!==null?Number(J):null,this.isConnected)this.#q(),this.#L(),this.#A();break;case"rotations":case"show-rotations":if(this.showRotations=this.#_(),this.isConnected)this.#q(),this.#L(),this.#A();break}}}customElements.define("fig-input-angle",H0);class d 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,$,J){if(Q==="duration")this.style.setProperty("--shimmer-duration",J||"1.5s")}}customElements.define("fig-shimmer",d);class P0 extends d{}customElements.define("fig-skeleton",P0);class C0 extends HTMLElement{static get observedAttributes(){return["open","visible"]}#Q=null;#J=null;connectedCallback(){requestAnimationFrame(()=>{this.#$()})}disconnectedCallback(){if(this.#Q&&this.#J)this.#Q.removeEventListener("click",this.#J)}#$(){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.#J=this.#Z.bind(this),this.#Q.addEventListener("click",this.#J)}#Z(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,$,J){if($===J)return;if(Q==="open"){const Z=J!==null&&J!=="false";this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Z},bubbles:!0}))}if(Q==="visible"){const Z=J!=="false";this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Z},bubbles:!0}))}}}customElements.define("fig-layer",C0);class S0 extends HTMLElement{#Q=null;#J=null;#$=null;#Z="solid";anchorElement=null;#q="solid";#K="srgb";#_={h:0,s:0,v:85,a:1};#W="hex";#j={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#Y={url:null,scaleMode:"fill",scale:50};#G={stream:null,snapshot:null};#U={};#O={};#L=null;#M=null;#N=null;#B=null;#R=!1;#D=null;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#E(),this.#k(),this.#F()})}disconnectedCallback(){if(this.#D)this.#D(),this.#D=null;if(this.#$)this.#$.close(),this.#$.remove()}#E(){const Q=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Q)this.#J=document.createElement("fig-chit"),this.#J.setAttribute("background","#D9D9D9"),this.appendChild(this.#J),this.#Q=this.#J;else if(Q.tagName==="FIG-CHIT")this.#J=Q,this.#Q=Q;else this.#Q=Q,this.#J=null;if(this.#Q.addEventListener("click",($)=>{if(this.hasAttribute("disabled"))return;$.stopPropagation(),$.preventDefault(),this.#A()}),this.#J)requestAnimationFrame(()=>{const $=this.#J.querySelector('input[type="color"]');if($)$.style.pointerEvents="none"})}#k(){const Q=this.getAttribute("value");if(!Q)return;const $=["solid","gradient","image","video","webcam"];try{const J=JSON.parse(Q);if(J.type)this.#q=J.type;if(J.color){if(typeof J.color==="string")this.#_=this.#a(J.color);else if(typeof J.color==="object"&&J.color.h!==void 0)this.#_=J.color}if(J.opacity!==void 0)this.#_.a=J.opacity/100;if(J.colorSpace==="display-p3"||J.colorSpace==="srgb")this.#K=J.colorSpace;if(J.gradient)this.#j=S({...this.#j,...J.gradient});if(J.image)this.#X={...this.#X,...J.image};if(J.video)this.#Y={...this.#Y,...J.video};if(J.type&&!$.includes(J.type)){const{type:Z,...j}=J;this.#O[J.type]=j}}catch(J){if(Q.startsWith("#"))this.#q="solid",this.#_=this.#a(Q)}}#F(){if(!this.#J)return;let Q,$="cover",J="center";switch(this.#q){case"solid":Q=this.#b(this.#_);break;case"gradient":Q=this.#l();break;case"image":if(this.#X.url){Q=`url(${this.#X.url})`;const j=this.#z(this.#X.scaleMode,this.#X.scale);$=j.size,J=j.position}else Q="";break;case"video":if(this.#Y.url){Q=`url(${this.#Y.url})`;const j=this.#z(this.#Y.scaleMode,this.#Y.scale);$=j.size,J=j.position}else Q="";break;default:Q=this.#U[this.#q]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#J.setAttribute("background",Q),this.#J.style.setProperty("--chit-bg-size",$),this.#J.style.setProperty("--chit-bg-position",J),this.#q==="solid")this.#J.setAttribute("alpha",this.#_.a);else this.#J.removeAttribute("alpha")}#z(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"}}}#A(){if(!this.#$)this.#f();this.#T(this.#q);const Q=this.#$.querySelector(".fig-fill-picker-gamut");if(Q)Q.value=this.#K;this.#$.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#I(),this.#S()})})}#f(){this.#U={},this.querySelectorAll('[slot^="mode-"]').forEach((N)=>{const B=N.getAttribute("slot").slice(5);this.#U[B]={element:N,label:N.getAttribute("label")||B.charAt(0).toUpperCase()+B.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"],J={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Z=this.getAttribute("mode");let j;if(Z){if(j=Z.split(",").map((B)=>B.trim().toLowerCase()).filter((B)=>$.includes(B)||this.#U[B]),j.length===0)j=[...$]}else j=[...$];const _={...J};for(let[N,{label:B}]of Object.entries(this.#U))_[N]=B;if(!j.includes(this.#q))this.#q=j[0],this.#Z=j[0];const K=this.getAttribute("experimental"),q=K?`experimental="${K}"`:"";let X;if(j.length===1)X=`<h3 class="fig-fill-picker-type-label">${_[j[0]]}</h3>`;else{const N=j.map((B)=>`<option value="${B}">${_[B]}</option>`).join("\n ");X=`<fig-dropdown class="fig-fill-picker-type" ${q} value="${this.#q}">
291
+ ${N}
292
+ </fig-dropdown>`}const W=j.map((N)=>`<div class="fig-fill-picker-tab" data-tab="${N}"></div>`).join("\n "),Y=`<fig-dropdown class="fig-fill-picker-gamut" ${q} value="${this.#K}">
293
+ <option value="srgb">sRGB</option>
294
+ <option value="display-p3">Display P3</option>
295
+ </fig-dropdown>`;this.#$.innerHTML=`
292
296
  <fig-header>
293
297
  ${X}
298
+ ${Y}
294
299
  <fig-button icon variant="ghost" class="fig-fill-picker-close">
295
300
  <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
296
301
  </fig-button>
297
302
  </fig-header>
298
- <div class="fig-fill-picker-content">
303
+ <fig-content>
299
304
  ${W}
300
- </div>
301
- `,document.body.appendChild(this.#$);for(let[G,{element:N}]of Object.entries(this.#Y)){const B=this.#$.querySelector(`[data-tab="${G}"]`);if(!B)continue;while(N.firstChild)B.appendChild(N.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:G,container:B}}))}const L=this.#$.querySelector(".fig-fill-picker-type");if(L)L.addEventListener("change",(G)=>{this.#P(G.target.value)});this.#$.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#$.open=!1}),this.#$.addEventListener("close",()=>{this.#w()});const U={solid:()=>this.#z(),gradient:()=>this.#h(),image:()=>this.#m(),video:()=>this.#o(),webcam:()=>this.#c()};for(let[G,N]of Object.entries(U))if(!this.#Y[G]&&_.includes(G))N();for(let G of Object.keys(this.#Y)){if($.includes(G))continue;const N=this.#$.querySelector(`[data-tab="${G}"]`);if(!N)continue;N.addEventListener("input",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#L[G]=B.detail;this.#S()}),N.addEventListener("change",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#L[G]=B.detail;this.#w()})}}#P(Q){if(!this.#$?.querySelector(`.fig-fill-picker-tab[data-tab="${Q}"]`))return;this.#_=Q,this.#K=Q;const J=this.#$.querySelector(".fig-fill-picker-type");if(J&&J.value!==Q)J.value=Q;this.#$.querySelectorAll(".fig-fill-picker-tab").forEach((j)=>{if(j.dataset.tab===Q)j.style.display="block";else j.style.display="none"});const _=this.#$.querySelector(".fig-fill-picker-content");if(_)_.style.padding=this.#Y[Q]?"0":"";if(Q==="gradient")requestAnimationFrame(()=>{this.#f()});this.#D(),this.#S()}#z(){const Q=this.#$.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false";if(Q.innerHTML=`
302
- <div class="fig-fill-picker-color-area">
305
+ </fig-content>
306
+ `,document.body.appendChild(this.#$);for(let[N,{element:B}]of Object.entries(this.#U)){const O=this.#$.querySelector(`[data-tab="${N}"]`);if(!O)continue;while(B.firstChild)O.appendChild(B.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:N,container:O}}))}const U=this.#$.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(N)=>{this.#T(N.target.value)});const L=this.#$.querySelector(".fig-fill-picker-gamut");if(L){const N=(B)=>{const O=B.currentTarget?.value??B.target?.value??B.detail;if(O&&O!==this.#K)this.#K=O,this.#P()};L.addEventListener("input",N),L.addEventListener("change",N)}this.#$.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#$.open=!1}),this.#$.addEventListener("close",()=>{this.#d()});const F={solid:()=>this.#H(),gradient:()=>this.#V(),image:()=>this.#g(),video:()=>this.#_0(),webcam:()=>this.#n()};for(let[N,B]of Object.entries(F))if(!this.#U[N]&&j.includes(N))B();for(let N of Object.keys(this.#U)){if($.includes(N))continue;const B=this.#$.querySelector(`[data-tab="${N}"]`);if(!B)continue;B.addEventListener("input",(O)=>{if(O.target===this)return;if(O.stopPropagation(),O.detail)this.#O[N]=O.detail;this.#C()}),B.addEventListener("change",(O)=>{if(O.target===this)return;if(O.stopPropagation(),O.detail)this.#O[N]=O.detail;this.#d()})}}#T(Q){if(!this.#$?.querySelector(`.fig-fill-picker-tab[data-tab="${Q}"]`))return;this.#Z=Q,this.#q=Q;const J=this.#$.querySelector(".fig-fill-picker-type");if(J&&J.value!==Q)J.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-content");if(j)j.style.padding=this.#U[Q]?"0":"";if(Q==="gradient")requestAnimationFrame(()=>{this.#v()});this.#F(),this.#C()}#H(){const Q=this.#$.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false",J=this.getAttribute("experimental"),Z=J?`experimental="${J}"`:"",j=localStorage.getItem("figui-color-input-mode");if(j&&["hex","rgb","hsl","hsb","lab","lch"].includes(j))this.#W=j;if(Q.innerHTML=`
307
+ <fig-preview class="fig-fill-picker-color-area">
303
308
  <canvas width="200" height="200"></canvas>
304
- <div class="fig-fill-picker-handle"></div>
305
- </div>
309
+ <fig-handle
310
+ drag
311
+ drag-surface=".fig-fill-picker-color-area"
312
+ drag-axes="x,y"
313
+ ></fig-handle>
314
+ </fig-preview>
306
315
  <div class="fig-fill-picker-sliders">
307
- <fig-slider type="hue" variant="neue" min="0" max="360" value="${this.#Z.h}"></fig-slider>
308
- ${$?`<fig-slider type="opacity" variant="neue" text="true" units="%" min="0" max="100" value="${this.#Z.a*100}" color="${this.#I(this.#Z)}"></fig-slider>`:""}
309
- </div>
310
- <div class="fig-fill-picker-inputs">
311
- <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>
312
- <fig-input-color class="fig-fill-picker-color-input" text="true" picker="false" value="${this.#I(this.#Z)}"></fig-input-color>
316
+ <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper"><span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"></span></fig-button></fig-tooltip>
317
+ <fig-slider type="hue" variant="neue" min="0" max="360" value="${this.#_.h}"></fig-slider>
318
+ ${$?`<fig-slider type="opacity" variant="neue" text="true" units="%" min="0" max="100" value="${this.#_.a*100}" color="${this.#b(this.#_)}"></fig-slider>`:""}
313
319
  </div>
314
- `,this.#W=Q.querySelector("canvas"),this.#U=Q.querySelector(".fig-fill-picker-handle"),this.#H(),this.#R(),this.#F(),this.#B=Q.querySelector('fig-slider[type="hue"]'),this.#B.addEventListener("input",(_)=>{this.#Z.h=parseFloat(_.target.value),this.#H(),this.#R(),this.#C(),this.#S()}),this.#B.addEventListener("change",()=>{this.#w()}),$)this.#O=Q.querySelector('fig-slider[type="opacity"]'),this.#O.addEventListener("input",(_)=>{this.#Z.a=parseFloat(_.target.value)/100,this.#C(),this.#S()}),this.#O.addEventListener("change",()=>{this.#w()});const J=Q.querySelector(".fig-fill-picker-color-input");J.addEventListener("input",(_)=>{if(this.#N)return;const j=_.target.value;if(this.#Z={...this.#V(j),a:this.#Z.a},this.#H(),this.#R(),this.#B)this.#B.setAttribute("value",this.#Z.h);this.#S()}),J.addEventListener("change",()=>{this.#w()});const Z=Q.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)Z.addEventListener("click",async()=>{try{const j=await new EyeDropper().open();this.#Z={...this.#V(j.sRGBHex),a:this.#Z.a},this.#H(),this.#R(),this.#C(),this.#S()}catch(_){}});else Z.setAttribute("disabled",""),Z.title="EyeDropper not supported in this browser"}#H(){if(!this.#W&&this.#$)this.#W=this.#$.querySelector('[data-tab="solid"] canvas');if(!this.#W)return;const Q=this.#W.getContext("2d");if(!Q)return;const $=this.#W.width,J=this.#W.height;Q.clearRect(0,0,$,J);const Z=this.#Z.h,_=Q.createLinearGradient(0,0,$,0);_.addColorStop(0,"#FFFFFF"),_.addColorStop(1,`hsl(${Z}, 100%, 50%)`),Q.fillStyle=_,Q.fillRect(0,0,$,J);const j=Q.createLinearGradient(0,0,0,J);j.addColorStop(0,"rgba(0,0,0,0)"),j.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=j,Q.fillRect(0,0,$,J)}#R(Q=0){if(!this.#U||!this.#W)return;const $=this.#W.getBoundingClientRect();if(($.width===0||$.height===0)&&Q<5){requestAnimationFrame(()=>this.#R(Q+1));return}const J=this.#Z.s/100*$.width,Z=(100-this.#Z.v)/100*$.height;this.#U.style.left=`${J}px`,this.#U.style.top=`${Z}px`,this.#U.style.setProperty("--picker-color",this.#I({...this.#Z,a:1}))}#F(){if(!this.#W||!this.#U)return;const Q=()=>{if(!this.#N)return;this.#N=!1,this.#w()},$=(J)=>{const Z=this.#W.getBoundingClientRect(),_=Math.max(0,Math.min(J.clientX-Z.left,Z.width)),j=Math.max(0,Math.min(J.clientY-Z.top,Z.height));this.#Z.s=_/Z.width*100,this.#Z.v=100-j/Z.height*100,this.#R(),this.#C(),this.#S()};this.#W.addEventListener("pointerdown",(J)=>{this.#N=!0,this.#W.setPointerCapture(J.pointerId),$(J)}),this.#W.addEventListener("pointermove",(J)=>{if(!this.#N)return;if(J.buttons===0){Q();return}$(J)}),this.#W.addEventListener("pointerup",Q),this.#W.addEventListener("pointercancel",Q),this.#W.addEventListener("lostpointercapture",Q),this.#U.addEventListener("pointerdown",(J)=>{J.stopPropagation(),this.#N=!0,this.#U.setPointerCapture(J.pointerId)}),this.#U.addEventListener("pointermove",(J)=>{if(!this.#N)return;if(J.buttons===0){Q();return}$(J)}),this.#U.addEventListener("pointerup",Q),this.#U.addEventListener("pointercancel",Q),this.#U.addEventListener("lostpointercapture",Q)}#C(){if(!this.#$)return;const Q=this.#I(this.#Z),$=this.#$.querySelector(".fig-fill-picker-color-input");if($)$.setAttribute("value",Q);if(this.#O)this.#O.setAttribute("color",Q);this.#D()}#h(){const Q=this.#$.querySelector('[data-tab="gradient"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
315
- <div class="fig-fill-picker-gradient-header">
320
+ <fig-field class="fig-fill-picker-inputs" direction="horizontal">
321
+ <fig-dropdown class="fig-fill-picker-input-mode" ${Z} value="${this.#W}">
322
+ <option value="hex">Hex</option>
323
+ <option value="rgb">RGB</option>
324
+ <option value="hsl">HSL</option>
325
+ <option value="hsb">HSB</option>
326
+ <option value="lab">LAB</option>
327
+ <option value="lch">LCH</option>
328
+ </fig-dropdown>
329
+ <span class="fig-fill-picker-input-fields"></span>
330
+ </fig-field>
331
+ `,this.#L=Q.querySelector("canvas"),this.#M=Q.querySelector("fig-handle"),this.#I(),this.#S(),this.#c(),this.#N=Q.querySelector('fig-slider[type="hue"]'),this.#N.addEventListener("input",(q)=>{this.#_.h=parseFloat(q.target.value),this.#I(),this.#S(),this.#x(),this.#C()}),this.#N.addEventListener("change",()=>{this.#d()}),$)this.#B=Q.querySelector('fig-slider[type="opacity"]'),this.#B.addEventListener("input",(q)=>{this.#_.a=parseFloat(q.target.value)/100,this.#x(),this.#C()}),this.#B.addEventListener("change",()=>{this.#d()});Q.querySelector(".fig-fill-picker-input-mode").addEventListener("input",(q)=>{this.#W=q.target.value,localStorage.setItem("figui-color-input-mode",this.#W),this.#p()}),this.#p();const K=Q.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)K.addEventListener("click",async()=>{try{const X=await new EyeDropper().open();this.#_={...this.#a(X.sRGBHex),a:this.#_.a},this.#I(),this.#S(),this.#x(),this.#C()}catch(q){}});else K.setAttribute("disabled",""),K.title="EyeDropper not supported in this browser"}#P(){const Q=this.#$?.querySelector('[data-tab="solid"]');if(Q){const $=Q.querySelector("canvas");if($){const J=document.createElement("canvas");J.width=$.width,J.height=$.height,$.replaceWith(J),this.#L=J,this.#c()}this.#I(),this.#S()}this.#h(),this.#C()}#I(){if(!this.#L&&this.#$)this.#L=this.#$.querySelector('[data-tab="solid"] canvas');if(!this.#L)return;const Q=this.#K==="display-p3"?"display-p3":"srgb",$=this.#L.getContext("2d",{colorSpace:Q});if(!$)return;const J=this.#L.width,Z=this.#L.height;$.clearRect(0,0,J,Z);const j=this.#_.h,_=this.#K==="display-p3",K=$.createLinearGradient(0,0,J,0);if(_){K.addColorStop(0,"color(display-p3 1 1 1)");const[X,W,Y]=i0(j,100,50);K.addColorStop(1,`color(display-p3 ${X} ${W} ${Y})`)}else K.addColorStop(0,"#FFFFFF"),K.addColorStop(1,`hsl(${j}, 100%, 50%)`);$.fillStyle=K,$.fillRect(0,0,J,Z);const q=$.createLinearGradient(0,0,0,Z);q.addColorStop(0,"rgba(0,0,0,0)"),q.addColorStop(1,"rgba(0,0,0,1)"),$.fillStyle=q,$.fillRect(0,0,J,Z)}#S(Q=0){if(!this.#M||!this.#L)return;const $=this.#L.getBoundingClientRect();if(($.width===0||$.height===0)&&Q<5){requestAnimationFrame(()=>this.#S(Q+1));return}const J=Math.max(0,Math.min(100,this.#_.s)),Z=Math.max(0,Math.min(100,100-this.#_.v));this.#M.setAttribute("value",`${J}% ${Z}%`),this.#M.setAttribute("color",this.#b({...this.#_,a:1}))}#y(Q,$,J={}){const{updateHandle:Z=!0,emitInput:j=!0,emitChange:_=!1}=J;if(this.#_.s=Math.max(0,Math.min(100,Q*100)),this.#_.v=Math.max(0,Math.min(100,(1-$)*100)),this.#M)this.#M.setAttribute("color",this.#b({...this.#_,a:1}));if(Z)this.#S();if(this.#x(),j)this.#C();if(_)this.#d()}#c(){if(this.#D)this.#D(),this.#D=null;if(!this.#L||!this.#M)return;const Q=this.#L.parentElement||this.#L,$=this.#M;let J=!1;const Z=(W,Y={})=>{const U=Q.getBoundingClientRect();if(U.width===0||U.height===0)return;const L=Math.max(0,Math.min(W.clientX-U.left,U.width)),F=Math.max(0,Math.min(W.clientY-U.top,U.height));this.#y(L/U.width,F/U.height,Y)},j=(W)=>{if(W.button!==0)return;if(W.target===$||$.contains(W.target))return;J=!0,this.#R=!0,Q.setPointerCapture(W.pointerId),Z(W,{updateHandle:!0,emitInput:!0})},_=(W)=>{if(!J)return;if(W.buttons===0){K();return}Z(W,{updateHandle:!0,emitInput:!0})},K=()=>{if(!J)return;J=!1,this.#R=!1,this.#d()},q=(W)=>{this.#R=!0;const Y=W.detail?.px,U=W.detail?.py;if(!Number.isFinite(Y)||!Number.isFinite(U))return;$.setAttribute("value",`${Y*100}% ${U*100}%`),this.#y(Y,U,{updateHandle:!1,emitInput:!0})},X=(W)=>{const Y=W.detail?.px,U=W.detail?.py;if(Number.isFinite(Y)&&Number.isFinite(U))$.setAttribute("value",`${Y*100}% ${U*100}%`),this.#y(Y,U,{updateHandle:!1,emitInput:!1});this.#R=!1,this.#d()};Q.addEventListener("pointerdown",j),Q.addEventListener("pointermove",_),Q.addEventListener("pointerup",K),Q.addEventListener("pointercancel",K),Q.addEventListener("lostpointercapture",K),$.addEventListener("input",q),$.addEventListener("change",X),this.#D=()=>{Q.removeEventListener("pointerdown",j),Q.removeEventListener("pointermove",_),Q.removeEventListener("pointerup",K),Q.removeEventListener("pointercancel",K),Q.removeEventListener("lostpointercapture",K),$.removeEventListener("input",q),$.removeEventListener("change",X),this.#R=!1}}#p(){const Q=this.#$?.querySelector(".fig-fill-picker-input-fields");if(!Q)return;const $=(j,_)=>`<fig-tooltip text="${j}">${_}</fig-tooltip>`,J=(j,_,K,q)=>`<fig-input-number class="${j}" min="${_}" max="${K}"${q!=null?` step="${q}"`:""}></fig-input-number>`;let Z;switch(this.#W){case"rgb":Z=`<div class="input-combo">
332
+ ${$("Red",J("fig-fill-picker-ci-r",0,255))}
333
+ ${$("Green",J("fig-fill-picker-ci-g",0,255))}
334
+ ${$("Blue",J("fig-fill-picker-ci-b",0,255))}
335
+ </div>`;break;case"hsl":Z=`<div class="input-combo">
336
+ ${$("Hue",J("fig-fill-picker-ci-h",0,360))}
337
+ ${$("Saturation",J("fig-fill-picker-ci-s",0,100))}
338
+ ${$("Lightness",J("fig-fill-picker-ci-l",0,100))}
339
+ </div>`;break;case"hsb":Z=`<div class="input-combo">
340
+ ${$("Hue",J("fig-fill-picker-ci-h",0,360))}
341
+ ${$("Saturation",J("fig-fill-picker-ci-s",0,100))}
342
+ ${$("Brightness",J("fig-fill-picker-ci-v",0,100))}
343
+ </div>`;break;case"lab":Z=`<div class="input-combo">
344
+ ${$("Lightness",J("fig-fill-picker-ci-okl",0,100))}
345
+ ${$("Green-Red axis",J("fig-fill-picker-ci-oka",-0.4,0.4,0.001))}
346
+ ${$("Blue-Yellow axis",J("fig-fill-picker-ci-okb",-0.4,0.4,0.001))}
347
+ </div>`;break;case"lch":Z=`<div class="input-combo">
348
+ ${$("Lightness",J("fig-fill-picker-ci-okl",0,100))}
349
+ ${$("Chroma",J("fig-fill-picker-ci-okc",0,0.4,0.001))}
350
+ ${$("Hue",J("fig-fill-picker-ci-okh",0,360))}
351
+ </div>`;break;default:Z='<fig-input-text class="fig-fill-picker-ci-hex" placeholder="FFFFFF"></fig-input-text>';break}Q.innerHTML=Z,this.#u(),requestAnimationFrame(()=>this.#x())}#u(){const Q=this.#$?.querySelector(".fig-fill-picker-input-fields");if(!Q)return;const $=()=>{if(this.#R)return;const j=this.#r();if(!j)return;if(this.#_={...j,a:this.#_.a},this.#I(),this.#S(),this.#N)this.#N.setAttribute("value",this.#_.h);this.#C()},J=()=>this.#d();Q.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",$),j.addEventListener("change",J)})}#r(){const Q=(J)=>this.#$?.querySelector(`.${J}`),$=(J)=>parseFloat(Q(J)?.value??0);switch(this.#W){case"rgb":return this.#i({r:$("fig-fill-picker-ci-r"),g:$("fig-fill-picker-ci-g"),b:$("fig-fill-picker-ci-b")});case"hsl":{const J=this.#Y0({h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),l:$("fig-fill-picker-ci-l")});return this.#i(J)}case"hsb":return{h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),v:$("fig-fill-picker-ci-v"),a:1};case"lab":{const J=this.#W0({l:$("fig-fill-picker-ci-okl")/100,a:$("fig-fill-picker-ci-oka"),b:$("fig-fill-picker-ci-okb")});return this.#i(J)}case"lch":{const J=this.#G0({l:$("fig-fill-picker-ci-okl")/100,c:$("fig-fill-picker-ci-okc"),h:$("fig-fill-picker-ci-okh")});return this.#i(J)}default:{const J=Q("fig-fill-picker-ci-hex");if(!J)return null;let Z=J.value.replace(/^#/,"");if(Z.length===3)Z=Z[0]+Z[0]+Z[1]+Z[1]+Z[2]+Z[2];if(Z.length!==6||!/^[0-9a-fA-F]{6}$/.test(Z))return null;return this.#a(`#${Z}`)}}}#x(){if(!this.#$)return;const Q=this.#b(this.#_),$=this.#m(this.#_),J=(j)=>this.#$.querySelector(`.${j}`),Z=(j,_)=>{const K=J(j);if(K)K.setAttribute("value",_)};switch(this.#W){case"rgb":Z("fig-fill-picker-ci-r",$.r),Z("fig-fill-picker-ci-g",$.g),Z("fig-fill-picker-ci-b",$.b);break;case"hsl":{const j=this.#X0($);Z("fig-fill-picker-ci-h",Math.round(j.h)),Z("fig-fill-picker-ci-s",Math.round(j.s)),Z("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":Z("fig-fill-picker-ci-h",Math.round(this.#_.h)),Z("fig-fill-picker-ci-s",Math.round(this.#_.s)),Z("fig-fill-picker-ci-v",Math.round(this.#_.v));break;case"lab":{const j=this.#q0($);Z("fig-fill-picker-ci-okl",Math.round(j.l*100)),Z("fig-fill-picker-ci-oka",+j.a.toFixed(3)),Z("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{const j=this.#U0($);Z("fig-fill-picker-ci-okl",Math.round(j.l*100)),Z("fig-fill-picker-ci-okc",+j.c.toFixed(3)),Z("fig-fill-picker-ci-okh",Math.round(j.h));break}default:Z("fig-fill-picker-ci-hex",Q.replace(/^#/,"").toUpperCase());break}if(this.#B)this.#B.setAttribute("color",Q);this.#F()}#V(){const Q=this.#$.querySelector('[data-tab="gradient"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
352
+ <fig-field class="fig-fill-picker-gradient-header" direction="horizontal">
316
353
  <fig-dropdown class="fig-fill-picker-gradient-type" ${J} value="${this.#j.type}">
317
354
  <option value="linear" selected>Linear</option>
318
355
  <option value="radial">Radial</option>
@@ -330,30 +367,47 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
330
367
  <span class="fig-mask-icon" style="--icon: var(--icon-swap)"></span>
331
368
  </fig-button>
332
369
  </fig-tooltip>
333
- </div>
334
- <div class="fig-fill-picker-gradient-preview">
370
+ </fig-field>
371
+ <fig-preview class="fig-fill-picker-gradient-preview">
335
372
  <div class="fig-fill-picker-gradient-bar"></div>
336
373
  <div class="fig-fill-picker-gradient-stops-handles"></div>
337
- </div>
374
+ </fig-preview>
375
+ <fig-field class="fig-fill-picker-gradient-interpolation" direction="horizontal">
376
+ <label>Mixing</label>
377
+ <fig-dropdown class="fig-fill-picker-gradient-space" full ${J} value="${this.#j.interpolationSpace==="oklch"?`oklch-${this.#j.hueInterpolation||"shorter"}`:this.#j.interpolationSpace}">
378
+ <optgroup label="sRGB">
379
+ <option value="srgb-linear">Linear</option>
380
+ </optgroup>
381
+ <optgroup label="OKLab">
382
+ <option value="oklab">Perceptual</option>
383
+ </optgroup>
384
+ <optgroup label="OKLCH">
385
+ <option value="oklch-shorter">Shorter hue</option>
386
+ <option value="oklch-longer">Longer hue</option>
387
+ <option value="oklch-increasing">Increasing hue</option>
388
+ <option value="oklch-decreasing">Decreasing hue</option>
389
+ </optgroup>
390
+ </fig-dropdown>
391
+ </fig-field>
338
392
  <div class="fig-fill-picker-gradient-stops">
339
- <div class="fig-fill-picker-gradient-stops-header">
393
+ <fig-header class="fig-fill-picker-gradient-stops-header" borderless>
340
394
  <span>Stops</span>
341
395
  <fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" title="Add stop">
342
396
  <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
343
397
  </fig-button>
344
- </div>
398
+ </fig-header>
345
399
  <div class="fig-fill-picker-gradient-stops-list"></div>
346
400
  </div>
347
- `,this.#f(),this.#b(Q)}#b(Q){Q.querySelector(".fig-fill-picker-gradient-type").addEventListener("change",(j)=>{this.#j.type=j.target.value,this.#f(),this.#S()}),Q.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(j)=>{const K=parseFloat(j.target.value)||0;this.#j.angle=(K+90)%360,this.#y(),this.#S()});const Z=Q.querySelector(".fig-fill-picker-gradient-cx"),_=Q.querySelector(".fig-fill-picker-gradient-cy");Z?.addEventListener("input",(j)=>{this.#j.centerX=parseFloat(j.target.value)||50,this.#y(),this.#S()}),_?.addEventListener("input",(j)=>{this.#j.centerY=parseFloat(j.target.value)||50,this.#y(),this.#S()}),Q.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#j.stops.forEach((j)=>{j.position=100-j.position}),this.#j.stops.sort((j,K)=>j.position-K.position),this.#f(),this.#S()}),Q.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#j.stops.push({position:50,color:"#888888",opacity:100}),this.#j.stops.sort((K,q)=>K.position-q.position),this.#f(),this.#S()})}#f(){if(!this.#$)return;const Q=this.#$.querySelector('[data-tab="gradient"]');if(!Q)return;const $=Q.querySelector(".fig-fill-picker-gradient-angle"),J=Q.querySelector(".fig-fill-picker-gradient-center");if(this.#j.type==="radial")$.style.display="none",J.style.display="flex";else{$.style.display="block",J.style.display="none";const Z=(this.#j.angle-90+360)%360;$.setAttribute("value",Z)}this.#y(),this.#g()}#y(){if(!this.#$)return;const Q=this.#$.querySelector(".fig-fill-picker-gradient-bar");if(Q)Q.style.background=this.#v();this.#D()}#g(){if(!this.#$)return;const Q=this.#$.querySelector(".fig-fill-picker-gradient-stops-list");if(!Q)return;Q.innerHTML=this.#j.stops.map(($,J)=>`
348
- <div class="fig-fill-picker-gradient-stop-row" data-index="${J}">
401
+ `,this.#v(),this.#j0(Q)}#j0(Q){const $=Q.querySelector(".fig-fill-picker-gradient-type"),J=(W)=>W.currentTarget?.value??W.target?.value??W.detail,Z=(W)=>{this.#j.type=J(W),this.#v(),this.#C()};$.addEventListener("input",Z),$.addEventListener("change",Z);const j=Q.querySelector(".fig-fill-picker-gradient-space"),_=(W)=>{const Y=J(W);let U=Y,L="shorter";if(Y.startsWith("oklch-"))U="oklch",L=Y.slice(6);this.#j=S({...this.#j,interpolationSpace:U,hueInterpolation:L}),this.#v(),this.#C()};j?.addEventListener("input",_),j?.addEventListener("change",_),Q.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(W)=>{const Y=parseFloat(W.target.value)||0;this.#j.angle=(Y+90)%360,this.#h(),this.#C()});const q=Q.querySelector(".fig-fill-picker-gradient-cx"),X=Q.querySelector(".fig-fill-picker-gradient-cy");q?.addEventListener("input",(W)=>{this.#j.centerX=parseFloat(W.target.value)||50,this.#h(),this.#C()}),X?.addEventListener("input",(W)=>{this.#j.centerY=parseFloat(W.target.value)||50,this.#h(),this.#C()}),Q.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#j.stops.forEach((W)=>{W.position=100-W.position}),this.#j.stops.sort((W,Y)=>W.position-Y.position),this.#v(),this.#C()}),Q.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#j.stops.push({position:50,color:"#888888",opacity:100}),this.#j.stops.sort((Y,U)=>Y.position-U.position),this.#v(),this.#C()})}#v(){if(!this.#$)return;const Q=this.#$.querySelector('[data-tab="gradient"]');if(!Q)return;this.#j=S(this.#j);const $=Q.querySelector(".fig-fill-picker-gradient-angle"),J=Q.querySelector(".fig-fill-picker-gradient-center");if(this.#j.type==="radial")$.style.display="none",J.style.display="flex";else{$.style.display="block",J.style.display="none";const j=(this.#j.angle-90+360)%360;$.setAttribute("value",j)}const Z=Q.querySelector(".fig-fill-picker-gradient-space");if(Z)Z.value=this.#j.interpolationSpace==="oklch"?`oklch-${this.#j.hueInterpolation||"shorter"}`:this.#j.interpolationSpace;this.#h(),this.#o()}#h(){if(!this.#$)return;const Q=this.#$.querySelector(".fig-fill-picker-gradient-preview"),$=this.#$.querySelector(".fig-fill-picker-gradient-bar");if(Q||$){const J=this.#l();if($)$.style.background=J;if(Q)Q.style.background=J}this.#F()}#o(){if(!this.#$)return;const Q=this.#$.querySelector(".fig-fill-picker-gradient-stops-list");if(!Q)return;Q.innerHTML=this.#j.stops.map(($,J)=>`
402
+ <fig-field class="fig-fill-picker-gradient-stop-row" direction="horizontal" data-index="${J}">
349
403
  <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${$.position}" units="%"></fig-input-number>
350
404
  <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${$.color}"></fig-input-color>
351
405
  <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#j.stops.length<=2?"disabled":""}>
352
406
  <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
353
407
  </fig-button>
354
- </div>
355
- `).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{const J=parseInt($.dataset.index);$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(j)=>{this.#j.stops[J].position=parseFloat(j.target.value)||0,this.#y(),this.#S()});const Z=$.querySelector(".fig-fill-picker-stop-color"),_=Z.querySelector("fig-fill-picker");if(_)_.anchorElement=this.#$;else requestAnimationFrame(()=>{const j=Z.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#$});Z.addEventListener("input",(j)=>{this.#j.stops[J].color=j.target.hexOpaque||j.target.value;const K=parseFloat(j.target.alpha);this.#j.stops[J].opacity=isNaN(K)?100:K,this.#y(),this.#S()}),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#j.stops.length>2)this.#j.stops.splice(J,1),this.#f(),this.#S()})})}#v(){const Q=this.#j.stops.map(($)=>{return`${this.#a($.color,$.opacity/100)} ${$.position}%`}).join(", ");switch(this.#j.type){case"linear":return`linear-gradient(${this.#j.angle}deg, ${Q})`;case"radial":return`radial-gradient(circle at ${this.#j.centerX}% ${this.#j.centerY}%, ${Q})`;case"angular":return`conic-gradient(from ${this.#j.angle}deg, ${Q})`;default:return`linear-gradient(${this.#j.angle}deg, ${Q})`}}#m(){const Q=this.#$.querySelector('[data-tab="image"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
356
- <div class="fig-fill-picker-media-header">
408
+ </fig-field>
409
+ `).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{const J=parseInt($.dataset.index);$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(_)=>{this.#j.stops[J].position=parseFloat(_.target.value)||0,this.#h(),this.#C()});const Z=$.querySelector(".fig-fill-picker-stop-color"),j=Z.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#$;else requestAnimationFrame(()=>{const _=Z.querySelector("fig-fill-picker");if(_)_.anchorElement=this.#$});Z.addEventListener("input",(_)=>{this.#j.stops[J].color=_.target.hexOpaque||_.target.value;const K=parseFloat(_.target.alpha);this.#j.stops[J].opacity=isNaN(K)?100:K,this.#h(),this.#C()}),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#j.stops.length>2)this.#j.stops.splice(J,1),this.#v(),this.#C()})})}#s(Q,$=!0){const J=S({...this.#j,interpolationSpace:Q??this.#j.interpolationSpace}),Z=this.#K==="display-p3",j=J.stops.map((K)=>{return`${Z?this.#J0(K.color,K.opacity/100):this.#$0(K.color,K.opacity/100)} ${K.position}%`}).join(", "),_=$?` ${d0(J)}`:"";switch(J.type){case"linear":return`linear-gradient(${J.angle}deg${_}, ${j})`;case"radial":return`radial-gradient(circle at ${J.centerX}% ${J.centerY}%${_}, ${j})`;case"angular":return`conic-gradient(from ${J.angle}deg${_}, ${j})`;default:return`linear-gradient(${J.angle}deg${_}, ${j})`}}#Z0(Q){const $=document.createElement("div");return $.style.background=Q,!!$.style.background}#l(){const Q=this.#s(void 0,!0);if(this.#Z0(Q))return Q;const $=this.#s("oklab",!0);if(this.#Z0($))return $;return this.#s("oklab",!1)}#g(){const Q=this.#$.querySelector('[data-tab="image"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
410
+ <fig-field class="fig-fill-picker-media-header" direction="horizontal">
357
411
  <fig-dropdown class="fig-fill-picker-scale-mode" ${J} value="${this.#X.scaleMode}">
358
412
  <option value="fill" selected>Fill</option>
359
413
  <option value="fit">Fit</option>
@@ -361,7 +415,7 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
361
415
  <option value="tile">Tile</option>
362
416
  </fig-dropdown>
363
417
  <fig-input-number class="fig-fill-picker-scale" min="1" max="200" value="${this.#X.scale}" units="%" style="display: none;"></fig-input-number>
364
- </div>
418
+ </fig-field>
365
419
  <div class="fig-fill-picker-media-preview">
366
420
  <div class="fig-fill-picker-checkerboard"></div>
367
421
  <div class="fig-fill-picker-image-preview"></div>
@@ -370,14 +424,14 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
370
424
  <input type="file" accept="image/*" style="display: none;" />
371
425
  </fig-button>
372
426
  </div>
373
- `,this.#u(Q)}#u(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-scale"),Z=Q.querySelector(".fig-fill-picker-upload"),_=Q.querySelector('input[type="file"]'),j=Q.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(q)=>{this.#X.scaleMode=q.target.value,J.style.display=q.target.value==="tile"?"block":"none",this.#x(j),this.#D(),this.#S()}),J.addEventListener("input",(q)=>{this.#X.scale=parseFloat(q.target.value)||100,this.#x(j),this.#D(),this.#S()}),Z.addEventListener("click",()=>{_.click()}),_.addEventListener("change",(q)=>{const X=q.target.files[0];if(X){const W=new FileReader;W.onload=(L)=>{this.#X.url=L.target.result,this.#x(j),this.#D(),this.#S()},W.readAsDataURL(X)}});const K=Q.querySelector(".fig-fill-picker-media-preview");K.addEventListener("dragover",(q)=>{q.preventDefault(),K.classList.add("dragover")}),K.addEventListener("dragleave",()=>{K.classList.remove("dragover")}),K.addEventListener("drop",(q)=>{q.preventDefault(),K.classList.remove("dragover");const X=q.dataTransfer.files[0];if(X&&X.type.startsWith("image/")){const W=new FileReader;W.onload=(L)=>{this.#X.url=L.target.result,this.#x(j),this.#D(),this.#S()},W.readAsDataURL(X)}})}#x(Q){const $=Q.closest(".fig-fill-picker-media-preview");if(!this.#X.url){Q.style.display="none",$?.classList.remove("has-media");return}switch(Q.style.display="block",$?.classList.add("has-media"),Q.style.backgroundImage=`url(${this.#X.url})`,Q.style.backgroundPosition="center",this.#X.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.#X.scale}%`,Q.style.backgroundRepeat="repeat",Q.style.backgroundPosition="top left";break}}#d(Q){switch(Q.style.objectPosition="center",Q.style.width="100%",Q.style.height="100%",this.#q.scaleMode){case"fill":case"crop":Q.style.objectFit="cover";break;case"fit":Q.style.objectFit="contain";break}}#o(){const Q=this.#$.querySelector('[data-tab="video"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
374
- <div class="fig-fill-picker-media-header">
375
- <fig-dropdown class="fig-fill-picker-scale-mode" ${J} value="${this.#q.scaleMode}">
427
+ `,this.#w(Q)}#w(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-scale"),Z=Q.querySelector(".fig-fill-picker-upload"),j=Q.querySelector('input[type="file"]'),_=Q.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(q)=>{this.#X.scaleMode=q.target.value,J.style.display=q.target.value==="tile"?"block":"none",this.#t(_),this.#F(),this.#C()}),J.addEventListener("input",(q)=>{this.#X.scale=parseFloat(q.target.value)||100,this.#t(_),this.#F(),this.#C()}),Z.addEventListener("click",()=>{j.click()}),j.addEventListener("change",(q)=>{const X=q.target.files[0];if(X){const W=new FileReader;W.onload=(Y)=>{this.#X.url=Y.target.result,this.#t(_),this.#F(),this.#C()},W.readAsDataURL(X)}});const K=Q.querySelector(".fig-fill-picker-media-preview");K.addEventListener("dragover",(q)=>{q.preventDefault(),K.classList.add("dragover")}),K.addEventListener("dragleave",()=>{K.classList.remove("dragover")}),K.addEventListener("drop",(q)=>{q.preventDefault(),K.classList.remove("dragover");const X=q.dataTransfer.files[0];if(X&&X.type.startsWith("image/")){const W=new FileReader;W.onload=(Y)=>{this.#X.url=Y.target.result,this.#t(_),this.#F(),this.#C()},W.readAsDataURL(X)}})}#t(Q){const $=Q.closest(".fig-fill-picker-media-preview");if(!this.#X.url){Q.style.display="none",$?.classList.remove("has-media");return}switch(Q.style.display="block",$?.classList.add("has-media"),Q.style.backgroundImage=`url(${this.#X.url})`,Q.style.backgroundPosition="center",this.#X.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.#X.scale}%`,Q.style.backgroundRepeat="repeat",Q.style.backgroundPosition="top left";break}}#e(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}}#_0(){const Q=this.#$.querySelector('[data-tab="video"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
428
+ <fig-field class="fig-fill-picker-media-header" direction="horizontal">
429
+ <fig-dropdown class="fig-fill-picker-scale-mode" ${J} value="${this.#Y.scaleMode}">
376
430
  <option value="fill" selected>Fill</option>
377
431
  <option value="fit">Fit</option>
378
432
  <option value="crop">Crop</option>
379
433
  </fig-dropdown>
380
- </div>
434
+ </fig-field>
381
435
  <div class="fig-fill-picker-media-preview">
382
436
  <div class="fig-fill-picker-checkerboard"></div>
383
437
  <video class="fig-fill-picker-video-preview" style="display: none;" muted loop></video>
@@ -386,7 +440,7 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
386
440
  <input type="file" accept="video/*" style="display: none;" />
387
441
  </fig-button>
388
442
  </div>
389
- `,this.#l(Q)}#l(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-upload"),Z=Q.querySelector('input[type="file"]'),_=Q.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(K)=>{this.#q.scaleMode=K.target.value,this.#d(_),this.#D(),this.#S()}),J.addEventListener("click",()=>{Z.click()});const j=Q.querySelector(".fig-fill-picker-media-preview");Z.addEventListener("change",(K)=>{const q=K.target.files[0];if(q)this.#q.url=URL.createObjectURL(q),_.src=this.#q.url,_.style.display="block",_.play(),j.classList.add("has-media"),this.#d(_),this.#D(),this.#S()}),j.addEventListener("dragover",(K)=>{K.preventDefault(),j.classList.add("dragover")}),j.addEventListener("dragleave",()=>{j.classList.remove("dragover")}),j.addEventListener("drop",(K)=>{K.preventDefault(),j.classList.remove("dragover");const q=K.dataTransfer.files[0];if(q&&q.type.startsWith("video/"))this.#q.url=URL.createObjectURL(q),_.src=this.#q.url,_.style.display="block",_.play(),j.classList.add("has-media"),this.#d(_),this.#D(),this.#S()})}#c(){const Q=this.#$.querySelector('[data-tab="webcam"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
443
+ `,this.#Q0(Q)}#Q0(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-upload"),Z=Q.querySelector('input[type="file"]'),j=Q.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(K)=>{this.#Y.scaleMode=K.target.value,this.#e(j),this.#F(),this.#C()}),J.addEventListener("click",()=>{Z.click()});const _=Q.querySelector(".fig-fill-picker-media-preview");Z.addEventListener("change",(K)=>{const q=K.target.files[0];if(q)this.#Y.url=URL.createObjectURL(q),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#e(j),this.#F(),this.#C()}),_.addEventListener("dragover",(K)=>{K.preventDefault(),_.classList.add("dragover")}),_.addEventListener("dragleave",()=>{_.classList.remove("dragover")}),_.addEventListener("drop",(K)=>{K.preventDefault(),_.classList.remove("dragover");const q=K.dataTransfer.files[0];if(q&&q.type.startsWith("video/"))this.#Y.url=URL.createObjectURL(q),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#e(j),this.#F(),this.#C()})}#n(){const Q=this.#$.querySelector('[data-tab="webcam"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
390
444
  <div class="fig-fill-picker-webcam-preview">
391
445
  <div class="fig-fill-picker-checkerboard"></div>
392
446
  <video class="fig-fill-picker-webcam-video" autoplay muted playsinline></video>
@@ -394,11 +448,14 @@ var x0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var V0={};var l=x0(()=>{/*! Vendored from @u
394
448
  <span>Camera access required</span>
395
449
  </div>
396
450
  </div>
397
- <div class="fig-fill-picker-webcam-controls">
451
+ <fig-field class="fig-fill-picker-webcam-controls" direction="horizontal">
398
452
  <fig-dropdown class="fig-fill-picker-camera-select" ${J} style="display: none;">
399
453
  </fig-dropdown>
400
454
  <fig-button class="fig-fill-picker-webcam-capture" variant="primary">
401
455
  Capture
402
456
  </fig-button>
403
- </div>
404
- `,this.#p(Q)}#p(Q){const $=Q.querySelector(".fig-fill-picker-webcam-video"),J=Q.querySelector(".fig-fill-picker-webcam-status"),Z=Q.querySelector(".fig-fill-picker-webcam-capture"),_=Q.querySelector(".fig-fill-picker-camera-select"),j=async(q=null)=>{try{const X={video:q?{deviceId:{exact:q}}:!0};if(this.#G.stream)this.#G.stream.getTracks().forEach((U)=>U.stop());this.#G.stream=await navigator.mediaDevices.getUserMedia(X),$.srcObject=this.#G.stream,$.style.display="block",J.style.display="none";const L=(await navigator.mediaDevices.enumerateDevices()).filter((U)=>U.kind==="videoinput");if(L.length>1)_.style.display="block",_.innerHTML=L.map((U,G)=>`<option value="${U.deviceId}">${U.label||`Camera ${G+1}`}</option>`).join("")}catch(X){console.error("Webcam error:",X.name,X.message);let W="Camera access denied";if(X.name==="NotAllowedError")W="Camera permission denied";else if(X.name==="NotFoundError")W="No camera found";else if(X.name==="NotReadableError")W="Camera in use by another app";else if(X.name==="OverconstrainedError")W="Camera constraints not supported";else if(!window.isSecureContext)W="Camera requires secure context";J.innerHTML=`<span>${W}</span>`,J.style.display="flex",$.style.display="none"}};new MutationObserver(()=>{if(Q.style.display!=="none"&&!this.#G.stream)j()}).observe(Q,{attributes:!0,attributeFilter:["style"]}),_.addEventListener("change",(q)=>{j(q.target.value)}),Z.addEventListener("click",()=>{if(!this.#G.stream)return;const q=document.createElement("canvas");q.width=$.videoWidth,q.height=$.videoHeight,q.getContext("2d").drawImage($,0,0),this.#G.snapshot=q.toDataURL("image/png"),this.#X.url=this.#G.snapshot,this.#K="image",this.#D(),this.#S(),this.#P("image");const X=this.#$.querySelector("fig-tabs");X.value="image"})}#t(Q){const $=Q.h/360,J=Q.s/100,Z=Q.v/100;let _,j,K;const q=Math.floor($*6),X=$*6-q,W=Z*(1-J),L=Z*(1-X*J),U=Z*(1-(1-X)*J);switch(q%6){case 0:_=Z,j=U,K=W;break;case 1:_=L,j=Z,K=W;break;case 2:_=W,j=Z,K=U;break;case 3:_=W,j=L,K=Z;break;case 4:_=U,j=W,K=Z;break;case 5:_=Z,j=W,K=L;break}return{r:Math.round(_*255),g:Math.round(j*255),b:Math.round(K*255)}}#r(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,_=Math.max($,J,Z),j=Math.min($,J,Z),K=_-j;let q=0;const X=_===0?0:K/_,W=_;if(_!==j){switch(_){case $:q=(J-Z)/K+(J<Z?6:0);break;case J:q=(Z-$)/K+2;break;case Z:q=($-J)/K+4;break}q/=6}return{h:q*360,s:X*100,v:W*100,a:1}}#I(Q){if(!Q||typeof Q.h!=="number"||typeof Q.s!=="number"||typeof Q.v!=="number")return"#D9D9D9";const $=this.#t(Q),J=(Z)=>{return(isNaN(Z)?217:Math.max(0,Math.min(255,Math.round(Z)))).toString(16).padStart(2,"0")};return`#${J($.r)}${J($.g)}${J($.b)}`}#V(Q){const $=parseInt(Q.slice(1,3),16),J=parseInt(Q.slice(3,5),16),Z=parseInt(Q.slice(5,7),16);return this.#r({r:$,g:J,b:Z})}#a(Q,$=1){const J=parseInt(Q.slice(1,3),16),Z=parseInt(Q.slice(3,5),16),_=parseInt(Q.slice(5,7),16);return`rgba(${J}, ${Z}, ${_}, ${$})`}#Q0(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,_=Math.max($,J,Z),j=Math.min($,J,Z);let K,q;const X=(_+j)/2;if(_===j)K=q=0;else{const W=_-j;switch(q=X>0.5?W/(2-_-j):W/(_+j),_){case $:K=((J-Z)/W+(J<Z?6:0))/6;break;case J:K=((Z-$)/W+2)/6;break;case Z:K=(($-J)/W+4)/6;break}}return{h:K*360,s:q*100,l:X*100}}#$0(Q){const $=Q.h/360,J=Q.s/100,Z=Q.l/100;let _,j,K;if(J===0)_=j=K=Z;else{const q=(L,U,G)=>{if(G<0)G+=1;if(G>1)G-=1;if(G<0.16666666666666666)return L+(U-L)*6*G;if(G<0.5)return U;if(G<0.6666666666666666)return L+(U-L)*(0.6666666666666666-G)*6;return L},X=Z<0.5?Z*(1+J):Z+J-Z*J,W=2*Z-X;_=q(W,X,$+0.3333333333333333),j=q(W,X,$),K=q(W,X,$-0.3333333333333333)}return{r:Math.round(_*255),g:Math.round(j*255),b:Math.round(K*255)}}#s(Q){const $=(U)=>{return U=U/255,U<=0.04045?U/12.92:Math.pow((U+0.055)/1.055,2.4)},J=$(Q.r),Z=$(Q.g),_=$(Q.b),j=0.4122214708*J+0.5363325363*Z+0.0514459929*_,K=0.2119034982*J+0.6806995451*Z+0.1073969566*_,q=0.0883024619*J+0.2817188376*Z+0.6299787005*_,X=Math.cbrt(j),W=Math.cbrt(K),L=Math.cbrt(q);return{l:0.2104542553*X+0.793617785*W-0.0040720468*L,a:1.9779984951*X-2.428592205*W+0.4505937099*L,b:0.0259040371*X+0.7827717662*W-0.808675766*L}}#i(Q){const $=this.#s(Q);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#S(){this.#D(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#w(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){const Q={type:this.#K};switch(this.#K){case"solid":return{...Q,color:this.#I(this.#Z),alpha:this.#Z.a,hsv:{...this.#Z}};case"gradient":return{...Q,gradient:{...this.#j},css:this.#v()};case"image":return{...Q,image:{...this.#X}};case"video":return{...Q,video:{...this.#q}};case"webcam":return{...Q,image:{url:this.#G.snapshot,scaleMode:"fill",scale:50}};default:return{...Q,...this.#L[this.#K]}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#k(),this.#D(),this.#$){if(!this.#N){if(this.#R(),this.#C(),this.#B)this.#B.setAttribute("value",this.#Z.h);if(this.#O)this.#O.setAttribute("value",this.#Z.a*100),this.#O.setAttribute("color",this.#I(this.#Z))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",H0);class T0 extends HTMLElement{static get observedAttributes(){return["selected","disabled"]}connectedCallback(){if(this.setAttribute("role","option"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false"),this.hasAttribute("disabled"))this.setAttribute("aria-disabled","true")}attributeChangedCallback(Q){if(Q==="selected")this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false");if(Q==="disabled")if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")}}customElements.define("fig-choice",T0);class z0 extends HTMLElement{#Q=null;#J=this.#O.bind(this);#$=this.#N.bind(this);#_=this.#k.bind(this);#K=null;#Z=null;#j=null;#X=null;#q=null;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","drag","overflow","loop"]}get#G(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#Y(){const Q=this.getAttribute("drag");return Q===null||Q!=="false"}get#L(){return this.getAttribute("choice-element")||"fig-choice"}get choices(){return Array.from(this.querySelectorAll(this.#L))}get selectedChoice(){return this.#Q}set selectedChoice(Q){if(Q&&!this.contains(Q))return;const $=this.choices;for(let Z of $){const _=Z===Q,j=Z.hasAttribute("selected");if(_&&!j)Z.setAttribute("selected","");else if(!_&&j)Z.removeAttribute("selected")}this.#Q=Q;const J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#R(Q)}get value(){return this.#Q?.getAttribute("value")??""}set value(Q){if(Q===null||Q===void 0||Q==="")return;this.setAttribute("value",String(Q))}connectedCallback(){this.setAttribute("role","listbox"),this.addEventListener("click",this.#J),this.addEventListener("keydown",this.#$),this.addEventListener("scroll",this.#_),this.#A(),this.#E(),this.#F(),this.#D(),requestAnimationFrame(()=>{this.#W(),this.#k()})}disconnectedCallback(){this.removeEventListener("click",this.#J),this.removeEventListener("keydown",this.#$),this.removeEventListener("scroll",this.#_),this.#T(),this.#K?.disconnect(),this.#K=null,this.#Z?.disconnect(),this.#Z=null,this.#P()}attributeChangedCallback(Q,$,J){if(Q==="value"&&J!==$&&J)this.#U(J);if(Q==="disabled"){const Z=J!==null&&J!=="false",_=this.choices;for(let j of _)if(Z)j.setAttribute("aria-disabled","true"),j.setAttribute("tabindex","-1");else j.removeAttribute("aria-disabled"),j.setAttribute("tabindex","0")}if(Q==="choice-element")requestAnimationFrame(()=>this.#W());if(Q==="drag")if(this.#Y)this.#E();else this.#T();if(Q==="overflow")this.#A()}#W(){const Q=this.choices;if(!Q.length){this.#Q=null;return}const $=this.getAttribute("value");if($&&this.#U($))return;const J=Q.find((Z)=>Z.hasAttribute("selected"));if(J){this.selectedChoice=J;return}this.selectedChoice=Q[0]}#U(Q){const $=this.choices;for(let J of $)if(J.getAttribute("value")===Q)return this.selectedChoice=J,!0;return!1}#B(Q){const $=this.#L;let J=Q;while(J&&J!==this){if(J.matches($))return J;J=J.parentElement}return null}#O(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.#B(Q.target);if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.selectedChoice=$,this.#M()}#N(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.choices.filter((j)=>!j.hasAttribute("disabled")||j.getAttribute("disabled")==="false");if(!$.length)return;const J=$.indexOf(this.#Q);let Z=J;const _=this.hasAttribute("loop");switch(Q.key){case"ArrowDown":case"ArrowRight":if(Q.preventDefault(),J<$.length-1)Z=J+1;else if(_)Z=0;break;case"ArrowUp":case"ArrowLeft":if(Q.preventDefault(),J>0)Z=J-1;else if(_)Z=$.length-1;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;case"Enter":case" ":if(Q.preventDefault(),document.activeElement?.matches(this.#L)){const j=this.#B(document.activeElement);if(j&&j!==this.#Q)this.selectedChoice=j,this.#M()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#M()}#M(){const Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#k(){if(this.#G==="scrollbar")return;const Q=this.getAttribute("layout")==="horizontal",$=2;if(Q){const J=this.scrollLeft<=$,Z=this.scrollLeft+this.clientWidth>=this.scrollWidth-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}else{const J=this.scrollTop<=$,Z=this.scrollTop+this.clientHeight>=this.scrollHeight-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}}#D(){this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>{this.#k()}),this.#Z.observe(this)}#E(){if(this.#q?.bound)return;if(!this.#Y)return;const Q=(j)=>{if(j.button!==0)return;if(!(this.getAttribute("layout")==="horizontal"?this.scrollWidth>this.clientWidth:this.scrollHeight>this.clientHeight))return;this.#q.active=!0,this.#q.didDrag=!1,this.#q.startX=j.clientX,this.#q.startY=j.clientY,this.#q.scrollLeft=this.scrollLeft,this.#q.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},$=(j)=>{if(!this.#q.active)return;const K=this.getAttribute("layout")==="horizontal",q=j.clientX-this.#q.startX,X=j.clientY-this.#q.startY;if(!this.#q.didDrag&&Math.abs(K?q:X)>3)this.#q.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(j.pointerId);if(!this.#q.didDrag)return;if(K)this.scrollLeft=this.#q.scrollLeft-q;else this.scrollTop=this.#q.scrollTop-X},J=(j)=>{if(!this.#q.active)return;const K=this.#q.didDrag;if(this.#q.active=!1,this.#q.didDrag=!1,this.style.cursor="",this.style.userSelect="",j.pointerId!==void 0)try{this.releasePointerCapture(j.pointerId)}catch{}if(K)j.preventDefault(),j.stopPropagation()},Z=(j)=>{if(this.#q?.suppressClick)j.stopPropagation(),j.preventDefault(),this.#q.suppressClick=!1},_=(j)=>{if(this.#q?.didDrag)this.#q.suppressClick=!0,setTimeout(()=>{if(this.#q)this.#q.suppressClick=!1},0)};this.#q={active:!1,didDrag:!1,suppressClick:!1,startX:0,startY:0,scrollLeft:0,scrollTop:0,bound:!0,onPointerDown:Q,onPointerMove:$,onPointerUp:J,onClick:Z,onPointerUpCapture:_},this.addEventListener("pointerdown",Q),window.addEventListener("pointermove",$),window.addEventListener("pointerup",J),this.addEventListener("pointerup",_,!0),this.addEventListener("click",Z,!0)}#T(){if(!this.#q?.bound)return;this.removeEventListener("pointerdown",this.#q.onPointerDown),window.removeEventListener("pointermove",this.#q.onPointerMove),window.removeEventListener("pointerup",this.#q.onPointerUp),this.removeEventListener("pointerup",this.#q.onPointerUpCapture,!0),this.removeEventListener("click",this.#q.onClick,!0),this.style.cursor="",this.style.userSelect="",this.#q=null}#A(){if(this.#G==="scrollbar")this.#P();else this.#z()}#P(){this.#j?.remove(),this.#X?.remove(),this.#j=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}#z(){if(this.#j)return;this.#j=document.createElement("button"),this.#j.className="fig-chooser-nav-start",this.#j.setAttribute("tabindex","-1"),this.#j.setAttribute("aria-label","Scroll back"),this.#X=document.createElement("button"),this.#X.className="fig-chooser-nav-end",this.#X.setAttribute("tabindex","-1"),this.#X.setAttribute("aria-label","Scroll forward"),this.#j.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#H(-1)}),this.#X.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#H(1)}),this.prepend(this.#j),this.append(this.#X)}#H(Q){const $=this.getAttribute("layout")==="horizontal",Z=($?this.clientWidth:this.clientHeight)*0.8*Q;this.scrollBy({[$?"left":"top"]:Z,behavior:"smooth"})}#R(Q){if(!Q)return;requestAnimationFrame(()=>{const $=this.scrollHeight>this.clientHeight,J=this.scrollWidth>this.clientWidth;if(!J&&!$)return;const Z={behavior:"smooth"};if($){const _=Q.offsetTop-this.clientHeight/2+Q.offsetHeight/2;Z.top=_}if(J){const _=Q.offsetLeft-this.clientWidth/2+Q.offsetWidth/2;Z.left=_}this.scrollTo(Z)})}#F(){this.#K?.disconnect(),this.#K=new MutationObserver(()=>{const Q=this.choices;if(this.#Q&&!Q.includes(this.#Q))this.#Q=null,this.#W();else if(!this.#Q&&Q.length)this.#W()}),this.#K.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",z0);class C0 extends HTMLElement{constructor(){super()}}customElements.define("fig-handle",C0);
457
+ </fig-field>
458
+ `,this.#K0(Q)}#K0(Q){const $=Q.querySelector(".fig-fill-picker-webcam-video"),J=Q.querySelector(".fig-fill-picker-webcam-status"),Z=Q.querySelector(".fig-fill-picker-webcam-capture"),j=Q.querySelector(".fig-fill-picker-camera-select"),_=async(q=null)=>{try{const X={video:q?{deviceId:{exact:q}}:!0};if(this.#G.stream)this.#G.stream.getTracks().forEach((U)=>U.stop());this.#G.stream=await navigator.mediaDevices.getUserMedia(X),$.srcObject=this.#G.stream,$.style.display="block",J.style.display="none";const Y=(await navigator.mediaDevices.enumerateDevices()).filter((U)=>U.kind==="videoinput");if(Y.length>1)j.style.display="block",j.innerHTML=Y.map((U,L)=>`<option value="${U.deviceId}">${U.label||`Camera ${L+1}`}</option>`).join("")}catch(X){console.error("Webcam error:",X.name,X.message);let W="Camera access denied";if(X.name==="NotAllowedError")W="Camera permission denied";else if(X.name==="NotFoundError")W="No camera found";else if(X.name==="NotReadableError")W="Camera in use by another app";else if(X.name==="OverconstrainedError")W="Camera constraints not supported";else if(!window.isSecureContext)W="Camera requires secure context";J.innerHTML=`<span>${W}</span>`,J.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",(q)=>{_(q.target.value)}),Z.addEventListener("click",()=>{if(!this.#G.stream)return;const q=document.createElement("canvas");q.width=$.videoWidth,q.height=$.videoHeight,q.getContext("2d").drawImage($,0,0),this.#G.snapshot=q.toDataURL("image/png"),this.#X.url=this.#G.snapshot,this.#q="image",this.#F(),this.#C(),this.#T("image");const X=this.#$.querySelector("fig-tabs");X.value="image"})}#m(Q){const $=Q.h/360,J=Q.s/100,Z=Q.v/100;let j,_,K;const q=Math.floor($*6),X=$*6-q,W=Z*(1-J),Y=Z*(1-X*J),U=Z*(1-(1-X)*J);switch(q%6){case 0:j=Z,_=U,K=W;break;case 1:j=Y,_=Z,K=W;break;case 2:j=W,_=Z,K=U;break;case 3:j=W,_=Y,K=Z;break;case 4:j=U,_=W,K=Z;break;case 5:j=Z,_=W,K=Y;break}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(K*255)}}#i(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),_=Math.min($,J,Z),K=j-_;let q=0;const X=j===0?0:K/j,W=j;if(j!==_){switch(j){case $:q=(J-Z)/K+(J<Z?6:0);break;case J:q=(Z-$)/K+2;break;case Z:q=($-J)/K+4;break}q/=6}return{h:q*360,s:X*100,v:W*100,a:1}}#b(Q){if(!Q||typeof Q.h!=="number"||typeof Q.s!=="number"||typeof Q.v!=="number")return"#D9D9D9";const $=this.#m(Q),J=(Z)=>{return(isNaN(Z)?217:Math.max(0,Math.min(255,Math.round(Z)))).toString(16).padStart(2,"0")};return`#${J($.r)}${J($.g)}${J($.b)}`}#a(Q){const $=parseInt(Q.slice(1,3),16),J=parseInt(Q.slice(3,5),16),Z=parseInt(Q.slice(5,7),16);return this.#i({r:$,g:J,b:Z})}#$0(Q,$=1){const J=parseInt(Q.slice(1,3),16),Z=parseInt(Q.slice(3,5),16),j=parseInt(Q.slice(5,7),16);return`rgba(${J}, ${Z}, ${j}, ${$})`}#J0(Q,$=1){const J=+(parseInt(Q.slice(1,3),16)/255).toFixed(4),Z=+(parseInt(Q.slice(3,5),16)/255).toFixed(4),j=+(parseInt(Q.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${J} ${Z} ${j} / ${$})`}#X0(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),_=Math.min($,J,Z);let K,q;const X=(j+_)/2;if(j===_)K=q=0;else{const W=j-_;switch(q=X>0.5?W/(2-j-_):W/(j+_),j){case $:K=((J-Z)/W+(J<Z?6:0))/6;break;case J:K=((Z-$)/W+2)/6;break;case Z:K=(($-J)/W+4)/6;break}}return{h:K*360,s:q*100,l:X*100}}#Y0(Q){const $=Q.h/360,J=Q.s/100,Z=Q.l/100;let j,_,K;if(J===0)j=_=K=Z;else{const q=(Y,U,L)=>{if(L<0)L+=1;if(L>1)L-=1;if(L<0.16666666666666666)return Y+(U-Y)*6*L;if(L<0.5)return U;if(L<0.6666666666666666)return Y+(U-Y)*(0.6666666666666666-L)*6;return Y},X=Z<0.5?Z*(1+J):Z+J-Z*J,W=2*Z-X;j=q(W,X,$+0.3333333333333333),_=q(W,X,$),K=q(W,X,$-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(K*255)}}#q0(Q){const $=(U)=>{return U=U/255,U<=0.04045?U/12.92:Math.pow((U+0.055)/1.055,2.4)},J=$(Q.r),Z=$(Q.g),j=$(Q.b),_=0.4122214708*J+0.5363325363*Z+0.0514459929*j,K=0.2119034982*J+0.6806995451*Z+0.1073969566*j,q=0.0883024619*J+0.2817188376*Z+0.6299787005*j,X=Math.cbrt(_),W=Math.cbrt(K),Y=Math.cbrt(q);return{l:0.2104542553*X+0.793617785*W-0.0040720468*Y,a:1.9779984951*X-2.428592205*W+0.4505937099*Y,b:0.0259040371*X+0.7827717662*W-0.808675766*Y}}#U0(Q){const $=this.#q0(Q);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#W0(Q){const $=Q.l+0.3963377774*Q.a+0.2158037573*Q.b,J=Q.l-0.1055613458*Q.a-0.0638541728*Q.b,Z=Q.l-0.0894841775*Q.a-1.291485548*Q.b,j=$*$*$,_=J*J*J,K=Z*Z*Z,q=(X)=>{const W=X<=0.0031308?12.92*X:1.055*Math.pow(X,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,W))*255)};return{r:q(4.0767416621*j-3.3077115913*_+0.2309699292*K),g:q(-1.2684380046*j+2.6097574011*_-0.3413193965*K),b:q(-0.0041960863*j-0.7034186147*_+1.707614701*K)}}#G0(Q){const $=Q.h*Math.PI/180;return this.#W0({l:Q.l,a:Q.c*Math.cos($),b:Q.c*Math.sin($)})}#C(){this.#F(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#d(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){const Q={type:this.#q,colorSpace:this.#K};switch(this.#q){case"solid":return{...Q,color:this.#b(this.#_),alpha:this.#_.a,hsv:{...this.#_}};case"gradient":return{...Q,gradient:u(this.#j),css:this.#l()};case"image":return{...Q,image:{...this.#X}};case"video":return{...Q,video:{...this.#Y}};case"webcam":return{...Q,image:{url:this.#G.snapshot,scaleMode:"fill",scale:50}};default:return{...Q,...this.#O[this.#q]}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#k(),this.#F(),this.#$){if(!this.#R){if(this.#S(),this.#x(),this.#N)this.#N.setAttribute("value",this.#_.h);if(this.#B)this.#B.setAttribute("value",this.#_.a*100),this.#B.setAttribute("color",this.#b(this.#_))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",S0);class f0 extends HTMLElement{#Q=null;#J=null;#$=this.#Y.bind(this);#Z=this.#G.bind(this);static get observedAttributes(){return["value","selected","disabled"]}connectedCallback(){this.#K(),this.#j()}disconnectedCallback(){this.#q()}#q(){if(!this.#Q)return;this.#Q.removeEventListener("input",this.#$),this.#Q.removeEventListener("change",this.#Z)}#K(){const Q=this.#W(this.getAttribute("value"));this.innerHTML=`
459
+ <fig-fill-picker mode="solid" alpha="false" value='${JSON.stringify({type:"solid",color:Q})}'>
460
+ <fig-chit background="${Q}"></fig-chit>
461
+ </fig-fill-picker>`,this.#Q=this.querySelector("fig-fill-picker"),this.#J=this.querySelector("fig-chit"),this.#q(),this.#Q?.addEventListener("input",this.#$),this.#Q?.addEventListener("change",this.#Z)}#_(Q){if(!Q)return"#D9D9D9";const $=Q.replace("#","").trim();if($.length===3||$.length===4){const[J,Z,j]=$;return`#${J}${J}${Z}${Z}${j}${j}`.toUpperCase()}if($.length===6||$.length===8)return`#${$.slice(0,6)}`.toUpperCase();return"#D9D9D9"}#W(Q){if(!Q)return"#D9D9D9";const $=String(Q).trim();if($.startsWith("{"))try{const J=JSON.parse($);if(J?.color)return this.#W(J.color)}catch{}if($.startsWith("#"))return this.#_($);try{const J=document.createElement("canvas").getContext("2d");if(!J)return"#D9D9D9";J.fillStyle=$;const Z=J.fillStyle;if(Z.startsWith("#"))return this.#_(Z);const j=Z.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(j){const _=(K)=>Math.max(0,Math.min(255,Number(K))).toString(16).padStart(2,"0");return`#${_(j[1])}${_(j[2])}${_(j[3])}`.toUpperCase()}}catch{}return"#D9D9D9"}#j(){const Q=this.#W(this.getAttribute("value"));if(this.getAttribute("value")!==Q){this.setAttribute("value",Q);return}if(this.#Q)if(this.#Q.setAttribute("value",JSON.stringify({type:"solid",color:Q})),this.hasAttribute("disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(this.#J){if(this.#J.setAttribute("background",Q),this.hasAttribute("selected"))this.#J.setAttribute("selected","");else this.#J.removeAttribute("selected");if(this.hasAttribute("disabled"))this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled")}}#X(Q,$){const J=this.#W(Q?.color),Z=this.#W(this.getAttribute("value"));if(J!==Z)this.setAttribute("value",J);else this.#j();this.dispatchEvent(new CustomEvent($,{bubbles:!0,cancelable:!0,composed:!0,detail:{color:this.value}}))}#Y(Q){Q.stopPropagation(),this.#X(Q.detail,"input")}#G(Q){Q.stopPropagation(),this.#X(Q.detail,"change")}attributeChangedCallback(Q,$,J){if($===J)return;if(!this.isConnected)return;switch(Q){case"value":case"selected":case"disabled":this.#j();break}}get value(){return this.#W(this.getAttribute("value"))}set value(Q){if(Q===null||Q===void 0||Q===""){this.removeAttribute("value");return}this.setAttribute("value",this.#W(Q))}get selected(){return this.hasAttribute("selected")}set selected(Q){this.toggleAttribute("selected",Boolean(Q))}get disabled(){return this.hasAttribute("disabled")}set disabled(Q){this.toggleAttribute("disabled",Boolean(Q))}}customElements.define("fig-color-tip",f0);class I0 extends HTMLElement{static get observedAttributes(){return["selected","disabled"]}connectedCallback(){if(this.setAttribute("role","option"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false"),this.hasAttribute("disabled"))this.setAttribute("aria-disabled","true")}attributeChangedCallback(Q){if(Q==="selected")this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false");if(Q==="disabled")if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")}}customElements.define("fig-choice",I0);class y0 extends HTMLElement{#Q=null;#J=this.#M.bind(this);#$=this.#N.bind(this);#Z=this.#R.bind(this);#q=null;#K=null;#_=null;#W=null;#j=null;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","drag","overflow","loop"]}get#X(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#Y(){const Q=this.getAttribute("drag");return Q===null||Q!=="false"}get#G(){return this.getAttribute("choice-element")||"fig-choice"}get choices(){return Array.from(this.querySelectorAll(this.#G))}get selectedChoice(){return this.#Q}set selectedChoice(Q){if(Q&&!this.contains(Q))return;const $=this.choices;for(let Z of $){const j=Z===Q,_=Z.hasAttribute("selected");if(j&&!_)Z.setAttribute("selected","");else if(!j&&_)Z.removeAttribute("selected")}this.#Q=Q;const J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#T(Q)}get value(){return this.#Q?.getAttribute("value")??""}set value(Q){if(Q===null||Q===void 0||Q==="")return;this.setAttribute("value",String(Q))}connectedCallback(){this.setAttribute("role","listbox"),this.addEventListener("click",this.#J),this.addEventListener("keydown",this.#$),this.addEventListener("scroll",this.#Z),this.#F(),this.#E(),this.#H(),this.#D(),requestAnimationFrame(()=>{this.#U(),this.#R()})}disconnectedCallback(){this.removeEventListener("click",this.#J),this.removeEventListener("keydown",this.#$),this.removeEventListener("scroll",this.#Z),this.#k(),this.#q?.disconnect(),this.#q=null,this.#K?.disconnect(),this.#K=null,this.#z()}attributeChangedCallback(Q,$,J){if(Q==="value"&&J!==$&&J)this.#O(J);if(Q==="disabled"){const Z=J!==null&&J!=="false",j=this.choices;for(let _ of j)if(Z)_.setAttribute("aria-disabled","true"),_.setAttribute("tabindex","-1");else _.removeAttribute("aria-disabled"),_.setAttribute("tabindex","0")}if(Q==="choice-element")requestAnimationFrame(()=>this.#U());if(Q==="drag")if(this.#Y)this.#E();else this.#k();if(Q==="overflow")this.#F()}#U(){const Q=this.choices;if(!Q.length){this.#Q=null;return}const $=this.getAttribute("value");if($&&this.#O($))return;const J=Q.find((Z)=>Z.hasAttribute("selected"));if(J){this.selectedChoice=J;return}this.selectedChoice=Q[0]}#O(Q){const $=this.choices;for(let J of $)if(J.getAttribute("value")===Q)return this.selectedChoice=J,!0;return!1}#L(Q){const $=this.#G;let J=Q;while(J&&J!==this){if(J.matches($))return J;J=J.parentElement}return null}#M(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.#L(Q.target);if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.selectedChoice=$,this.#B()}#N(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.choices.filter((_)=>!_.hasAttribute("disabled")||_.getAttribute("disabled")==="false");if(!$.length)return;const J=$.indexOf(this.#Q);let Z=J;const j=this.hasAttribute("loop");switch(Q.key){case"ArrowDown":case"ArrowRight":if(Q.preventDefault(),J<$.length-1)Z=J+1;else if(j)Z=0;break;case"ArrowUp":case"ArrowLeft":if(Q.preventDefault(),J>0)Z=J-1;else if(j)Z=$.length-1;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;case"Enter":case" ":if(Q.preventDefault(),document.activeElement?.matches(this.#G)){const _=this.#L(document.activeElement);if(_&&_!==this.#Q)this.selectedChoice=_,this.#B()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#B()}#B(){const Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#R(){if(this.#X==="scrollbar")return;const Q=this.getAttribute("layout")==="horizontal",$=2;if(Q){const J=this.scrollLeft<=$,Z=this.scrollLeft+this.clientWidth>=this.scrollWidth-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}else{const J=this.scrollTop<=$,Z=this.scrollTop+this.clientHeight>=this.scrollHeight-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}}#D(){this.#K?.disconnect(),this.#K=new ResizeObserver(()=>{this.#R()}),this.#K.observe(this)}#E(){if(this.#j?.bound)return;if(!this.#Y)return;const Q=(_)=>{if(_.button!==0)return;if(!(this.getAttribute("layout")==="horizontal"?this.scrollWidth>this.clientWidth:this.scrollHeight>this.clientHeight))return;this.#j.active=!0,this.#j.didDrag=!1,this.#j.startX=_.clientX,this.#j.startY=_.clientY,this.#j.scrollLeft=this.scrollLeft,this.#j.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},$=(_)=>{if(!this.#j.active)return;const K=this.getAttribute("layout")==="horizontal",q=_.clientX-this.#j.startX,X=_.clientY-this.#j.startY;if(!this.#j.didDrag&&Math.abs(K?q:X)>3)this.#j.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(_.pointerId);if(!this.#j.didDrag)return;if(K)this.scrollLeft=this.#j.scrollLeft-q;else this.scrollTop=this.#j.scrollTop-X},J=(_)=>{if(!this.#j.active)return;const K=this.#j.didDrag;if(this.#j.active=!1,this.#j.didDrag=!1,this.style.cursor="",this.style.userSelect="",_.pointerId!==void 0)try{this.releasePointerCapture(_.pointerId)}catch{}if(K)_.preventDefault(),_.stopPropagation()},Z=(_)=>{if(this.#j?.suppressClick)_.stopPropagation(),_.preventDefault(),this.#j.suppressClick=!1},j=(_)=>{if(this.#j?.didDrag)this.#j.suppressClick=!0,setTimeout(()=>{if(this.#j)this.#j.suppressClick=!1},0)};this.#j={active:!1,didDrag:!1,suppressClick:!1,startX:0,startY:0,scrollLeft:0,scrollTop:0,bound:!0,onPointerDown:Q,onPointerMove:$,onPointerUp:J,onClick:Z,onPointerUpCapture:j},this.addEventListener("pointerdown",Q),window.addEventListener("pointermove",$),window.addEventListener("pointerup",J),this.addEventListener("pointerup",j,!0),this.addEventListener("click",Z,!0)}#k(){if(!this.#j?.bound)return;this.removeEventListener("pointerdown",this.#j.onPointerDown),window.removeEventListener("pointermove",this.#j.onPointerMove),window.removeEventListener("pointerup",this.#j.onPointerUp),this.removeEventListener("pointerup",this.#j.onPointerUpCapture,!0),this.removeEventListener("click",this.#j.onClick,!0),this.style.cursor="",this.style.userSelect="",this.#j=null}#F(){if(this.#X==="scrollbar")this.#z();else this.#A()}#z(){this.#_?.remove(),this.#W?.remove(),this.#_=null,this.#W=null,this.classList.remove("overflow-start","overflow-end")}#A(){if(this.#_)return;this.#_=document.createElement("button"),this.#_.className="fig-chooser-nav-start",this.#_.setAttribute("tabindex","-1"),this.#_.setAttribute("aria-label","Scroll back"),this.#W=document.createElement("button"),this.#W.className="fig-chooser-nav-end",this.#W.setAttribute("tabindex","-1"),this.#W.setAttribute("aria-label","Scroll forward"),this.#_.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#f(-1)}),this.#W.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#f(1)}),this.prepend(this.#_),this.append(this.#W)}#f(Q){const $=this.getAttribute("layout")==="horizontal",Z=($?this.clientWidth:this.clientHeight)*0.8*Q;this.scrollBy({[$?"left":"top"]:Z,behavior:"smooth"})}#T(Q){if(!Q)return;requestAnimationFrame(()=>{const $=this.scrollHeight>this.clientHeight,J=this.scrollWidth>this.clientWidth;if(!J&&!$)return;const Z={behavior:"smooth"};if($){const j=Q.offsetTop-this.clientHeight/2+Q.offsetHeight/2;Z.top=j}if(J){const j=Q.offsetLeft-this.clientWidth/2+Q.offsetWidth/2;Z.left=j}this.scrollTo(Z)})}#H(){this.#q?.disconnect(),this.#q=new MutationObserver(()=>{const Q=this.choices;if(this.#Q&&!Q.includes(this.#Q))this.#Q=null,this.#U();else if(!this.#Q&&Q.length)this.#U()}),this.#q.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",y0);class x0 extends HTMLElement{static observedAttributes=["color","selected","disabled","drag","drag-surface","drag-axes","drag-snapping","value"];#Q=!1;#J=null;#$=!1;get#Z(){const Q=this.getAttribute("drag");return Q!==null&&Q!=="false"}get#q(){const Q=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:Q.includes("x"),y:Q.includes("y")}}get#K(){const Q=this.getAttribute("drag-snapping");if(Q===null)return"false";const $=Q.trim().toLowerCase();if($==="modifier")return"modifier";if($===""||$==="true")return"true";return"false"}#_(Q){const $=this.#K;if($==="true")return!0;if($==="modifier")return!!Q;return!1}#W(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}#j(Q,$){if(Math.abs(Q-$)<0.1){const Z=(Q+$)/2;return{x:Z,y:Z}}if(Math.abs(1-Q-$)<0.1)return{x:Q,y:1-Q};return{x:Q,y:$}}#X(){const Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){const Q=this.#X();if(!Q)return"0% 0%";const $=Q.getBoundingClientRect(),J=this.offsetWidth/2,Z=this.offsetHeight/2,j=parseFloat(this.style.left)||0,_=parseFloat(this.style.top)||0,K=$.width>0?(j+J)/$.width*100:0,q=$.height>0?(_+Z)/$.height*100:0;return`${Math.round(K)}% ${Math.round(q)}%`}set value(Q){this.setAttribute("value",Q??"0% 0%")}#Y(Q){const $=Q==null?"":String(Q).trim();if(!$)return{xPct:0,yPct:0};const J=$.split(/[\s,]+/).filter(Boolean),Z=(K)=>{if(!K)return 0;const q=K.includes("px"),X=K.includes("%"),W=parseFloat(K.replace(/[%px]/g,""));if(!Number.isFinite(W))return 0;if(q)return{px:W};if(X||Math.abs(W)>1)return Math.max(0,Math.min(100,W));return Math.max(0,Math.min(100,W*100))},j=Z(J[0]),_=Z(J[1]??J[0]);return{xToken:j,yToken:_}}#G(Q){const $=this.#X();if(!$)return;const{xToken:J,yToken:Z}=this.#Y(Q),j=$.getBoundingClientRect(),_=this.offsetWidth/2,K=this.offsetHeight/2,q=(W,Y,U)=>{if(W&&typeof W==="object"&&"px"in W)return Math.max(-U,Math.min(Y-U,W.px-U));const F=(typeof W==="number"?W:0)/100*Y;return Math.max(-U,Math.min(Y-U,F-U))},X=this.#q;if(X.x)this.style.left=`${q(J,j.width,_)}px`;if(X.y)this.style.top=`${q(Z,j.height,K)}px`}#U(){this.#$=!0,this.setAttribute("value",this.value),this.#$=!1}connectedCallback(){this.#M(),this.addEventListener("pointerdown",this.#O),document.addEventListener("pointerdown",this.#L);const Q=this.getAttribute("value");if(Q)this.#G(Q)}disconnectedCallback(){this.#N(),this.removeEventListener("pointerdown",this.#O),document.removeEventListener("pointerdown",this.#L)}#O=(Q)=>{if(Q.stopPropagation(),this.hasAttribute("disabled"))return;this.setAttribute("selected","")};#L=()=>{this.removeAttribute("selected")};attributeChangedCallback(Q,$,J){if(Q==="color")if(!J||J==="false")this.style.removeProperty("--fill");else this.style.setProperty("--fill",J);if(Q==="drag")this.#M();if(Q==="value"&&!this.#$&&!this.#Q)this.#G(J)}#M(){if(this.#Z&&!this.#J)this.#J=(Q)=>this.#B(Q),this.addEventListener("pointerdown",this.#J);else if(!this.#Z&&this.#J)this.#N()}#N(){if(this.#J)this.removeEventListener("pointerdown",this.#J),this.#J=null;this.#Q=!1}#B(Q){if(!this.#Z||this.hasAttribute("disabled"))return;Q.preventDefault();const $=this.#X();if(!$)return;this.#Q=!0;const J=this.#q,Z=$.getBoundingClientRect(),j=this.offsetWidth,_=this.offsetHeight,K=(W,Y,U=!1)=>{const L=$.getBoundingClientRect(),F=parseFloat(this.style.left)||0,N=parseFloat(this.style.top)||0,B=W-L.left-j/2,O=Y-L.top-_/2,H=Math.max(-j/2,Math.min(L.width-j/2,B)),D=Math.max(-_/2,Math.min(L.height-_/2,O));let R=L.width>0?((J.x?H:F)+j/2)/L.width:0.5,E=L.height>0?((J.y?D:N)+_/2)/L.height:0.5;if(this.#_(U)){if(J.x)R=this.#W(R);if(J.y)E=this.#W(E);if(J.x&&J.y){const z=this.#j(R,E);R=z.x,E=z.y}}if(J.x){const z=R*L.width-j/2;this.style.left=`${Math.max(-j/2,Math.min(L.width-j/2,z))}px`}if(J.y){const z=E*L.height-_/2;this.style.top=`${Math.max(-_/2,Math.min(L.height-_/2,z))}px`}};K(Q.clientX,Q.clientY,Q.shiftKey),this.style.cursor="grabbing",this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.#R(Z)}));const q=(W)=>{if(!this.#Q)return;K(W.clientX,W.clientY,W.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.#R($.getBoundingClientRect())}))},X=(W)=>{this.#Q=!1,this.style.cursor="",window.removeEventListener("pointermove",q),window.removeEventListener("pointerup",X),K(W.clientX,W.clientY,W.shiftKey),this.#U(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#R($.getBoundingClientRect())}))};window.addEventListener("pointermove",q),window.addEventListener("pointerup",X)}#R(Q){const $=this.offsetWidth/2,J=this.offsetHeight/2,Z=parseFloat(this.style.left)||0,j=parseFloat(this.style.top)||0,_=Q.width>0?(Z+$)/Q.width:0,K=Q.height>0?(j+J)/Q.height:0;return{x:Z,y:j,px:_,py:K}}}customElements.define("fig-handle",x0);