@rogieking/figui3 6.20.2 → 6.21.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.
- package/README.md +50 -1
- package/components.css +63 -2
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig-editor.js +240 -98
- package/dist/fig-lab.css +1 -1
- package/dist/fig-lab.js +16 -16
- package/dist/fig.css +1 -1
- package/dist/fig.js +60 -43
- package/dist/propskit.css +1 -0
- package/dist/propskit.js +591 -0
- package/fig-editor.css +157 -17
- package/fig-editor.js +457 -187
- package/fig-lab.css +51 -42
- package/fig-lab.js +125 -9
- package/fig.js +519 -16
- package/package.json +33 -4
- package/propskit-core.js +556 -0
- package/propskit.d.ts +98 -0
- package/propskit.js +15 -0
package/dist/propskit.js
ADDED
|
@@ -0,0 +1,591 @@
|
|
|
1
|
+
var W5=(J,Q)=>()=>(J&&(Q=J(J=0)),Q);var L5={};var v0=W5(()=>{/*! Vendored from @ungap/custom-elements-builtin@0.6.5 (ISC). */(function(J,Q,Z){if(J.importNode.length!=1||Q.get("ungap-li"))return;var $="extends";try{var j={};j[$]="li";var _=HTMLLIElement,q=function(){return Reflect.construct(_,[],q)};if(q.prototype=Z.create(_.prototype),Q.define("ungap-li",q,j),!/is="ungap-li"/.test(new q().outerHTML))throw j}catch(X){(function(){var Y="attributeChangedCallback",K="connectedCallback",N="disconnectedCallback",G=Element.prototype,U=Z.assign,W=Z.create,B=Z.defineProperties,L=Z.getOwnPropertyDescriptor,H=Z.setPrototypeOf,F=Q.define,z=Q.get,O=Q.upgrade,T=Q.whenDefined,P=W(null),C=new WeakMap,I={childList:!0,subtree:!0};Reflect.ownKeys(self).filter(function(M){return typeof M=="string"&&/^HTML(?!Element)/.test(M)}).forEach(function(M){function D(){}var k=self[M];H(D,k),(D.prototype=k.prototype).constructor=D,k={},k[M]={value:D},B(self,k)}),new MutationObserver(Q0).observe(J,I),h0(Document.prototype,"importNode"),h0(Node.prototype,"cloneNode"),B(Q,{define:{value:function(M,D,k){if(M=M.toLowerCase(),k&&$ in k){P[M]=U({},k,{Class:D});var x=k[$]+'[is="'+M+'"]',V=J.querySelectorAll(x);for(var w=0,v=V.length;w<v;w++)$0(V[w])}else F.apply(Q,arguments)}},get:{value:function(M){return M in P?P[M].Class:z.call(Q,M)}},upgrade:{value:function(M){var D=F0(M);if(D&&!(M instanceof D.Class))g0(M,D);else O.call(Q,M)}},whenDefined:{value:function(M){return M in P?Promise.resolve():T.call(Q,M)}}});var E=J.createElement;B(J,{createElement:{value:function(M,D){var k=E.call(J,M);if(D&&"is"in D)k.setAttribute("is",D.is),Q.upgrade(k);return k}}});var h=L(G,"attachShadow").value,a=L(G,"innerHTML");B(G,{attachShadow:{value:function(){var M=h.apply(this,arguments);return new MutationObserver(Q0).observe(M,I),M}},innerHTML:{get:a.get,set:function(M){if(a.set.call(this,M),/\bis=("|')?[a-z0-9_-]+\1/i.test(M))K0(this,$0)}}});function Q0(M){for(var D=0,k=M.length;D<k;D++){var x=M[D],V=x.addedNodes,w=x.removedNodes;for(var v=0,G0=V.length;v<G0;v++)$0(V[v]);for(var H0=0,U5=w.length;H0<U5;H0++)z0(w[H0])}}function Z0(M){for(var D=0,k=M.length;D<k;D++){var x=M[D],V=x.attributeName,w=x.oldValue,v=x.target,G0=v.getAttribute(V);if(Y in v&&!(w==G0&&G0==null))v[Y](V,w,v.getAttribute(V),null)}}function z0(M){if(M.nodeType!==1)return;var D=F0(M);if(D&&M instanceof D.Class&&N in M&&C.get(M)!==N)C.set(M,N),Promise.resolve(M).then(N5);K0(M,z0)}function F0(M){var D=M.getAttribute("is");if(D){if(D=D.toLowerCase(),D in P)return P[D]}return null}function G5(M){M[K]()}function N5(M){M[N]()}function g0(M,D){var k=D.Class,x=k.observedAttributes||[];if(H(M,k.prototype),x.length){new MutationObserver(Z0).observe(M,{attributes:!0,attributeFilter:x,attributeOldValue:!0});var V=[];for(var w=0,v=x.length;w<v;w++)V.push({attributeName:x[w],oldValue:null,target:M});Z0(V)}}function $0(M){if(M.nodeType!==1)return;var D=F0(M);if(D){if(!(M instanceof D.Class))g0(M,D);if(K in M&&M.isConnected&&C.get(M)!==K)C.set(M,K),Promise.resolve(M).then(G5)}K0(M,$0)}function K0(M,D){for(var k=M.content,x=(k&&k.nodeType==11?k:M).querySelectorAll("[is]"),V=0,w=x.length;V<w;V++)D(x[V])}function h0(M,D){var k=M[D],x={};x[D]={value:function(){var V=k.apply(this,arguments);switch(V.nodeType){case 1:case 11:K0(V,$0)}return V}},B(M,x)}})()}})(document,customElements,Object)});function B5(){if(typeof navigator>"u")return!1;let J=navigator.userAgent||"",Q=/\b(iPad|iPhone|iPod)\b/.test(J)||/\bMacintosh\b/.test(J)&&/\bMobile\b/.test(J),Z=/\bAppleWebKit\b/.test(J)&&!/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser)\b/.test(J);return Q||Z}function d(J,Q={}){let Z=document.createElement("fig-icon");if(J)Z.setAttribute("name",J);if(Q.size)Z.setAttribute("size",Q.size);if(Q.className)Z.className=Q.className;return Z}function p(J,Q){requestAnimationFrame(()=>{if(J&&!J.isConnected)return;Q()})}function A(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}function U0(J){J.querySelectorAll(':scope > [slot="prepend"], :scope > [slot="append"]').forEach((Q)=>{if(Q.children.length>0){R0(Q);return}let Z=Q.textContent.trim();if(!Z){R0(Q);return}let $=Q.dataset.figInputSlotFullText||"",j=$?Array.from($)[0]?.toUpperCase():"",_=Z===j?$:Z,X=Array.from(Z)[0].toUpperCase();if(Q.textContent!==X)Q.textContent=X;if(_&&_!==X)Q.dataset.figInputSlotFullText=_,Q.setAttribute("aria-label",_),M5(Q);else R0(Q)})}function M5(J){if(J.dataset.figInputSlotTooltipBound==="true")return;J.dataset.figInputSlotTooltipBound="true",J.addEventListener("pointerenter",m0),J.addEventListener("pointerleave",D0),J.addEventListener("focus",m0),J.addEventListener("blur",D0)}function R0(J){D0({currentTarget:J}),delete J.dataset.figInputSlotFullText,J.removeAttribute("aria-label")}function m0(J){let Q=J.currentTarget,Z=Q?.dataset?.figInputSlotFullText;if(!Q||!Z)return;R.show(Q,Z)}function D0(J){let Q=J.currentTarget;if(!Q)return;R.hide(Q)}function d0({owner:J,onStart:Q,onEnd:Z,startClass:$="",endClass:j="",chevronClass:_=""}={}){let q=(X,Y)=>{let K=document.createElement("button");if(K.className=["fig-overflow",`fig-overflow-${X}`,X==="start"?$:j].filter(Boolean).join(" "),K.dataset.figOverflow=X,J)K.setAttribute(`data-fig-${J}-nav`,X);return K.setAttribute("tabindex","-1"),K.setAttribute("aria-label",X==="start"?"Scroll back":"Scroll forward"),K.appendChild(d("chevron",{size:"small",className:["fig-overflow-chevron",_].filter(Boolean).join(" ")})),K.addEventListener("click",(N)=>{N.preventDefault(),N.stopPropagation(),Y?.(N)}),K};return{start:q("start",Q),end:q("end",Z)}}function s0(J,Q,Z="x",$=2){if(!J||!Q)return!1;let j=Z==="x",_=j?Q.scrollWidth:Q.scrollHeight,q=j?Q.clientWidth:Q.clientHeight,X=j?Q.scrollLeft:Q.scrollTop,Y=_-q>$,K=!Y||X<=$,N=!Y||X+q>=_-$;return J.classList.toggle("overflow-start",!K),J.classList.toggle("overflow-end",!N),Y}function A0(J,Q="x",Z=1){if(!J)return;let $=Q==="x",_=($?J.clientWidth:J.clientHeight)*0.8*Z;J.scrollBy({[$?"left":"top"]:_,behavior:"smooth"})}function t(){return typeof customElements<"u"&&!!customElements.get("fig-fill-picker")}function O5(){if(typeof window>"u"||!window.customElements||typeof HTMLButtonElement>"u")return!1;let J=`fig-builtin-probe-${Math.random().toString(36).slice(2)}`;class Q extends HTMLButtonElement{}try{return customElements.define(J,Q,{extends:"button"}),document.createElement("button",{is:J})instanceof Q}catch(Z){return!1}}var i0=B5()&&!O5(),z5=(i0?Promise.resolve().then(() => (v0(),L5)):Promise.resolve()).then(()=>{}).catch((J)=>{throw J});function C0(J,Q,Z){let $=()=>{if(!customElements.get(J))customElements.define(J,Q,Z)};if(!i0){$();return}z5.then($).catch((j)=>{console.error(`[figui3] Failed to load customized built-in polyfill for "${J}".`,j)})}function u(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function N0(J){if(!document.body)return null;let Q="data-figui-overlay-root",Z=document.body.querySelector(`:scope > [${Q}]`);if(!Z)Z=document.createElement("div"),Z.setAttribute(Q,""),document.body.append(Z);return F5(Z,J),Z}function F5(J,Q){if(!J)return;let Z=(Q instanceof Element?Q.closest(".figui-root"):null)||document.querySelector(".figui-root");if(!Z)return;let $=Z.getAttribute("theme"),j=$==="light"||$==="dark"||$==="system"?$:Z.classList.contains("figma-dark")?"dark":Z.classList.contains("figma-light")?"light":"system";if(J.classList.toggle("figma-light",j==="light"),J.classList.toggle("figma-dark",j==="dark"),j==="system")J.style.setProperty("color-scheme","light dark");else J.style.setProperty("color-scheme",j);if($)J.setAttribute("theme",j);else J.removeAttribute("theme")}var H5=1e4;function r0(){return H5++}function m(J,Q,Z){if(Z&&Z.trim())J.style.setProperty(Q,Z.trim());else J.style.removeProperty(Q)}function b(J){return String(J??"").replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">")}var r=null,u0=null;function E0(J=1,Q=1){if(!r)r=document.createElement("canvas"),u0=r.getContext("2d");if(r.width!==J)r.width=J;if(r.height!==Q)r.height=Q;return{canvas:r,ctx:u0}}class o0 extends HTMLElement{type;#Q;#J=["aria-label","aria-labelledby","aria-describedby","title"];#Z=this.#G.bind(this);#$=this.#Y.bind(this);#j=()=>{if(this.button?.matches(":focus-visible"))this.setAttribute("data-focus-visible","")};#X=()=>{this.removeAttribute("data-focus-visible")};constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){if(this.type=this.getAttribute("type")||"button",!this.button){let J=this.type==="select"||this.type==="upload",Q=J?"span":"button",Z=J?"":' type="button"';this.shadowRoot.innerHTML=`
|
|
2
|
+
<style>
|
|
3
|
+
button, button:hover, button:active, .fig-button-control {
|
|
4
|
+
padding: 0 var(--spacer-2);
|
|
5
|
+
appearance: none;
|
|
6
|
+
display: flex;
|
|
7
|
+
border: 0;
|
|
8
|
+
flex: 1;
|
|
9
|
+
text-align: center;
|
|
10
|
+
align-items: stretch;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
font: inherit;
|
|
13
|
+
color: inherit;
|
|
14
|
+
outline: 0;
|
|
15
|
+
place-items: center;
|
|
16
|
+
background: transparent;
|
|
17
|
+
margin: calc(var(--spacer-2)*-1);
|
|
18
|
+
height: var(--spacer-4);
|
|
19
|
+
white-space: nowrap;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
text-overflow: ellipsis;
|
|
22
|
+
width: 100%;
|
|
23
|
+
min-width: 0;
|
|
24
|
+
}
|
|
25
|
+
:host([size="large"]) button,
|
|
26
|
+
:host([size="large"]) .fig-button-control {
|
|
27
|
+
height: var(--spacer-5);
|
|
28
|
+
}
|
|
29
|
+
:host([size="large"][icon]) button,
|
|
30
|
+
:host([size="large"][icon]) .fig-button-control {
|
|
31
|
+
padding: 0;
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
<${Q} class="fig-button-control"${Z}>
|
|
35
|
+
<slot></slot>
|
|
36
|
+
</${Q}>
|
|
37
|
+
`,this.button=this.shadowRoot.querySelector("button, .fig-button-control"),this.button.addEventListener("click",this.#$),this.button.addEventListener("focus",this.#j),this.button.addEventListener("blur",this.#X)}this.removeEventListener("keydown",this.#Z),this.addEventListener("keydown",this.#Z),this.#Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",this.#L()}get type(){return this.getAttribute("type")||"button"}set type(J){this.setAttribute("type",J)}get selected(){return this.#Q}set selected(J){this.setAttribute("selected",J)}#_(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#Y(){if(this.#_())return;if(this.type==="toggle")if(this.selected)this.removeAttribute("selected");else this.setAttribute("selected","");if(this.type==="submit"){let J=this.closest("form");if(J)if(typeof J.requestSubmit==="function")J.requestSubmit();else J.submit()}if(this.type==="link"){let J=this.getAttribute("href"),Q=this.getAttribute("target");if(J)if(Q)window.open(J,Q);else window.location.href=J}}#q(){if(this.type==="select")return this.querySelector("select, fig-dropdown");if(this.type==="upload")return this.querySelector('input[type="file"], input');return null}#K(){let J=this.#q();if(J instanceof HTMLSelectElement)return J;if(J?.tagName==="FIG-DROPDOWN")return J.select||J.querySelector?.("select")||null;return null}#G(J){if(this.type!=="select")return;if(J.key!=="Enter")return;if(J.altKey||J.ctrlKey||J.metaKey||J.shiftKey)return;let Q=this.#K();if(!Q||Q.disabled||Q.multiple)return;if(typeof Q.showPicker!=="function")return;J.preventDefault();try{Q.showPicker()}catch{}}#N(){if(!this.button)return;if(this.type!=="toggle"){this.removeAttribute("aria-pressed"),this.button.removeAttribute("aria-pressed");return}let J=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";this.setAttribute("aria-pressed",J?"true":"false"),this.button.setAttribute("aria-pressed",J?"true":"false")}#U(){if(!this.button)return;if(!(this.button instanceof HTMLButtonElement))return;this.#J.forEach((J)=>{let Q=this.getAttribute(J);if(Q===null)this.button.removeAttribute(J);else this.button.setAttribute(J,Q)})}#L(){if(!this.button)return;let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.disabled=J,this.button instanceof HTMLButtonElement)this.button.disabled=J,this.button.type="button",this.button.setAttribute("type","button");this.#U(),this.#N()}static get observedAttributes(){return["disabled","selected","type","aria-label","aria-labelledby","aria-describedby","title"]}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"type":{let $=(j)=>j==="select"||j==="upload";if($(Q||"button")!==$(Z||"button")){this.button=null,this.connectedCallback();break}this.#L();break}case"disabled":this.#L();break;case"selected":this.#Q=Z!==null&&Z!=="false",this.#N();break;default:this.#U();break}}disconnectedCallback(){this.removeEventListener("keydown",this.#Z)}}customElements.define("fig-button",o0);class l0 extends HTMLElement{#Q="Menu";#J=null;#Z;#$;#j;#X=!1;#_=null;get label(){return this.#Q}set label(J){this.#Q=J}#Y;constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"}),this.#Z=this.#W.bind(this),this.#$=this.#M.bind(this),this.#j=this.#B.bind(this),this.#Y=this.slotChange.bind(this)}#q(){if(typeof CSS>"u"||typeof CSS.supports!=="function")return!1;try{return CSS.supports("appearance: base-select")&&CSS.supports("selector(::picker(select))")}catch{return!1}}#K(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#q()){this.#X=!1;return}let Z=document.createElement("button");Z.setAttribute("type","button"),Z.setAttribute("aria-hidden","true");let $=document.createElement("selectedcontent");Z.appendChild($),this.select.appendChild(Z),this.#X=!0,this.#_=$}#G(){if(!this.#_)return;let J=this.select.selectedOptions?.[0];if(!J){this.#_.textContent="";return}this.#_.replaceChildren(...Array.from(J.childNodes,(Q)=>Q.cloneNode(!0)))}#N(){this.select.addEventListener("input",this.#Z),this.select.addEventListener("change",this.#$),this.select.addEventListener("keydown",this.#j)}#U(J){if(!J||!(J instanceof Element))return!1;return!!J.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#L(){if(typeof this.select.showPicker==="function")requestAnimationFrame(()=>{try{this.select.showPicker()}catch{}})}connectedCallback(){if(this.type=this.getAttribute("type")||"select",this.#Q=this.getAttribute("label")||this.#Q,this.select.setAttribute("aria-label",this.#Q),this.#O(),!this.select.isConnected)this.appendChild(this.select);if(!this.optionsSlot.isConnected)this.shadowRoot.appendChild(this.optionsSlot);this.optionsSlot.removeEventListener("slotchange",this.#Y),this.optionsSlot.addEventListener("slotchange",this.#Y),this.select.removeEventListener("input",this.#Z),this.select.removeEventListener("change",this.#$),this.select.removeEventListener("keydown",this.#j),this.#N()}slotChange(){let J=this.hasAttribute("value"),Q=this.select.options.length>0&&this.select.selectedIndex>=0,Z=J?this.getAttribute("value"):this.type==="dropdown"?this.#J:Q?this.select.value:null;while(this.select.firstChild)this.select.firstChild.remove();if(this.#K(),this.type==="dropdown"){let $=document.createElement("option");$.setAttribute("hidden","true"),$.setAttribute("selected","true"),$.selected=!0,this.select.appendChild($)}if(this.optionsSlot.assignedNodes().forEach(($)=>{if($.nodeName==="OPTION"||$.nodeName==="OPTGROUP")this.select.appendChild($.cloneNode(!0))}),Z!==null)this.#z(Z);if(this.#G(),this.type==="dropdown")this.select.selectedIndex=-1}#W(J){J.stopPropagation();let Q=J.target.selectedOptions?.[0];if(this.#U(Q)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#L();return}let Z=J.target.value;if(this.type==="dropdown")this.#J=Z;this.setAttribute("value",Z),this.#G(),this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,composed:!0}))}#M(J){J.stopPropagation();let Q=J.target.selectedOptions?.[0];if(this.#U(Q)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#L();return}let Z=this.type==="dropdown"?this.#J:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#G(),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,composed:!0}))}#B(J){if(this.closest('fig-button[type="select"]'))return;if(J.key!=="Enter"||J.defaultPrevented)return;if(this.#X&&this.select.matches(":open"))return;if(J.altKey||J.ctrlKey||J.metaKey||J.shiftKey)return;if(this.select.disabled||this.select.multiple)return;if(typeof this.select.showPicker!=="function")return;J.preventDefault();try{this.select.showPicker()}catch{}}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#J;return this.select?.value}set value(J){if(this.type==="dropdown")this.#J=J;this.setAttribute("value",J)}static get observedAttributes(){return["value","type","experimental","label","disabled"]}#O(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.select.disabled=J}#z(J){if(this.type==="dropdown")return;if(this.select)this.select.value=J??"";this.#G()}attributeChangedCallback(J,Q,Z){if(J==="value")this.#z(Z);if(J==="type"){if(this.type=Z||"select",this.isConnected)this.slotChange()}if(J==="experimental")this.slotChange();if(J==="label")this.#Q=Z||"Menu",this.select.setAttribute("aria-label",this.#Q);if(J==="disabled")this.#O()}disconnectedCallback(){this.optionsSlot.removeEventListener("slotchange",this.#Y),this.select.removeEventListener("input",this.#Z),this.select.removeEventListener("change",this.#$),this.select.removeEventListener("keydown",this.#j)}}customElements.define("fig-dropdown",l0);class R extends HTMLElement{static#Q=0;static#J=0;static#Z=1000;static#$=null;static#j=!1;static#X=new Set;#_;#Y;#q;#K;#G;#N;#U;#L;#W;#M;#B=null;#O=null;#z=null;#F;#R=!1;constructor(){super();this.action=this.getAttribute("action")||"hover";let J=parseInt(this.getAttribute("delay"));this.delay=!isNaN(J)?J:500,this.#_=this.#h.bind(this),this.#Y=this.hidePopupOutsideClick.bind(this),this.#q=this.showDelayedPopup.bind(this),this.#K=this.#A.bind(this),this.#G=this.#k.bind(this),this.#N=this.#E.bind(this),this.#U=this.#I.bind(this),this.#L=this.#x.bind(this),this.#M=this.#V.bind(this),this.#W=()=>{clearTimeout(this.timeout),this.destroy(),this.isOpen=!1}}connectedCallback(){if(R.#w(),this.setup(),this.#D(),this.setupEventListeners(),this.#B=this.closest("dialog"),this.#B)this.#B.addEventListener("close",this.#W)}disconnectedCallback(){if(clearTimeout(this.timeout),this.destroy(),this.#C(),this.#P(),document.removeEventListener("mousedown",this.#_,!0),document.removeEventListener("keydown",this.#M,!0),this.#B)this.#B.removeEventListener("close",this.#W),this.#B=null;if(this.action==="click")document.body.removeEventListener("click",this.#Y);if(clearTimeout(this.#F),R.#$===this)R.#$=null}#H(){return this.firstElementChild}#P(){this.#z?.disconnect(),this.#z=null}#D(){if(this.#C(),this.action==="manual")return;let J=this.#H();if(!J){if(!this.#z&&typeof MutationObserver<"u")this.#z=new MutationObserver(()=>{if(this.#H())this.#P(),this.#D()}),this.#z.observe(this,{childList:!0});return}if(this.#O=J,this.action==="hover"){if(!this.isTouchDevice())J.addEventListener("pointerenter",this.#q),J.addEventListener("pointerleave",this.#K);J.addEventListener("touchstart",this.#G,{passive:!0}),J.addEventListener("touchmove",this.#N,{passive:!0}),J.addEventListener("touchend",this.#U,{passive:!0}),J.addEventListener("touchcancel",this.#L,{passive:!0})}else if(this.action==="click")J.addEventListener("click",this.#q),J.addEventListener("touchstart",this.#q,{passive:!0})}#C(){let J=this.#O;if(!J)return;if(this.action==="hover")J.removeEventListener("pointerenter",this.#q),J.removeEventListener("pointerleave",this.#K),J.removeEventListener("touchstart",this.#G),J.removeEventListener("touchmove",this.#N),J.removeEventListener("touchend",this.#U),J.removeEventListener("touchcancel",this.#L);else if(this.action==="click")J.removeEventListener("click",this.#q),J.removeEventListener("touchstart",this.#q);this.#O=null}setup(){this.style.display="contents"}render(){this.destroy();let J=typeof HTMLElement<"u"&&"popover"in HTMLElement.prototype,Q=document.createElement("span");if(this.popup=document.createElement("dialog",{is:"fig-popup"}),this.popup.setAttribute("is","fig-popup"),this.popup.setAttribute("variant","tooltip"),this.popup.setAttribute("data-tooltip-managed",""),this.popup.setAttribute("role","tooltip"),this.popup.setAttribute("closedby","closerequest"),J)this.popup.setAttribute("popover","manual");let Z=u();this.popup.setAttribute("id",Z);let $=this.getAttribute("theme");if($)this.popup.setAttribute("theme",$);let j=this.getAttribute("pointer");if(j!==null)this.popup.setAttribute("pointer",j);if(this.popup.append(Q),Q.innerText=this.getAttribute("text")??"",this.firstElementChild){let _=new Set((this.firstElementChild.getAttribute("aria-describedby")||"").split(/\s+/).filter(Boolean));_.add(Z),this.firstElementChild.setAttribute("aria-describedby",[..._].join(" "))}if(J)(N0(this)??document.body).append(this.popup);else{let _=this.closest("dialog");if(_&&_.open)_.append(this.popup);else(N0(this)??document.body).append(this.popup)}this.popup.anchor=this.firstElementChild}destroy(){if(this.popup)this.#S(this.popup.id),this.popup.hidePopup?.(),this.popup.remove(),this.popup=null}#S(J){let Q=this.firstElementChild;if(!Q||!J)return;let Z=Q.getAttribute("aria-describedby");if(!Z)return;let $=Z.split(/\s+/).filter((j)=>j&&j!==J).join(" ");if($)Q.setAttribute("aria-describedby",$);else Q.removeAttribute("aria-describedby")}isTouchDevice(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}setupEventListeners(){if(this.action==="click")document.body.addEventListener("click",this.#Y);document.addEventListener("mousedown",this.#_,!0),document.addEventListener("keydown",this.#M,!0)}get#T(){return this.hasAttribute("show")&&this.getAttribute("show")!=="false"}#f(){let J=Date.now(),Q=R.#Z;if(this.action==="hover"&&R.#$)return!0;if(R.#Q&&J-R.#Q<Q)return!0;if(R.#J&&J-R.#J<Q)return!0;return!1}showDelayedPopup(){if(this.#T)return;if(clearTimeout(this.timeout),this.#f()){this.render(),this.showPopup();return}this.timeout=setTimeout(()=>{this.render(),this.showPopup()},this.delay)}showPopup(){if(this.#B&&!this.#B.open)return;if(!this.firstElementChild)return;if(this.action==="hover"&&R.#$&&R.#$!==this)R.#$.hidePopup();if(!this.popup)this.render();if(this.popup.anchor=this.firstElementChild,this.popup.open=!0,this.isOpen=!0,this.action==="hover")R.#$=this;R.#Q=Date.now()}hidePopup(){if(this.#T)return;clearTimeout(this.timeout),clearTimeout(this.#F);let J=this.isOpen;if(this.popup)this.destroy();if(this.isOpen=!1,R.#$===this)R.#$=null;if(J)R.#J=Date.now()}hidePopupOutsideClick(J){if(this.isOpen&&!this.popup.contains(J.target))this.hidePopup()}#A(J){if(!this.#R)this.hidePopup()}#k(J){if(this.action==="hover")this.#R=!0,clearTimeout(this.#F),this.showDelayedPopup()}#E(J){if(this.action==="hover"&&this.#R)clearTimeout(this.#F),this.#F=setTimeout(()=>{this.#R=!1,this.hidePopup()},150)}#I(J){if(this.action==="hover"&&this.#R)clearTimeout(this.#F),this.#F=setTimeout(()=>{this.#R=!1,this.hidePopup()},300)}#x(J){if(this.action==="hover"&&this.#R)this.#R=!1,clearTimeout(this.#F),this.hidePopup()}#V(J){if(!this.isOpen&&!this.popup||J.key!=="Escape")return;J.preventDefault(),this.hidePopup(),this.firstElementChild?.focus?.()}static get observedAttributes(){return["action","delay","open","pointer","show","text","theme"]}get text(){return this.getAttribute("text")??""}set text(J){this.setAttribute("text",J)}#g(J){if(!this.popup)return;let Q=this.popup.firstElementChild??this.popup.firstChild;if(!Q)return;Q.innerText=J}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(J){if(J===!1||J==="false"||J===null)this.removeAttribute("open");else this.setAttribute("open","true")}attributeChangedCallback(J,Q,Z){if(J==="action"){if(this.#C(),Q==="click")document.body?.removeEventListener("click",this.#Y);if(this.action=Z||"hover",this.isConnected){if(this.#D(),this.action==="click")document.body?.addEventListener("click",this.#Y)}}if(J==="delay"){let $=parseInt(Z);this.delay=!isNaN($)?$:500}if(J==="open")if(Z!==null&&Z!=="false")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()});if(J==="show")if(Z!==null&&Z!=="false")this.showPopup();else this.hidePopup();if(J==="text")this.#g(Z??"");if(J==="pointer"){if(this.popup)if(Z!==null)this.popup.setAttribute("pointer",Z);else this.popup.removeAttribute("pointer")}if(J==="theme"){if(this.popup)if(Z)this.popup.setAttribute("theme",Z);else this.popup.removeAttribute("theme")}}#h(J){if(!this.isOpen)return;let Q=J.target;if(this.popup&&this.popup.contains(Q))return;if(Q.tagName==="SELECT"||Q.hasAttribute("popover")||Q.closest("dialog"))this.hidePopup()}static#w(){if(R.#j)return;R.#j=!0;let J=()=>{R.dismissHoverTooltips()},Q=()=>{R.#y()};document.documentElement.addEventListener("mouseleave",J),document.addEventListener("mouseout",(Z)=>{if(Z.relatedTarget)return;J()}),document.addEventListener("scroll",Q,{capture:!0,passive:!0}),window.addEventListener("scroll",Q,{passive:!0}),window.visualViewport?.addEventListener("scroll",Q,{passive:!0}),window.visualViewport?.addEventListener("resize",Q,{passive:!0});try{let Z=window.frameElement;if(Z)Z.addEventListener("mouseleave",J)}catch{}window.addEventListener("message",(Z)=>{if(Z?.data?.type!=="figui:dismiss-tooltips")return;if(window.parent!==window&&Z.source!==window.parent)return;J()})}static dismissHoverTooltips(){for(let J of document.querySelectorAll("fig-tooltip")){if(!(J instanceof R))continue;if(J.action!=="hover")continue;if(J.#T)continue;if(J.isOpen||J.timeout)J.hidePopup()}for(let J of Array.from(R.#X))R.hide(J)}static#b=new WeakMap;static#y(){for(let J of document.querySelectorAll("fig-tooltip")){if(!(J instanceof R))continue;if(J.#T)continue;if(J.isOpen||J.timeout)J.hidePopup()}for(let J of Array.from(R.#X))R.hide(J)}static show(J,Q,Z={}){R.#w(),R.hide(J);let $=Z.delay??500,_=Date.now()-R.#Q<R.#Z?0:$,q={timeout:null,popup:null};R.#b.set(J,q),R.#X.add(J),q.timeout=setTimeout(()=>{let X=typeof HTMLElement<"u"&&"popover"in HTMLElement.prototype,Y=document.createElement("dialog",{is:"fig-popup"});if(Y.setAttribute("is","fig-popup"),Y.setAttribute("variant","tooltip"),Y.setAttribute("data-tooltip-managed",""),Y.setAttribute("role","tooltip"),Y.setAttribute("closedby","closerequest"),X)Y.setAttribute("popover","manual");let K=document.createElement("span");if(K.innerText=Q,Y.append(K),X)(N0(J)??document.body).append(Y);else{let N=J.closest?.("dialog");if(N&&N.open)N.append(Y);else(N0(J)??document.body).append(Y)}Y.anchor=J,Y.open=!0,q.popup=Y,R.#Q=Date.now()},_)}static hide(J){let Q=R.#b.get(J);if(!Q)return;if(clearTimeout(Q.timeout),Q.popup)Q.popup.remove(),R.#J=Date.now();R.#b.delete(J),R.#X.delete(J)}}customElements.define("fig-tooltip",R);class a0 extends HTMLElement{static observedAttributes=["position","tail"];#Q=null;#J=null;#Z=null;connectedCallback(){this.#Q=this.textContent,p(this,()=>{this.#$(),this.#j()})}disconnectedCallback(){this.#X()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(this.#Q===null)return;this.#$()}#$(){let J=this.getAttribute("position")||"right",Q=this.#Q||"";if(J==="middle"){let Z=this.getAttribute("tail"),$;if(Z){let q=Q.lastIndexOf(Z);$=q>0?q:Math.ceil(Q.length/2)}else $=Math.ceil(Q.length/2);this.innerHTML="";let j=document.createElement("span");j.className="start",j.textContent=Q.slice(0,$);let _=document.createElement("span");_.className="end",_.textContent=Q.slice($),this.appendChild(j),this.appendChild(_)}else this.textContent=Q}#j(){if(!this.hasAttribute("tooltip")||this.getAttribute("tooltip")==="false")return;this.#J=()=>{if(this.scrollWidth<=this.clientWidth)return;R.show(this,this.#Q)},this.#Z=()=>{R.hide(this)},this.addEventListener("pointerenter",this.#J),this.addEventListener("pointerleave",this.#Z)}#X(){if(this.#J)this.removeEventListener("pointerenter",this.#J);if(this.#Z)this.removeEventListener("pointerleave",this.#Z);R.hide(this)}}customElements.define("fig-truncate",a0);class n0 extends HTMLDialogElement{constructor(){super();this._figInit()}_figInit(){if(this._figInitialized)return;this._figInitialized=!0,this._isDragging=!1,this._dragPending=!1,this._dragStartPos={x:0,y:0},this._dragOffset={x:0,y:0},this._resizeObserver=null,this._mutationObserver=null,this._autoResizeRafId=0,this._offset=16,this._positionInitialized=!1,this._dragThreshold=3,this._boundPointerDown=this._handlePointerDown.bind(this),this._boundPointerMove=this._handlePointerMove.bind(this),this._boundPointerUp=this._handlePointerUp.bind(this),this._boundClose=this.close.bind(this),this._boundIframeMessage=this._handleIframeMessage.bind(this),this._boundContentMutation=this._scheduleAutoResize.bind(this),this._boundContentResize=this._scheduleAutoResize.bind(this),this._boundRestoreFocus=this._restoreFocus.bind(this),this._boundIframeMouseLeave=this._handleIframeMouseLeave.bind(this),this._iframeDismissMutationObserver=null,this._previousFocus=null}get autoresize(){return this.hasAttribute("autoresize")&&this.getAttribute("autoresize")!=="false"}connectedCallback(){if(this._figInit(),this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this._ensureHeader(),this.open&&!this.matches?.(":modal"))this._assignStackingOrder();p(this,()=>{this._addCloseListeners(),this._setupDragListeners(),this._applyPosition(),this._syncAutoResize(),this._setupIframeDismissListeners(),this._syncA11y()}),window.addEventListener("message",this._boundIframeMessage)}disconnectedCallback(){this._figInit(),this._removeDragListeners(),this.querySelectorAll("fig-button[close-dialog]").forEach((J)=>{J.removeEventListener("click",this._boundClose)}),window.removeEventListener("message",this._boundIframeMessage),this._teardownAutoResize(),this._teardownIframeDismissListeners(),this.removeEventListener("close",this._boundRestoreFocus)}_captureFocusBeforeOpen(){let J=document.activeElement;this._previousFocus=J instanceof HTMLElement&&J!==document.body&&!this.contains(J)?J:null}_restoreFocus(){let J=this._previousFocus;if(this._previousFocus=null,!J?.isConnected)return;let Q=document.activeElement;if(Q&&Q!==document.body&&!this.contains(Q))return;requestAnimationFrame(()=>J.focus?.())}_assignStackingOrder(){this.style.zIndex=String(r0()+1)}_clearStackingOrder(){this.style.zIndex=""}show(){return this._captureFocusBeforeOpen(),this._assignStackingOrder(),this.addEventListener("close",this._boundRestoreFocus,{once:!0}),R.dismissHoverTooltips(),super.show()}showModal(){return this._captureFocusBeforeOpen(),this._clearStackingOrder(),this.addEventListener("close",this._boundRestoreFocus,{once:!0}),R.dismissHoverTooltips(),super.showModal()}close(...J){let Q=super.close(...J);return this._clearStackingOrder(),Q}_handleIframeMouseLeave(J){let Q=J?.currentTarget;if(!(Q instanceof HTMLIFrameElement))return;try{Q.contentWindow?.postMessage({type:"figui:dismiss-tooltips"},"*")}catch{}}_syncIframeDismissListeners(){for(let J of this.querySelectorAll(":scope > iframe")){if(!(J instanceof HTMLIFrameElement))continue;if(J.dataset.figuiDismissBound==="true")continue;J.dataset.figuiDismissBound="true",J.addEventListener("mouseleave",this._boundIframeMouseLeave)}}_setupIframeDismissListeners(){if(this._syncIframeDismissListeners(),this._iframeDismissMutationObserver)return;this._iframeDismissMutationObserver=new MutationObserver(()=>{this._syncIframeDismissListeners()}),this._iframeDismissMutationObserver.observe(this,{childList:!0,subtree:!1})}_teardownIframeDismissListeners(){this._iframeDismissMutationObserver?.disconnect(),this._iframeDismissMutationObserver=null;for(let J of this.querySelectorAll(":scope > iframe"))J.removeEventListener("mouseleave",this._boundIframeMouseLeave),delete J.dataset.figuiDismissBound}_handleIframeMessage(J){if(!this.autoresize)return;let Q=J?.data;if(!Q||Q.type!=="figui:iframe-resize")return;let Z=J.source;if(!Z)return;let $=Array.from(this.querySelectorAll("iframe")).find((j)=>j.contentWindow===Z);if(!$)return;this._resizeForIframe($,Q)}_syncAutoResize(){if(this.autoresize)this._setupAutoResize(),this._scheduleAutoResize();else this._teardownAutoResize()}_setupAutoResize(){if(!this._resizeObserver){this._resizeObserver=new ResizeObserver(this._boundContentResize);for(let J of this.children)try{this._resizeObserver.observe(J)}catch{}}if(!this._mutationObserver)this._mutationObserver=new MutationObserver((J)=>{for(let Q of J)Q.addedNodes?.forEach((Z)=>{if(Z instanceof Element&&Z.parentElement===this)try{this._resizeObserver?.observe(Z)}catch{}});this._scheduleAutoResize()}),this._mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0})}_teardownAutoResize(){if(this._resizeObserver)this._resizeObserver.disconnect(),this._resizeObserver=null;if(this._mutationObserver)this._mutationObserver.disconnect(),this._mutationObserver=null;if(this._autoResizeRafId)cancelAnimationFrame(this._autoResizeRafId),this._autoResizeRafId=0}_scheduleAutoResize(){if(!this.autoresize)return;if(this._autoResizeRafId)return;this._autoResizeRafId=requestAnimationFrame(()=>{this._autoResizeRafId=0,this._applyAutoResize()})}_applyAutoResize(){if(!this.autoresize)return;if(this.querySelector(":scope > iframe"))return;this._resizeToContent(null)}_computeChrome(J){let Q=window.getComputedStyle(this),Z=parseFloat(Q.paddingTop||"0")+parseFloat(Q.paddingBottom||"0")+parseFloat(Q.borderTopWidth||"0")+parseFloat(Q.borderBottomWidth||"0"),$=0,j=parseFloat(Q.rowGap||Q.gap||"0")||0,_=0;for(let q of this.children){let X=q.getBoundingClientRect();if(X.height===0)continue;if(_+=1,q===J)continue;let Y=window.getComputedStyle(q),K=parseFloat(Y.marginTop||"0")+parseFloat(Y.marginBottom||"0");$+=X.height+K}if(j&&_>1)$+=j*(_-1);return Z+$}_resizeForIframe(J,Q){if(typeof Q.height!=="number"||!(Q.height>0))return;let Z=this._computeChrome(J);this.style.height=`${Math.ceil(Q.height+Z)}px`}_resizeToContent(){if(this.style.height)this.style.height=""}_ensureHeader(){if(this.querySelector("fig-header[dialog-header]"))return;let J=document.createElement("fig-header");J.setAttribute("dialog-header",""),J.setAttribute("data-auto","");let Q=document.createElement("h3");Q.textContent=this.getAttribute("title")||"Dialog";let Z=document.createElement("fig-tooltip");Z.setAttribute("text","Close");let $=document.createElement("fig-button");$.setAttribute("variant","ghost"),$.setAttribute("icon",""),$.setAttribute("aria-label","Close dialog"),$.setAttribute("close-dialog",""),$.appendChild(d("close")),Z.appendChild($),J.appendChild(Q),J.appendChild(Z),this.prepend(J)}_addCloseListeners(){this.querySelectorAll("fig-button[close-dialog]").forEach((J)=>{if(!J.hasAttribute("aria-label"))J.setAttribute("aria-label","Close dialog");J.removeEventListener("click",this._boundClose),J.addEventListener("click",this._boundClose)})}_syncA11y(){if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby")){let J=this.querySelector("fig-header[dialog-header] h1, fig-header[dialog-header] h2, fig-header[dialog-header] h3, fig-header[dialog-header] h4, fig-header[dialog-header] h5, fig-header[dialog-header] h6");if(J){let Q=J.getAttribute("id")||u();J.setAttribute("id",Q),this.setAttribute("aria-labelledby",Q)}}}_applyPosition(){let J=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";let Q=J.includes("top"),Z=J.includes("bottom"),$=J.includes("left"),j=J.includes("right"),_=J.includes("center")&&!Q&&!Z,q=J.includes("center")&&!$&&!j;if(Q)this.style.top=`${this._offset}px`;else if(Z)this.style.bottom=`${this._offset}px`;else if(_)this.style.top="0",this.style.bottom="0";if($)this.style.left=`${this._offset}px`;else if(j)this.style.right=`${this._offset}px`;else if(q)this.style.left="0",this.style.right="0";if(_&&q)this.style.margin="auto";else if(_)this.style.marginTop="auto",this.style.marginBottom="auto";else if(q)this.style.marginLeft="auto",this.style.marginRight="auto";this._positionInitialized=!0}_setupDragListeners(){if(this.drag){this.addEventListener("pointerdown",this._boundPointerDown);let J=this.getAttribute("handle"),Q=J?this.querySelector(J):this.querySelector("fig-header, header");if(Q)Q.style.cursor="grab"}}_removeDragListeners(){this.removeEventListener("pointerdown",this._boundPointerDown),document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),document.removeEventListener("pointercancel",this._boundPointerUp)}_isInteractiveElement(J){let Q=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],$=(_)=>Q.some((q)=>_.matches?.(q))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if($(J))return!0;let j=J.parentElement;while(j&&j!==this){if($(j))return!0;j=j.parentElement}return!1}_handlePointerDown(J){if(!this.drag)return;if(this._isInteractiveElement(J.target))return;let Q=this.getAttribute("handle");if(Q&&Q.trim()){let $=this.querySelector(Q);if(!$||!$.contains(J.target))return}this._dragPending=!0,this._dragStartPos.x=J.clientX,this._dragStartPos.y=J.clientY;let Z=this.getBoundingClientRect();this._dragOffset.x=J.clientX-Z.left,this._dragOffset.y=J.clientY-Z.top,document.addEventListener("pointermove",this._boundPointerMove),document.addEventListener("pointerup",this._boundPointerUp),document.addEventListener("pointercancel",this._boundPointerUp)}_handlePointerMove(J){if(this._dragPending&&!this._isDragging){let Q=Math.abs(J.clientX-this._dragStartPos.x),Z=Math.abs(J.clientY-this._dragStartPos.y);if(Q>this._dragThreshold||Z>this._dragThreshold){this._isDragging=!0,this._dragPending=!1,this.setPointerCapture(J.pointerId),this.style.cursor="grabbing";let $=this.getBoundingClientRect();this.style.top=`${$.top}px`,this.style.left=`${$.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this._isDragging)return;this.style.left=`${J.clientX-this._dragOffset.x}px`,this.style.top=`${J.clientY-this._dragOffset.y}px`,J.preventDefault()}_handlePointerUp(J){if(this._isDragging){if(this.hasPointerCapture?.(J.pointerId))this.releasePointerCapture(J.pointerId);this.style.cursor=""}this._isDragging=!1,this._dragPending=!1,document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),document.removeEventListener("pointercancel",this._boundPointerUp),J.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle","title","resizable","closedby","autoresize","aria-label","aria-labelledby"]}attributeChangedCallback(J,Q,Z){if(this._figInit(),J==="autoresize"&&this.isConnected)this._syncAutoResize();if(J==="drag")if(this.drag=Z!==null&&Z!=="false",this.drag)this._setupDragListeners();else{this._removeDragListeners();let $=this.querySelector("fig-header, header");if($)$.style.cursor=""}if(J==="position"&&this._positionInitialized)this._applyPosition();if(J==="modal"){let $=this.modal;if(this.modal=Z!==null&&Z!=="false",this.open&&$!==this.modal)if(this.close(),this.modal)this.showModal();else this.show()}if(J==="closedby")this.closedby=Z||"any";if(J==="title"){let $=this.querySelector("fig-header[data-auto] h3");if($)$.textContent=Z||"Dialog";this._syncA11y()}if(J==="aria-label"||J==="aria-labelledby")this._syncA11y()}}C0("fig-dialog",n0,{extends:"dialog"});class t0 extends HTMLDialogElement{constructor(){super();this._figInit()}_figInit(){if(this._figInitialized)return;this._figInitialized=!0,this._defaultOffset=16,this._autoCloseTimer=null,this._toastVisible=!1,this._syncingOpen=!1,this._managedRole=null,this._managedLive=null,this._boundHandleClose=this.handleClose.bind(this)}connectedCallback(){if(this._figInit(),!this.hasAttribute("theme"))this.setAttribute("theme","dark");if(this.syncLiveRegion(),this.addCloseListeners(),this.applyPosition(),this.hasAttribute("open")&&this.getAttribute("open")!=="false")this.showToast();else{if(this.getAttribute("open")==="false")this._syncingOpen=!0,this.removeAttribute("open"),this._syncingOpen=!1;this._toastVisible=!1}}disconnectedCallback(){this._figInit(),this.clearAutoClose()}addCloseListeners(){this.querySelectorAll("[close-toast]").forEach((J)=>{if(!J.hasAttribute("aria-label"))J.setAttribute("aria-label","Close notification");J.removeEventListener("click",this._boundHandleClose),J.addEventListener("click",this._boundHandleClose)})}handleClose(){this.hideToast()}applyPosition(){this.style.position="fixed",this.style.margin="0",this.style.top="auto";let J=Number.parseFloat(this.getAttribute("offset")),Q=Number.isFinite(J)?J:this._defaultOffset;this.style.bottom=`${Q}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}syncLiveRegion(){let J=this.getAttribute("live")==="assertive"||this.getAttribute("theme")==="danger",Q=J?"alert":"status",Z=J?"assertive":"polite";if(!this.hasAttribute("role")||this.getAttribute("role")===this._managedRole)this.setAttribute("role",Q),this._managedRole=Q;if(!this.hasAttribute("aria-live")||this.getAttribute("aria-live")===this._managedLive)this.setAttribute("aria-live",Z),this._managedLive=Z;if(!this.hasAttribute("aria-atomic"))this.setAttribute("aria-atomic","true")}startAutoClose(){this.clearAutoClose();let J=parseInt(this.getAttribute("duration")??"5000");if(J>0)this._autoCloseTimer=setTimeout(()=>this.hideToast(),J)}clearAutoClose(){if(this._autoCloseTimer)clearTimeout(this._autoCloseTimer),this._autoCloseTimer=null}_resolveAutoTheme(){if(this.getAttribute("theme")!=="auto")return;let J=getComputedStyle(document.documentElement).colorScheme||"";this.style.colorScheme=J.includes("dark")?"light":"dark"}showToast(){let J=this._toastVisible;this.syncLiveRegion(),this._resolveAutoTheme(),this._syncingOpen=!0;try{if(!this.open)this.show()}finally{this._syncingOpen=!1}if(this._toastVisible=!0,this.applyPosition(),this.startAutoClose(),!J)this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){let J=this._toastVisible||this.open;this.clearAutoClose(),this._syncingOpen=!0;try{if(this.open)this.close();else if(this.hasAttribute("open"))this.removeAttribute("open")}finally{this._syncingOpen=!1}if(this._toastVisible=!1,J)this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme","live"]}attributeChangedCallback(J,Q,Z){if(this._figInit(),Q===Z)return;if(!this.isConnected)return;if(this._syncingOpen)return;if(J==="offset")this.applyPosition();if(J==="open")if(Z!==null&&Z!=="false")this.showToast();else this.hideToast();if(J==="duration"&&this._toastVisible)this.startAutoClose();if(J==="theme")if(Z==="auto")this._resolveAutoTheme();else this.style.removeProperty("color-scheme");if(J==="theme"||J==="live")this.syncLiveRegion()}}C0("fig-toast",t0,{extends:"dialog"});class e0 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;_previousFocus=null;_boundDocumentKeydown;_boundNativeClose;constructor(){super();this._boundReposition=this.queueReposition.bind(this),this._boundScroll=(J)=>{let Q=J.target;if(this.open&&(!(Q instanceof Node)||!this.contains(Q))&&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),this._boundDocumentKeydown=this.handleDocumentKeydown.bind(this),this._boundNativeClose=this.handleNativeClose.bind(this)}ensureInitialized(){if(typeof this._anchorObserver>"u")this._anchorObserver=null;if(typeof this._contentObserver>"u")this._contentObserver=null;if(typeof this._mutationObserver>"u")this._mutationObserver=null;if(typeof this._anchorTrackRAF>"u")this._anchorTrackRAF=null;if(typeof this._lastAnchorRect>"u")this._lastAnchorRect=null;if(typeof this._isPopupActive>"u")this._isPopupActive=!1;if(typeof this._rafId>"u")this._rafId=null;if(typeof this._anchorRef>"u")this._anchorRef=null;if(typeof this._isDragging>"u")this._isDragging=!1;if(typeof this._dragPending>"u")this._dragPending=!1;if(typeof this._dragStartPos>"u")this._dragStartPos={x:0,y:0};if(typeof this._dragOffset>"u")this._dragOffset={x:0,y:0};if(typeof this._dragThreshold!=="number")this._dragThreshold=3;if(typeof this._wasDragged>"u")this._wasDragged=!1;if(typeof this._previousFocus>"u")this._previousFocus=null;if(typeof this._boundReposition!=="function")this._boundReposition=this.queueReposition.bind(this);if(typeof this._boundScroll!=="function")this._boundScroll=(J)=>{let Q=J.target;if(this.open&&(!(Q instanceof Node)||!this.contains(Q))&&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);if(typeof this._boundDocumentKeydown!=="function")this._boundDocumentKeydown=this.handleDocumentKeydown.bind(this);if(typeof this._boundNativeClose!=="function")this._boundNativeClose=this.handleNativeClose.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(J){if(J===!1||J==="false"||J===null){if(!(this.matches?.(":open")||this.matches?.(":popover-open"))&&!this.hasAttribute("open"))return;if(this.hidePopup(),this.hasAttribute("open"))this.removeAttribute("open");return}if(this.open)return;this.setAttribute("open","true")}get anchor(){return this._anchorRef??this.getAttribute("anchor")}set anchor(J){if(J instanceof Element)this._anchorRef=J;else if(typeof J==="string")this._anchorRef=null,this.setAttribute("anchor",J);else if(J&&typeof J.getBoundingClientRect==="function")this._anchorRef=J;else this._anchorRef=null;if(this.open)this.queueReposition()}connectedCallback(){if(this.ensureInitialized(),this.getAttribute("variant")==="tooltip"){if(!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("offset"))this.setAttribute("offset","8 8");if(!this.hasAttribute("viewport-margin"))this.setAttribute("viewport-margin","8");if(!this.hasAttribute("theme"))this.setAttribute("theme","menu")}if(!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("role"))this.setAttribute("role",this.getAttribute("variant")==="tooltip"?"tooltip":"dialog");if(!this.hasAttribute("closedby"))this.setAttribute("closedby","any");if(this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this.removeEventListener("close",this._boundNativeClose),this.addEventListener("close",this._boundNativeClose),requestAnimationFrame(()=>{this.setupDragListeners()}),this.open)this.showPopup();else this.hidePopup()}disconnectedCallback(){if(this.ensureInitialized(),this.teardownObservers(),this.removeDragListeners(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),document.removeEventListener("keydown",this._boundDocumentKeydown,!0),this.removeEventListener("close",this._boundNativeClose),this._rafId!==null)cancelAnimationFrame(this._rafId),this._rafId=null}attributeChangedCallback(J,Q,Z){if(this.ensureInitialized(),Q===Z)return;if(J==="open"){if(Z==="false"){this.open=!1;return}if(Z===null){this.hidePopup();return}this.showPopup();return}if(J==="drag"){if(this.drag=Z!==null&&Z!=="false",this.drag)this.setupDragListeners();else this.removeDragListeners();return}if(this.open)this.queueReposition(),this.setupObservers()}showPopup(){if(this._isPopupActive){this.queueReposition();return}this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(r0()+1),this.captureFocusBeforeOpen();let J=this.hasAttribute("popover")&&typeof this.showPopover==="function"&&!this.matches?.(":popover-open"),Q=this.shouldAutoReposition();if(Q)this.style.visibility="hidden";if(J)try{this.showPopover()}catch($){J=!1}if(!J&&!super.open)try{this.show()}catch($){}if(Q&&(this.matches?.(":open")||this.matches?.(":popover-open")))this.positionPopup(),this.style.visibility="";this.setupObservers(),document.addEventListener("pointerdown",this._boundOutsidePointerDown,!0),document.addEventListener("keydown",this._boundDocumentKeydown,!0),this._wasDragged=!1,this.queueReposition(),this._isPopupActive=!0;let Z=this.resolveAnchor();if(Z?.classList)Z.classList.add("has-popup-open");if(this.getAttribute("variant")!=="tooltip")R.dismissHoverTooltips()}hidePopup(){let J=this._isPopupActive||this.matches?.(":open")||this.matches?.(":popover-open"),Q=this.resolveAnchor();if(Q?.classList)Q.classList.remove("has-popup-open");if(this.style.visibility="",this._isPopupActive=!1,this._wasDragged=!1,this.teardownObservers(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),document.removeEventListener("keydown",this._boundDocumentKeydown,!0),this.hasAttribute("popover")&&typeof this.hidePopover==="function"&&this.matches?.(":popover-open"))try{this.hidePopover()}catch(Z){}if(this.matches?.(":open"))try{this.close()}catch(Z){}if(J)this.restoreFocusAfterClose()}shouldRestoreFocus(){return this.getAttribute("variant")!=="tooltip"}captureFocusBeforeOpen(){if(!this.shouldRestoreFocus())return;let J=document.activeElement;this._previousFocus=J instanceof HTMLElement&&J!==document.body&&!this.contains(J)?J:null}restoreFocusAfterClose(){if(!this.shouldRestoreFocus()){this._previousFocus=null;return}let J=this.resolveAnchor(),Q=this._previousFocus?.isConnected?this._previousFocus:J instanceof HTMLElement?J:null;if(this._previousFocus=null,!Q?.isConnected)return;let Z=document.activeElement;if(Z&&Z!==document.body&&!this.contains(Z))return;requestAnimationFrame(()=>Q.focus?.())}get autoresize(){let J=this.getAttribute("autoresize");return J===null||J!=="false"}set autoresize(J){if(J===!1||J==="false"||J===null)this.setAttribute("autoresize","false");else if(J||J==="")this.setAttribute("autoresize",J===!0?"":J);else this.setAttribute("autoresize","false")}handleNativeClose(){if(this.teardownObservers(),this.hasAttribute("open"))this.removeAttribute("open")}setupObservers(){this.teardownObservers();let J=this.resolveAnchor();if(J instanceof Element&&"ResizeObserver"in window)this._anchorObserver=new ResizeObserver(this._boundReposition),this._anchorObserver.observe(J);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(J){if(!J)return null;let Q=J.getBoundingClientRect();return{x:Q.x,y:Q.y,width:Q.width,height:Q.height}}hasRectChanged(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.x-Q.x)>Z||Math.abs(J.y-Q.y)>Z||Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z}startAnchorTracking(){if(this.stopAnchorTracking(),!this.open)return;let J=()=>{if(!this.open){this._anchorTrackRAF=null;return}let Q=this.resolveAnchor(),Z=this.readRectSnapshot(Q),$=this.shouldAutoReposition();if($&&this.hasRectChanged(this._lastAnchorRect,Z))this._lastAnchorRect=Z,this.queueReposition();else if(!$)this._lastAnchorRect=Z;this._anchorTrackRAF=requestAnimationFrame(J)};this._lastAnchorRect=this.readRectSnapshot(this.resolveAnchor()),this._anchorTrackRAF=requestAnimationFrame(J)}stopAnchorTracking(){if(this._anchorTrackRAF!==null)cancelAnimationFrame(this._anchorTrackRAF),this._anchorTrackRAF=null;this._lastAnchorRect=null}handleOutsidePointerDown(J){if(!this.open||!(this.matches?.(":open")||this.matches?.(":popover-open")))return;let Q=this.getAttribute("closedby");if(Q==="none"||Q==="closerequest")return;let Z=J.target;if(!(Z instanceof Node))return;let $=typeof J.composedPath==="function"?J.composedPath():[];if($.includes(this))return;if(this.contains(Z))return;let j=this.resolveAnchor();if(j&&($.includes(j)||j.contains?.(Z)))return;if(this.isInsideDescendantPopup(Z))return;this.open=!1}handleDocumentKeydown(J){if(J.key!=="Escape"||J.defaultPrevented)return;if(!this.open)return;if(this.getAttribute("role")==="menu")return;if(this.getAttribute("closedby")==="none")return;let $=Array.from(document.querySelectorAll('dialog[is="fig-popup"][open]')).filter((j)=>j.open).map((j)=>({popup:j,z:Number.parseInt(getComputedStyle(j).zIndex||"0",10)||0})).sort((j,_)=>j.z-_.z).at(-1)?.popup;if($&&$!==this)return;J.preventDefault(),this.open=!1}isInsideDescendantPopup(J){let Q=J.closest?.('dialog[is="fig-popup"]');if(!Q||Q===this)return!1;let Z=Q,$=new Set;while(Z&&!$.has(Z)){$.add(Z);let j=Z.anchor;if(!(j instanceof Element))break;if(this.contains(j))return!0;Z=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),document.removeEventListener("pointercancel",this._boundPointerUp)}isInteractiveElement(J){let Q=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-POPUP","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],$=(_)=>Q.some((q)=>_.matches?.(q))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if($(J))return!0;let j=J.parentElement;while(j&&j!==this){if($(j))return!0;j=j.parentElement}return!1}handlePointerDown(J){if(!this.drag)return;if(this.isInteractiveElement(J.target))return;let Q=this.getAttribute("handle");if(Q&&Q.trim()){let $=this.querySelector(Q);if(!$||!$.contains(J.target))return}this._dragPending=!0,this._dragStartPos.x=J.clientX,this._dragStartPos.y=J.clientY;let Z=this.getBoundingClientRect();this._dragOffset.x=J.clientX-Z.left,this._dragOffset.y=J.clientY-Z.top,document.addEventListener("pointermove",this._boundPointerMove),document.addEventListener("pointerup",this._boundPointerUp),document.addEventListener("pointercancel",this._boundPointerUp)}handlePointerMove(J){if(this._dragPending&&!this._isDragging){let Q=Math.abs(J.clientX-this._dragStartPos.x),Z=Math.abs(J.clientY-this._dragStartPos.y);if(Q>this._dragThreshold||Z>this._dragThreshold){this._isDragging=!0,this._dragPending=!1,this._wasDragged=!0,this.setPointerCapture(J.pointerId),this.style.cursor="grabbing";let $=this.getBoundingClientRect();this.style.top=`${$.top}px`,this.style.left=`${$.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this._isDragging)return;this.style.left=`${J.clientX-this._dragOffset.x}px`,this.style.top=`${J.clientY-this._dragOffset.y}px`,J.preventDefault()}handlePointerUp(J){if(this._isDragging){if(this.hasPointerCapture?.(J.pointerId))this.releasePointerCapture(J.pointerId);this.style.cursor=""}this._isDragging=!1,this._dragPending=!1,document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),document.removeEventListener("pointercancel",this._boundPointerUp),J.preventDefault()}resolveAnchor(){if(this._anchorRef)return this._anchorRef;let J=this.getAttribute("anchor");if(!J)return null;let Q=this.parentElement;try{if(Q?.querySelector){let Z=Q.querySelector(J);if(Z&&!this.contains(Z))return Z}return document.querySelector(J)}catch{return null}}parsePosition(){let Q=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),Z=new Set(["top","center","bottom"]),$=new Set(["left","center","right"]),j="top",_="center",q=null;if(Q.length>=2){if(Z.has(Q[0]))j=Q[0];if($.has(Q[1]))_=Q[1];return{vertical:j,horizontal:_,shorthand:q}}if(Q.length===1){let X=Q[0];if(X==="top"||X==="bottom")j=X,q=X;else if(X==="left"||X==="right")_=X,q=X;else if(X==="center")j="center",_="center"}return{vertical:j,horizontal:_,shorthand:q}}normalizeOffsetToken(J,Q="0px"){if(!J)return Q;let Z=J.trim();if(!Z)return Q;if(/^-?\d+(\.\d+)?$/.test(Z))return`${Z}px`;return Z}measureLengthPx(J,Q="x"){if(!J)return 0;let Z=this.normalizeOffsetToken(J,"0px");if(Z.endsWith("px")){let _=parseFloat(Z);return Number.isFinite(_)?_:0}let $=document.createElement("div");if($.style.position="fixed",$.style.visibility="hidden",$.style.pointerEvents="none",$.style.left="0",$.style.top="0",$.style.margin="0",$.style.padding="0",$.style.border="0",Q==="x")$.style.width=Z,$.style.height="0";else $.style.height=Z,$.style.width="0";document.body.appendChild($);let j=$.getBoundingClientRect();return $.remove(),Q==="x"?j.width:j.height}parseOffset(){let Q=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),Z=this.normalizeOffsetToken(Q[0],"0px"),$=this.normalizeOffsetToken(Q[1],"0px");return{xToken:Z,yToken:$,xPx:this.measureLengthPx(Z,"x"),yPx:this.measureLengthPx($,"y")}}parseViewportMargins(){let Q=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter(($)=>!Number.isNaN($)),Z=8;if(Q.length===0)return{top:8,right:8,bottom:8,left:8};if(Q.length===1)return{top:Q[0],right:Q[0],bottom:Q[0],left:Q[0]};if(Q.length===2)return{top:Q[0],right:Q[1],bottom:Q[0],left:Q[1]};if(Q.length===3)return{top:Q[0],right:Q[1],bottom:Q[2],left:Q[1]};return{top:Q[0],right:Q[1],bottom:Q[2],left:Q[3]}}getPlacementCandidates(J,Q,Z){let $={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(Z){let _=Z==="left"||Z==="right"?["top","bottom"]:["left","right"];return[{v:J,h:Q,s:Z},{v:J,h:Q,s:$[Z]},{v:J,h:Q,s:_[0]},{v:J,h:Q,s:_[1]}]}if(J==="center")return[{v:"center",h:Q,s:null},{v:"center",h:$[Q],s:null},{v:"top",h:Q,s:null},{v:"bottom",h:Q,s:null},{v:"top",h:$[Q],s:null},{v:"bottom",h:$[Q],s:null}];if(Q==="center")return[{v:J,h:"center",s:null},{v:$[J],h:"center",s:null},{v:J,h:"left",s:null},{v:J,h:"right",s:null},{v:$[J],h:"left",s:null},{v:$[J],h:"right",s:null}];return[{v:J,h:Q,s:null},{v:$[J],h:Q,s:null},{v:J,h:$[Q],s:null},{v:$[J],h:$[Q],s:null}]}computeCoords(J,Q,Z,$,j,_){let q,X;if(_==="left"||_==="right")return X=_==="left"?J.left-Q.width-j.xPx:J.right+j.xPx,q=J.top,{top:q,left:X};if(_==="top"||_==="bottom")return q=_==="top"?J.top-Q.height-j.yPx:J.bottom+j.yPx,X=J.left,{top:q,left:X};if(Z==="top")q=J.top-Q.height-j.yPx;else if(Z==="bottom")q=J.bottom+j.yPx;else q=J.top+(J.height-Q.height)/2;if(Z==="center")if($==="left")X=J.left-Q.width-j.xPx;else if($==="right")X=J.right+j.xPx;else X=J.left+(J.width-Q.width)/2;else if($==="left")X=J.left+j.xPx;else if($==="right")X=J.right-Q.width-j.xPx;else X=J.left+(J.width-Q.width)/2;return{top:q,left:X}}oppositeSide(J){return{top:"bottom",bottom:"top",left:"right",right:"left"}[J]||"bottom"}getPlacementSide(J,Q,Z){if(Z==="top")return"top";if(Z==="bottom")return"bottom";if(Z==="left")return"left";if(Z==="right")return"right";if(J!=="center")return J;if(Q!=="center")return Q;return"top"}lengthToPx(J,Q=0){let Z=getComputedStyle(this),$=String(J||"").trim(),j=parseFloat($);if(!Number.isFinite(j))return Q;if($.endsWith("rem"))return j*parseFloat(getComputedStyle(document.documentElement).fontSize);if($.endsWith("em"))return j*parseFloat(Z.fontSize);return j}radiusForSide(J){let Q=getComputedStyle(this),Z=($)=>this.lengthToPx($,0);if(J==="top")return Math.max(Z(Q.borderTopLeftRadius),Z(Q.borderTopRightRadius));if(J==="bottom")return Math.max(Z(Q.borderBottomLeftRadius),Z(Q.borderBottomRightRadius));if(J==="left")return Math.max(Z(Q.borderTopLeftRadius),Z(Q.borderBottomLeftRadius));if(J==="right")return Math.max(Z(Q.borderTopRightRadius),Z(Q.borderBottomRightRadius));return 0}getBeakEdgeInset(J){let Q=this.lengthToPx(getComputedStyle(this).getPropertyValue("--fig-popup-beak-width"),16);return Math.max(10,this.radiusForSide(J)+Q/2)}tracksAnchorBeak(){let J=this.getAttribute("variant");return J==="popover"||J==="tooltip"}getViewportBounds(J){let Q=window.visualViewport,Z=Q?.width??window.innerWidth,$=Q?.height??window.innerHeight,j=Q?.offsetLeft??0,_=Q?.offsetTop??0;return{minLeft:j+J.left,minTop:_+J.top,maxRight:j+Z-J.right,maxBottom:_+$-J.bottom}}clampToViewport(J,Q,Z){let $=this.getViewportBounds(Z),j=$.maxRight-Q.width,_=$.maxBottom-Q.height;return{left:Math.min(j,Math.max($.minLeft,J.left)),top:Math.min(_,Math.max($.minTop,J.top))}}resolveCoordsAtViewport(J,Q,Z,$,j){let{left:_,top:q}=this.clampToViewport(Z,Q,j);if(!J||!this.tracksAnchorBeak())return{left:_,top:q};let X=this.oppositeSide($),Y=this.getViewportBounds(j),K=Y.maxRight-Q.width,N=Y.minLeft,G=Y.maxBottom-Q.height,U=Y.minTop;if(X==="top"||X==="bottom"){let W=this.getBeakEdgeInset(X),B=J.left+J.width/2,L=B-_;if(L<W)_=B-W;else if(L>Q.width-W)_=B-(Q.width-W);_=Math.min(K,Math.max(N,_))}else if(X==="left"||X==="right"){let W=this.getBeakEdgeInset(X),B=J.top+J.height/2,L=B-q;if(L<W)q=B-W;else if(L>Q.height-W)q=B-(Q.height-W);q=Math.min(G,Math.max(U,q))}return{left:_,top:q}}canPointAtAnchor(J,Q,Z,$,j){if(!J||!this.tracksAnchorBeak())return!0;let _=this.oppositeSide(j),q=this.getBeakEdgeInset(_);if(_==="top"||_==="bottom"){let Y=J.left+J.width/2-Z;return Y>=q-0.5&&Y<=Q.width-q+0.5}let X=J.top+J.height/2-$;return X>=q-0.5&&X<=Q.height-q+0.5}updatePopoverBeak(J,Q,Z,$,j){if(!this.tracksAnchorBeak()||!J){this.style.removeProperty("--fig-popup-beak-offset"),this.removeAttribute("data-beak-side");return}let _=this.oppositeSide(j);this.setAttribute("data-beak-side",_);let q=J.left+J.width/2,X=J.top+J.height/2,Y=this.getBoundingClientRect(),K=Y.width>0&&Y.height>0?Y:Q,N=K.left,G=K.top,U=this.getBeakEdgeInset(_),W;if(_==="top"||_==="bottom"){W=q-N;let B=U,L=Math.max(B,K.width-U);W=Math.min(L,Math.max(B,W))}else{W=X-G;let B=U,L=Math.max(B,K.height-U);W=Math.min(L,Math.max(B,W))}this.style.setProperty("--fig-popup-beak-offset",`${W}px`)}overflowScore(J,Q,Z){let $=this.getViewportBounds(Z),j=J.left+Q.width,_=J.top+Q.height,q=Math.max(0,$.minLeft-J.left),X=Math.max(0,$.minTop-J.top),Y=Math.max(0,j-$.maxRight),K=Math.max(0,_-$.maxBottom);return q+X+Y+K}fits(J,Q,Z){return this.overflowScore(J,Q,Z)===0}clamp(J,Q,Z,$=null,j="top"){if($)return this.resolveCoordsAtViewport($,Q,J,j,Z);return this.clampToViewport(J,Q,Z)}primaryAxisOverflowPenalty(J,Q,Z,$){let j=this.getViewportBounds(Z),_=0;if($==="top")_=Math.max(0,j.minTop-J.top);else if($==="bottom")_=Math.max(0,J.top+Q.height-j.maxBottom);else if($==="left")_=Math.max(0,j.minLeft-J.left);else if($==="right")_=Math.max(0,J.left+Q.width-j.maxRight);return _>0?1000+_:0}placementScore(J,Q,Z,$,j){let _=this.resolveCoordsAtViewport(J,Q,Z,$,j),q=this.overflowScore(_,Q,j);if(q+=this.primaryAxisOverflowPenalty(Z,Q,j,$),J&&!this.canPointAtAnchor(J,Q,_.left,_.top,$))q+=1e4;return{score:q,resolved:_}}applyPopupPosition(J,Q,Z,$,j){let _=this.resolveCoordsAtViewport(J,Q,Z,$,j);this.style.left=`${_.left}px`,this.style.top=`${_.top}px`,this.updatePopoverBeak(J,Q,_.left,_.top,$)}positionPopup(){if(!this.open)return;let J=this.getBoundingClientRect(),Q=this.parseOffset(),{vertical:Z,horizontal:$,shorthand:j}=this.parsePosition(),_=this.resolveAnchor(),q=this.parseViewportMargins();if(!_){this.updatePopoverBeak(null,J,0,0,"top");let U=this.getViewportBounds(q),W={left:U.minLeft+(U.maxRight-U.minLeft-J.width)/2,top:U.minTop+(U.maxBottom-U.minTop-J.height)/2},B=this.clampToViewport(W,J,q);this.style.left=`${B.left}px`,this.style.top=`${B.top}px`;return}let X=_.getBoundingClientRect(),Y=this.getPlacementCandidates(Z,$,j),K=null,N="top",G=Number.POSITIVE_INFINITY;for(let{v:U,h:W,s:B}of Y){let L=this.computeCoords(X,J,U,W,Q,B),H=this.getPlacementSide(U,W,B),{score:F,resolved:z}=this.placementScore(X,J,L,H,q);if(B){let O=this.getViewportBounds(q);if((B==="left"||B==="right"?L.left>=O.minLeft&&L.left+J.width<=O.maxRight:L.top>=O.minTop&&L.top+J.height<=O.maxBottom)&&F<1e4){this.applyPopupPosition(X,J,L,H,q);return}}else if(F===0){this.applyPopupPosition(X,J,L,H,q);return}if(F<G)G=F,K=z,N=H}this.applyPopupPosition(X,J,K||{left:0,top:0},N,q)}queueReposition(){if(!this.open||!this.isPopupDisplayed()||!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()}isPopupDisplayed(){return Boolean(this._isPopupActive||this.matches?.(":open")||this.matches?.(":popover-open"))}}C0("fig-popup",e0,{extends:"dialog"});class J1 extends HTMLElement{#Q;#J;constructor(){super();this.content=null,this.#Q=!1,this.#J=this.handleClick.bind(this)}connectedCallback(){if(this.setAttribute("label",this.innerText),this.setAttribute("role","tab"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.addEventListener("click",this.#J),p(this,()=>{if(typeof this.getAttribute("content")==="string"){if(this.content=document.querySelector(this.getAttribute("content")),this.content){let J=this.getAttribute("id")||u(),Q=this.content.getAttribute("id")||u();if(this.setAttribute("id",J),this.content.setAttribute("id",Q),this.setAttribute("aria-controls",Q),this.content.setAttribute("role","tabpanel"),this.content.setAttribute("aria-labelledby",J),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(J){this.setAttribute("selected",J?"true":"false")}disconnectedCallback(){this.removeEventListener("click",this.#J)}handleClick(){if(A(this,"disabled"))return;if(this.selected=!0,this.content)this.content.style.display="block"}static get observedAttributes(){return["selected","disabled"]}attributeChangedCallback(J,Q,Z){if(J==="selected"){if(this.#Q=Z!==null&&Z!=="false",this.setAttribute("aria-selected",this.#Q?"true":"false"),this.setAttribute("tabindex",this.#Q?"0":"-1"),this?.content)this.content.style.display=this.#Q?"block":"none"}if(J==="disabled")if(Z!==null&&Z!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else this.removeAttribute("aria-disabled"),this.setAttribute("tabindex",this.#Q?"0":"-1")}}customElements.define("fig-tab",J1);class Q1 extends HTMLElement{#Q;#J;#Z=this.#W.bind(this);#$=null;#j=null;#X=null;#_=null;#Y=!1;#q=new WeakSet;constructor(){super();this.#Q=this.handleClick.bind(this),this.#J=this.#F.bind(this)}static get observedAttributes(){return["value","name","disabled"]}connectedCallback(){if(this.name=this.getAttribute("name")||"tabs",this.setAttribute("role","tablist"),this.shadowRoot)this.shadowRoot.replaceChildren();this.#L(),this.addEventListener("click",this.#Q),this.addEventListener("keydown",this.#J),this.addEventListener("scroll",this.#Z),this.#z(),this.#B(),this.#M(),p(this,()=>{let J=this.getAttribute("value");if(J)this.#P(J);if(A(this,"disabled"))this.#K(!0);this.#N(),this.#W(),this.#U(void 0,"auto")})}#K(J){this.querySelectorAll("fig-tab").forEach((Z)=>{if(J){if(!(Z.hasAttribute("disabled")&&Z.getAttribute("disabled")!=="false"))this.#q.add(Z),Z.setAttribute("disabled","");Z.setAttribute("aria-disabled","true"),Z.setAttribute("tabindex","-1")}else if(this.#q.has(Z))this.#q.delete(Z),Z.removeAttribute("disabled"),Z.removeAttribute("aria-disabled")}),this.#N()}#G(){return Array.from(this.querySelectorAll("fig-tab")).filter((J)=>!J.hasAttribute("disabled")||J.getAttribute("disabled")==="false")}#N(){let J=Array.from(this.querySelectorAll("fig-tab")),Q=J.find((Z)=>Z.hasAttribute("selected")&&Z.getAttribute("selected")!=="false")||this.#G()[0];J.forEach((Z)=>{let $=Z.hasAttribute("disabled")&&Z.getAttribute("disabled")!=="false";Z.setAttribute("tabindex",!$&&Z===Q?"0":"-1")})}#U(J=this.selectedTab,Q="smooth"){let Z=J||this.querySelector('fig-tab[selected]:not([selected="false"])')||this.#G()[0];if(!Z)return;requestAnimationFrame(()=>{if(!this.isConnected||!Z.isConnected)return;if(!(this.scrollWidth>this.clientWidth))return;let j=this.getBoundingClientRect(),_=Z.getBoundingClientRect(),q=_.left-j.left+this.scrollLeft+_.width/2;this.scrollTo({left:q-this.clientWidth/2,behavior:Q}),this.#W()})}disconnectedCallback(){this.removeEventListener("click",this.#Q),this.removeEventListener("keydown",this.#J),this.removeEventListener("scroll",this.#Z),this.#$?.disconnect(),this.#$=null,this.#j?.disconnect(),this.#j=null,this.#O()}#L(){if(this.#Y)return;let J=this.querySelector(":scope > [data-fig-tabs-scroll]");if(!J)return;this.#Y=!0;try{let Q=Array.from(J.childNodes);J.replaceWith(...Q)}finally{this.#Y=!1}}#W(){s0(this,this,"x")}#M(){this.#j?.disconnect(),this.#j=new ResizeObserver(()=>this.#W()),this.#j.observe(this)}#B(){this.#$?.disconnect(),this.#$=new MutationObserver(()=>{if(this.#Y)return;this.#L(),this.#z(),this.#N(),requestAnimationFrame(()=>{this.#W(),this.#U()})}),this.#$.observe(this,{childList:!0,subtree:!1})}#O(){this.#X?.remove(),this.#_?.remove(),this.#X=null,this.#_=null,this.classList.remove("overflow-start","overflow-end")}#z(){if(this.#X&&this.#_&&this.contains(this.#X)&&this.contains(this.#_))return;this.#X?.remove(),this.#_?.remove();let J=d0({owner:"tabs",onStart:()=>A0(this,"x",-1),onEnd:()=>A0(this,"x",1)});this.#X=J.start,this.#_=J.end,this.prepend(this.#X),this.append(this.#_)}#F(J){let Q=this.#G();if(!Q.length)return;let Z=Q.findIndex((j)=>A(j,"selected")),$=Z>=0?Z:0;switch(J.key){case"ArrowLeft":case"ArrowUp":J.preventDefault(),$=Z>0?Z-1:Q.length-1;break;case"ArrowRight":case"ArrowDown":J.preventDefault(),$=Z<Q.length-1?Z+1:0;break;case"Home":J.preventDefault(),$=0;break;case"End":J.preventDefault(),$=Q.length-1;break;default:return}if($!==Z&&Q[$]){this.querySelectorAll("fig-tab").forEach((_)=>_.removeAttribute("selected")),this.selectedTab=Q[$],Q[$].setAttribute("selected","true");let j=this.#H(Q[$]);if(j)this.setAttribute("value",j);else this.removeAttribute("value");Q[$].focus(),this.#N(),this.#U(Q[$]),this.#R()}}get value(){return this.#H(this.selectedTab)}set value(J){this.setAttribute("value",J)}#R(){let J=this.value;this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0}))}#H(J){if(!J)return"";let Q=J.getAttribute("value");if(Q!==null)return Q;return J.textContent?.trim()||""}#P(J){let Q=this.querySelectorAll("fig-tab");for(let Z of Q)if(this.#H(Z)===J)this.selectedTab=Z,Z.setAttribute("selected","true");else Z.removeAttribute("selected");this.#N(),this.#U(this.selectedTab)}attributeChangedCallback(J,Q,Z){switch(J){case"value":if(Z!==Q)this.#P(Z);break;case"disabled":this.#K(Z!==null&&Z!=="false");break}}handleClick(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=J.target.closest("fig-tab");if(!Q||!this.contains(Q))return;if(Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;let Z=this.selectedTab,$=this.value,j=this.querySelectorAll("fig-tab");for(let q of j)if(q===Q)this.selectedTab=q,q.setAttribute("selected","true");else q.removeAttribute("selected");let _=this.#H(Q);if(_)this.setAttribute("value",_);else this.removeAttribute("value");if(this.#N(),this.#U(Q),Z!==Q||$!==this.value)this.#R()}}customElements.define("fig-tabs",Q1);class Z1 extends HTMLElement{#Q;#J;#Z;constructor(){super();this.#Z=this.handleClick.bind(this)}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","radio");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#$(),this.addEventListener("click",this.#Z)}disconnectedCallback(){this.removeEventListener("click",this.#Z)}handleClick(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let J=this.closest("fig-segmented-control");if(J&&J.hasAttribute("disabled")&&J.getAttribute("disabled")!=="false")return;this.setAttribute("selected","true")}get value(){return this.#Q}set value(J){this.#Q=J,this.setAttribute("value",J)}get selected(){return this.#J}set selected(J){this.#J=J,this.setAttribute("selected",J)}static get observedAttributes(){return["selected","value","disabled"]}#$(){let J=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.setAttribute("aria-checked",J?"true":"false"),Q)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else this.removeAttribute("aria-disabled"),this.setAttribute("tabindex",J?"0":"-1")}attributeChangedCallback(J,Q,Z){switch(J){case"value":this.#Q=Z;break;case"selected":this.#J=Z,this.#$();break;case"disabled":this.#$();break}}}customElements.define("fig-segment",Z1);class $1 extends HTMLElement{#Q=null;#J=this.handleClick.bind(this);#Z=this.#M.bind(this);#$=null;#j=null;#X=0;#_=!1;#Y=!1;#q=new WeakSet;constructor(){super()}static get observedAttributes(){return["disabled","value","animated","sizing"]}connectedCallback(){if(this.name=this.getAttribute("name")||"segmented-control",!this.hasAttribute("role"))this.setAttribute("role","radiogroup");this.addEventListener("click",this.#J),this.addEventListener("keydown",this.#Z),this.#C(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#D(),this.#R(),p(this,()=>{this.#P({enforceFallback:!0}),this.#H(),this.#z({forceInstant:!0})})}disconnectedCallback(){if(this.removeEventListener("click",this.#J),this.removeEventListener("keydown",this.#Z),this.#$?.disconnect(),this.#$=null,this.#j?.disconnect(),this.#j=null,this.#X)cancelAnimationFrame(this.#X),this.#X=0;this.#_=!1,this.#Y=!1}get selectedSegment(){return this.#Q}set selectedSegment(J){let Q=this.querySelectorAll("fig-segment");for(let Z of Q){let $=Z===J,j=A(Z,"selected");if($&&!j)Z.setAttribute("selected","true");else if(!$&&j)Z.removeAttribute("selected")}this.#Q=J instanceof HTMLElement&&this.contains(J)?J:null,this.#L(),this.#z()}get value(){return this.getAttribute("value")||""}set value(J){if(J===null||J===void 0){this.removeAttribute("value");return}this.setAttribute("value",String(J))}#K(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0}))}#G(J){let Q=J.getAttribute("value");if(Q!==null){let Z=Q.trim();if(Z.length>0)return Z}return J.textContent?.trim()||""}#N(){let J=this.querySelectorAll("fig-segment");for(let Q of J)if(Q.hasAttribute("selected")&&Q.getAttribute("selected")!=="false")return Q;return null}#U(){return Array.from(this.querySelectorAll("fig-segment")).filter((J)=>!J.hasAttribute("disabled")||J.getAttribute("disabled")==="false")}#L(){let J=Array.from(this.querySelectorAll("fig-segment")),Q=J.find((Z)=>Z.hasAttribute("selected")&&Z.getAttribute("selected")!=="false");J.forEach((Z)=>{let $=Z.hasAttribute("disabled")&&Z.getAttribute("disabled")!=="false",j=Z===Q;Z.setAttribute("aria-checked",j?"true":"false"),Z.setAttribute("tabindex",!$&&j?"0":"-1")})}#W(J){if(!J)return;let Q=this.selectedSegment,Z=this.value;this.selectedSegment=J;let $=this.#G(J);if($)this.setAttribute("value",$);else this.removeAttribute("value");let j=this.value;if(Q!==J||Z!==j)this.#K(j)}#M(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=this.#U();if(!Q.length)return;let Z=Q.findIndex((_)=>A(_,"selected")),$=Z>=0?Z:0;switch(J.key){case"ArrowLeft":case"ArrowUp":J.preventDefault(),$=$>0?$-1:Q.length-1;break;case"ArrowRight":case"ArrowDown":J.preventDefault(),$=$<Q.length-1?$+1:0;break;case"Home":J.preventDefault(),$=0;break;case"End":J.preventDefault(),$=Q.length-1;break;case" ":case"Enter":{let _=J.target.closest("fig-segment");if(_&&this.contains(_))J.preventDefault(),this.#W(_);return}default:return}let j=Q[$];this.#W(j),j.focus(),requestAnimationFrame(()=>{if(this.contains(j))j.focus()})}#B(J){let Q=String(J??"").trim();if(!Q)return!1;let Z=this.querySelectorAll("fig-segment");for(let $ of Z){let j=this.#G($);if(!j)continue;if(j===Q)return this.selectedSegment=$,!0}return!1}#O(){let J=this.getAttribute("animated");if(J===null)return!1;if(J==="")return!0;return J.trim().toLowerCase()==="true"}#z({forceInstant:J=!1}={}){if(this.#_=this.#_||J,this.#X)return;this.#X=requestAnimationFrame(()=>{this.#X=0;let Q=this.#_;this.#_=!1,this.#F({forceInstant:Q})})}#F({forceInstant:J=!1}={}){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Z=this.#O(),$=this.#Q&&this.contains(this.#Q)?this.#Q:this.#N();if(Q||!Z){if(this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready"),!Z||Q)this.#Y=!1;return}if(!$){if(this.#Y)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}let j=this.getBoundingClientRect(),_=$.getBoundingClientRect();if(j.width<=0||_.width<=0){if(this.#Y)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}let q=Math.max(0,_.left-j.left);this.style.setProperty("--seg-indicator-x",`${q}px`),this.style.setProperty("--seg-indicator-w",`${_.width}px`),this.style.setProperty("--seg-indicator-opacity","1"),this.style.setProperty("--seg-indicator-transition-duration",!this.#Y||J?"0ms":"150ms"),this.setAttribute("data-indicator-ready","true"),this.#Y=!0}#R(){this.#j?.disconnect(),this.#j=new ResizeObserver(()=>{this.#z()}),this.#H()}#H(){if(!this.#j)return;this.#j.disconnect(),this.#j.observe(this),this.querySelectorAll("fig-segment").forEach((J)=>{this.#j?.observe(J)})}#P({enforceFallback:J=!1}={}){if(this.querySelectorAll("fig-segment").length===0){this.#Q=null,this.#z({forceInstant:!0});return}let Z=this.getAttribute("value"),$=Z?.trim()??"";if(Z!==null){if($!==Z){this.setAttribute("value",$);return}if($&&this.#B($))return}let j=this.#N();if(j){this.selectedSegment=j;return}if(J)this.selectedSegment=this.#U()[0]||null}#D(){this.#$?.disconnect(),this.#$=new MutationObserver((J)=>{let Q=!1;for(let Z of J){if(Z.type==="childList"){Q=!0;break}if(Z.type==="attributes"&&Z.target instanceof HTMLElement&&Z.target.tagName.toLowerCase()==="fig-segment"&&(Z.attributeName==="value"||Z.attributeName==="selected")){Q=!0;break}if(Z.type==="characterData"){Q=!0;break}}if(Q)this.#C(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#H(),this.#P({enforceFallback:!0}),this.#L()}),this.#$.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","selected"]})}handleClick(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=J.target.closest("fig-segment");if(!Q||!this.contains(Q))return;if(Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.#W(Q)}#C(J){this.setAttribute("aria-disabled",J?"true":"false"),this.querySelectorAll("fig-segment").forEach((Q)=>{if(J){if(!(Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false"))this.#q.add(Q),Q.setAttribute("disabled","");Q.setAttribute("aria-disabled","true")}else if(this.#q.has(Q))this.#q.delete(Q),Q.removeAttribute("disabled"),Q.removeAttribute("aria-disabled")}),this.#L()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="disabled"){this.#C(Z!==null&&Z!=="false"),this.#z({forceInstant:!0});return}if(J==="value"){this.#P({enforceFallback:!1});return}if(J==="animated"){if(!this.#O())this.#Y=!1;this.#z({forceInstant:!0});return}if(J==="sizing")this.#z({forceInstant:!0})}}customElements.define("fig-segmented-control",$1);class j1 extends HTMLElement{static get observedAttributes(){return["options","value","disabled","full","sizing"]}#Q="segments";#J=0;#Z=null;#$=[];#j=null;#X=!1;#_(J){let Q=J?.detail;if(typeof Q==="string")return Q;let Z=J?.currentTarget?.value??J?.target?.value??this.getAttribute("value");if(Z===null||Z===void 0)return null;return String(Z)}#Y(){if(this.#$.length===0)return!1;let J=this.querySelector(":scope > fig-segmented-control");if(J){let Z=J.querySelectorAll("fig-segment");if(Z.length!==this.#$.length)return!1;return Array.from(Z).every(($,j)=>$.getAttribute("value")===this.#$[j])}let Q=this.querySelector(":scope > fig-dropdown");if(Q){let Z=Q.querySelectorAll("option");return Z.length===this.#$.length&&Array.from(Z).every(($,j)=>$.textContent?.trim()===this.#$[j])}return!1}#q(){let J=this.querySelector(":scope > fig-segmented-control");if(J)this.#j=J,this.#Q="segments";else this.#j=this.querySelector(":scope > fig-dropdown"),this.#Q="dropdown";this.#L()}connectedCallback(){if(this.#K(),this.#Y()){this.#q(),this.#M(),p(this,()=>p(this,()=>this.#z()));return}this.#G(),this.#M(),p(this,()=>p(this,()=>this.#z()))}disconnectedCallback(){this.#Z?.disconnect(),this.#Z=null}get value(){return this.getAttribute("value")||""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get options(){return this.#$.slice()}set options(J){if(Array.isArray(J)){let Z=J.some(($)=>String($).includes(","))?JSON.stringify(J):J.join(",");this.setAttribute("options",Z)}else this.setAttribute("options",String(J||""))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="options"){this.#K(),this.#U();return}if(J==="value"){this.#L();return}if(J==="disabled"){this.#W("disabled");return}if(J==="full"){this.#W("full");return}if(J==="sizing")this.#W("sizing"),this.#U()}#K(){let J=this.getAttribute("options")||"";if(J.startsWith("["))try{this.#$=JSON.parse(J);return}catch{}let Q=J.includes(`
|
|
38
|
+
`)?`
|
|
39
|
+
`:",";this.#$=J.split(Q).map((Z)=>Z.trim()).filter(Boolean)}#G(){if(this.innerHTML="",this.#$.length===0)return;let J=document.createElement("fig-segmented-control");if(J.setAttribute("sizing",this.getAttribute("sizing")||"equal"),A(this,"disabled"))J.setAttribute("disabled","");if(A(this,"full"))J.setAttribute("full","");let Q=this.getAttribute("value");for(let Z of this.#$){let $=document.createElement("fig-segment");if($.setAttribute("value",Z),$.textContent=Z,Q===Z)$.setAttribute("selected","true");J.appendChild($)}if(Q)J.setAttribute("value",Q);J.addEventListener("input",(Z)=>{if(Z.stopPropagation(),this.#X)return;let $=this.#_(Z);if($===null)return;this.#X=!0,this.setAttribute("value",$),this.#X=!1,this.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,composed:!0}))}),J.addEventListener("change",(Z)=>{if(Z.stopPropagation(),this.#X)return;let $=this.#_(Z);if($===null)return;this.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,composed:!0}))}),this.appendChild(J),this.#j=J,this.#Q="segments"}#N(){if(this.innerHTML="",this.#$.length===0)return;let J=document.createElement("fig-dropdown");if(A(this,"disabled"))J.setAttribute("disabled","");let Q=this.getAttribute("value");for(let Z of this.#$){let $=document.createElement("option");if($.value=Z,$.textContent=Z,Q===Z)$.selected=!0;J.appendChild($)}if(Q)J.setAttribute("value",Q);J.addEventListener("input",(Z)=>{if(Z.stopPropagation(),this.#X)return;let $=this.#_(Z);if(!$)return;this.#X=!0,this.setAttribute("value",$),this.#X=!1,this.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,composed:!0}))}),J.addEventListener("change",(Z)=>{if(Z.stopPropagation(),this.#X)return;let $=this.#_(Z);if(!$)return;this.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,composed:!0}))}),this.appendChild(J),this.#j=J,this.#Q="dropdown"}#U(){if(this.#Q==="segments")this.#G(),requestAnimationFrame(()=>{requestAnimationFrame(()=>this.#z())});else this.#N()}#L(){if(!this.#j||this.#X)return;let J=this.getAttribute("value")||"";this.#j.value=J}#W(J){if(!this.#j)return;if(this.hasAttribute(J))this.#j.setAttribute(J,this.getAttribute(J)||"");else this.#j.removeAttribute(J)}#M(){this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>{this.#z()}),this.#Z.observe(this)}#B(J){let Q=document.createRange();Q.selectNodeContents(J);let Z=Q.getBoundingClientRect().width,j=J.getBoundingClientRect().width,_=getComputedStyle(J),q=parseFloat(_.paddingLeft)||0,X=parseFloat(_.paddingRight)||0,Y=j-q-X;return Z>Y+0.5}#O(){let J=this.querySelectorAll("fig-segment");for(let Q of J)if(this.#B(Q))return!0;return!1}#z(){if(this.#$.length<=1)return;if(this.#Q==="segments"){let J=this.#j;if(J&&J.scrollWidth>J.clientWidth+1||this.#O())this.#J=this.clientWidth,this.#N()}else if(this.#J>0&&this.clientWidth>=this.#J)this.#G(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{let J=this.#j;if(J&&J.scrollWidth>J.clientWidth+1||this.#O())this.#N()})})}}customElements.define("fig-options",j1);class _1 extends HTMLElement{#Q=!1;#J=!1;#Z=!1;#$="";#j=["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required","aria-valuetext"];#X={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"}};#_;#Y;#q;#K;#G;#N;#U;#L=null;#W=null;#M=null;#B=null;constructor(){super();this.initialInnerHTML=null,this.#_=(J)=>{J.stopPropagation(),this.#V()},this.#Y=(J)=>{J.stopPropagation(),this.#g()},this.#G=(J)=>{this.#h(J)},this.#q=(J)=>{J.stopPropagation(),this.#P()},this.#K=(J)=>{J.stopPropagation(),this.#w()},this.#N=()=>{this.#Q=!0},this.#U=()=>{this.#Q=!1}}#O(){let J=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.getAttribute("text")!=="false",this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",this.precision=this.hasAttribute("precision")?Number(this.getAttribute("precision")):null,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";let Q=this.#X[this.type]||this.#X.range,Z=($,j)=>{let _=this.getAttribute($),q=_===null||_.trim()===""?j:Number(_);return Number.isFinite(q)?q:j};if(this.min=Z("min",Q.min),this.max=Z("max",Q.max),this.step=Z("step",Q.step),!(this.step>0))this.step=Q.step>0?Q.step:1;this.color=this.getAttribute("color")||Q?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#J=this.type!=="range"&&(J===null||typeof J==="string"&&J.trim()===""),this.value=this.#A(J)}#z(){if(!this.querySelector("[type=range]"))return!1;return this.getAttribute("text")!=="false"===!!this.querySelector("fig-input-number")}#F(){if(this.#O(),this.color)this.style.setProperty("--color",this.color);else this.style.removeProperty("--color");if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.className=this.type,this.input.min=String(this.min),this.input.max=String(this.max),this.input.step=String(this.step),this.input.value=String(this.value),this.input.disabled=this.disabled,this.text)this.input.setAttribute("tabindex","-1");else this.input.removeAttribute("tabindex");if(this.input.setAttribute("aria-valuemin",String(this.min)),this.input.setAttribute("aria-valuemax",String(this.max)),this.input.setAttribute("aria-valuenow",String(this.value)),this.figInputNumber=this.querySelector("fig-input-number"),this.figInputNumber){if(this.figInputNumber.setAttribute("placeholder",this.placeholder),this.figInputNumber.setAttribute("min",String(this.min)),this.figInputNumber.setAttribute("max",String(this.max)),this.figInputNumber.setAttribute("transform",String(this.transform)),this.figInputNumber.setAttribute("step",String(this.step)),this.figInputNumber.setAttribute("value",this.#J?"":String(this.value)),this.units)this.figInputNumber.setAttribute("units",this.units);else this.figInputNumber.removeAttribute("units");if(this.precision!==null)this.figInputNumber.setAttribute("precision",String(this.precision));else this.figInputNumber.removeAttribute("precision");this.figInputNumber.disabled=this.disabled,this.figInputNumber.toggleAttribute("disabled",this.disabled)}}#R(){if(this.#I(),this.input.removeEventListener("input",this.#_),this.input.addEventListener("input",this.#_),this.input.removeEventListener("change",this.#Y),this.input.addEventListener("change",this.#Y),this.input.removeEventListener("keydown",this.#G),this.input.addEventListener("keydown",this.#G),this.input.removeEventListener("pointerdown",this.#N),this.input.addEventListener("pointerdown",this.#N),this.input.removeEventListener("pointerup",this.#U),this.input.addEventListener("pointerup",this.#U),this.input.removeEventListener("pointercancel",this.#U),this.input.addEventListener("pointercancel",this.#U),this.default)this.style.setProperty("--default",this.#D(this.default));if(this.figInputNumber)this.#x(),this.figInputNumber.removeEventListener("input",this.#q),this.figInputNumber.addEventListener("input",this.#q),this.figInputNumber.removeEventListener("change",this.#K),this.figInputNumber.addEventListener("change",this.#K)}#H(){if(this.#O(),this.color)this.style.setProperty("--color",this.color);let J="",Q=`<div class="fig-slider-input-container" role="group">
|
|
40
|
+
<input
|
|
41
|
+
type="range"
|
|
42
|
+
${this.text?'tabindex="-1"':""}
|
|
43
|
+
${this.disabled?"disabled":""}
|
|
44
|
+
min="${this.min}"
|
|
45
|
+
max="${this.max}"
|
|
46
|
+
step="${this.step}"
|
|
47
|
+
class="${this.type}"
|
|
48
|
+
value="${this.value}"
|
|
49
|
+
aria-valuemin="${this.min}"
|
|
50
|
+
aria-valuemax="${this.max}"
|
|
51
|
+
aria-valuenow="${this.value}">
|
|
52
|
+
${this.initialInnerHTML}
|
|
53
|
+
</div>`;if(this.text)J=`${Q}
|
|
54
|
+
<fig-input-number
|
|
55
|
+
placeholder="${b(this.placeholder)}"
|
|
56
|
+
min="${this.min}"
|
|
57
|
+
max="${this.max}"
|
|
58
|
+
transform="${this.transform}"
|
|
59
|
+
step="${this.step}"
|
|
60
|
+
value="${this.#J?"":this.value}"
|
|
61
|
+
${this.units?`units="${b(this.units)}"`:""}
|
|
62
|
+
${this.precision!==null?`precision="${this.precision}"`:""}>
|
|
63
|
+
</fig-input-number>`;else J=Q;if(this.innerHTML=J,this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.figInputNumber=this.querySelector("fig-input-number"),this.#R(),this.datalist=this.querySelector("datalist"),this.datalist)this.inputContainer.append(this.datalist),this.datalist.setAttribute("id",this.datalist.getAttribute("id")||u()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",u());let Z=Math.min(1001,Math.max(0,Math.floor((this.max-this.min)/this.step)+1));for(let $=0;$<Z;$++){let j=document.createElement("option");j.setAttribute("value",this.min+$*this.step),this.datalist.append(j)}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",u());let Z=document.createElement("option");Z.setAttribute("value",this.default),this.datalist.append(Z),this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}if(this.datalist){let Z=this.datalist.querySelector(`option[value='${this.default}']`);if(Z)Z.setAttribute("default","true")}this.#E()}connectedCallback(){if(this.initialInnerHTML===null)this.initialInnerHTML=this.innerHTML;if(this.#z()){this.#F(),this.#R(),this.#E();return}this.#H()}get value(){if(this.#$!=="")return this.#$;let J=this.getAttribute("value");if(J!==null)return String(this.#A(J));return""}set value(J){let Q=J===null||J===void 0?"":String(J),$=this.min!==void 0||this.max!==void 0?String(this.#A(Q)):Q;if(this.#$=$,this.getAttribute("value")!==$)this.#Z=!0,this.setAttribute("value",$),this.#Z=!1;if(this.input&&this.input.value!==$)this.input.value=$,this.input.setAttribute("aria-valuenow",$);if(this.figInputNumber)this.figInputNumber.setAttribute("value",this.#J?"":$);if(this.input)this.#k()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#_),this.input.removeEventListener("change",this.#Y),this.input.removeEventListener("keydown",this.#G),this.input.removeEventListener("pointerdown",this.#N),this.input.removeEventListener("pointerup",this.#U),this.input.removeEventListener("pointercancel",this.#U);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#q),this.figInputNumber.removeEventListener("change",this.#K)}#P(){if(this.figInputNumber){let J=this.figInputNumber.value;this.#J=J===null||J===void 0||typeof J==="string"&&J.trim()==="";let Q=this.#A(J);this.value=Q,this.input.value=String(Q),this.#E(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}}#D(J){let{min:Q,max:Z}=this.#S(),$=Z-Q;if($===0)return 0;return(Number(J)-Q)/$}#C(J){if(J===null||J===void 0)return null;if(typeof J==="string"&&J.trim()==="")return null;let Q=Number(J);return Number.isFinite(Q)?Q:null}#S(){let J=this.#C(this.min),Q=this.#C(this.max);if(J===null)J=0;if(Q===null)Q=J;if(J>Q)[J,Q]=[Q,J];return{min:J,max:Q}}#T(J){let{min:Q,max:Z}=this.#S();return Math.min(Z,Math.max(Q,J))}#f(){if(this.type==="delta"){let Q=this.#C(this.default);if(Q!==null)return this.#T(Q);return this.#T(0)}if(this.type==="range"){let{min:Q,max:Z}=this.#S();return this.#T(Q+(Z-Q)/2)}let{min:J}=this.#S();return J}#A(J){let Q=this.#C(J);if(Q===null)return this.#f();return this.#T(Q)}#k(){let J=this.#D(this.value),Q=this.#D(this.default),Z=J<Q?-1:1,$=J===Q?1:0;if(this.#L!==J)this.style.setProperty("--slider-complete",J),this.#L=J;if(this.#W!==Q)this.style.setProperty("--default",Q),this.#W=Q;if(this.#M!==Z)this.style.setProperty("--slider-delta-direction",Z),this.#M=Z;if(this.#B!==$)this.style.setProperty("--unchanged",$),this.#B=$}#E(){let J=this.input.value;if(this.value=J,this.#k(),this.input.setAttribute("aria-valuenow",J),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#J?"":J)}#I(){if(!this.input)return;if(this.text){this.input.setAttribute("aria-hidden","true"),["aria-label","aria-labelledby","aria-describedby","aria-valuetext"].forEach((J)=>this.input.removeAttribute(J)),this.#x();return}this.input.removeAttribute("aria-hidden"),this.#j.forEach((J)=>{let Q=this.getAttribute(J);if(Q===null)this.input.removeAttribute(J);else this.input.setAttribute(J,Q)})}#x(){if(!this.figInputNumber)return;["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"].forEach((J)=>{let Q=this.getAttribute(J);if(Q===null)this.figInputNumber.removeAttribute(J);else this.figInputNumber.setAttribute(J,Q)})}#V(){this.#J=!1,this.#E(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#g(){this.#Q=!1,this.#J=!1,this.#E(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#h(J){if(this.disabled||!J.shiftKey)return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(J.key))return;J.preventDefault(),this.#J=!1;let Q=J.key==="ArrowRight"||J.key==="ArrowUp"?1:-1,Z=this.#C(this.input.value)??this.#f(),$=this.#C(this.step)??1,j=this.#A(Z+$*10*Q);this.value=j,this.input.value=String(j),this.#E(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#w(){if(this.figInputNumber){let J=this.figInputNumber.value;this.#J=J===null||J===void 0||typeof J==="string"&&J.trim()==="";let Q=this.#A(J);this.value=Q,this.input.value=String(Q),this.#E(),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","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required","aria-valuetext"]}focus(){if(this.text&&this.figInputNumber){this.figInputNumber.focus();return}this.input.focus()}attributeChangedCallback(J,Q,Z){if(J==="value"&&this.#Z)return;if(this.input)switch(J){case"color":this.color=Z,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=Z!==null&&Z!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#Q)break;if(this.#J=Z===null||typeof Z==="string"&&Z.trim()==="",this.value=this.#A(Z),this.input.value=String(this.value),this.#E(),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#J?"":this.value);break;case"transform":if(this.transform=Number(Z)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=Z!==null?Number(Z):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"placeholder":if(this.placeholder=Z!==null?Z:"##",this.figInputNumber)this.figInputNumber.setAttribute("placeholder",this.placeholder);break;case"default":this.default=Z!==null?Z:this.type==="delta"?0:this.min,this.#k();break;case"min":case"max":case"step":case"type":case"variant":case"units":this[J]=Z,this.#H();break;case"text":this.text=Z!=="false",this.#H();break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":case"aria-valuetext":this.#I();break;default:this[J]=this.input[J]=Z,this.#E();break}}}customElements.define("fig-slider",_1);class q1 extends HTMLElement{#Q=!1;#J=!1;#Z;#$;#j;#X;#_;#Y;#q;#K;#G=null;#N=0;#U="";#L="";#W=["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"];constructor(){super();this.#Z=this.#A.bind(this),this.#$=this.#E.bind(this),this.#j=this.#E.bind(this),this.#X=this.#k.bind(this),this.#_=(J)=>{J.stopPropagation(),this.#f(J)},this.#Y=(J)=>{J.stopPropagation();let Q=J.target.value;if(this.type==="number")Q=Number(Q)/(this.transform||1);this.value=Q,this.#D(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))},this.#q=this.focus.bind(this),this.#K=this.#B.bind(this)}connectedCallback(){if(this.multiline=this.hasAttribute("multiline")&&this.getAttribute("multiline")!=="false",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.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)}if(this.input=this.#M(),this.input.readOnly=this.readonly,this.disabled=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",this.input.disabled=this.disabled,this.#R(),this.#H(),this.#P(),this.#D(),this.#C(),U0(this),this.#O(),this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#T(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#T(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#T(this.step));this.addEventListener("pointerdown",this.#X)}this.removeEventListener("click",this.#K),this.addEventListener("click",this.#K),this.input.removeEventListener("change",this.#_),this.input.addEventListener("change",this.#_),this.input.removeEventListener("input",this.#Y),this.input.addEventListener("input",this.#Y)}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#_),this.input.removeEventListener("input",this.#Y);if(this.removeEventListener("click",this.#K),this.removeEventListener("pointerdown",this.#X),window.removeEventListener("pointermove",this.#Z),window.removeEventListener("pointerup",this.#$),window.removeEventListener("blur",this.#j),this.#G?.disconnect(),this.#G=null,this.#N)cancelAnimationFrame(this.#N),this.#N=0}focus(){this.input.focus()}#M(){let J=this.multiline,Q=this.querySelector("input,textarea");if(Q){if(J?Q.tagName==="TEXTAREA":Q.tagName==="INPUT")return Q;Q.remove()}let Z;if(J)Z=document.createElement("textarea"),Z.value=this.value;else Z=document.createElement("input"),Z.type=this.type,Z.value=this.type==="number"?this.#T(this.value):this.value;if(Z.setAttribute("data-generated","input-control"),this.name)Z.name=this.name;return Z.placeholder=this.placeholder,this.insertBefore(Z,this.querySelector('[slot="append"]')),Z}#B(J){let Q=J.target?.closest?.("[slot]");if(!Q||Q.parentElement!==this)return;this.focus()}#O(){this.#G?.disconnect(),this.#G=new MutationObserver(()=>this.#z()),this.#G.observe(this,{childList:!0,characterData:!0,subtree:!0})}#z(){if(this.#N)return;this.#N=requestAnimationFrame(()=>{if(this.#N=0,!this.isConnected)return;this.#F()})}#F(){if(!this.input||!this.contains(this.input))this.input=this.#M(),this.input.readOnly=this.readonly,this.input.addEventListener("change",this.#_),this.input.addEventListener("input",this.#Y);this.#R(),this.#H(),this.#P(),this.#D(),this.#C(),U0(this)}#R(){if(!this.input)return;this.#W.forEach((J)=>{let Q=this.getAttribute(J);if(Q===null)this.input.removeAttribute(J);else this.input.setAttribute(J,Q)})}#H(){let J=this.querySelector('[slot="prepend"][data-generated="search-prefix"]');if(this.type!=="search"){J?.remove();return}if(this.querySelector('[slot="prepend"]:not([data-generated])')){J?.remove();return}if(J){let $=J.querySelector("fig-icon");if($&&$.getAttribute("name")!=="search")$.setAttribute("name","search");return}let Z=d("search");Z.setAttribute("slot","prepend"),Z.setAttribute("data-generated","search-prefix"),Z.setAttribute("color","var(--figma-color-icon)"),Z.addEventListener("click",this.#q),this.prepend(Z)}#P(){let J=this.querySelector('[slot="append"][data-generated="search-clear"]');if(this.type!=="search"){J?.remove();return}if(this.querySelector('[slot="append"]:not([data-generated])')){J?.remove();return}if(J){let q=J.querySelector("fig-icon");if(q&&q.getAttribute("name")!=="close")q.setAttribute("name","close");return}let Z=document.createElement("span");Z.setAttribute("slot","append"),Z.setAttribute("data-generated","search-clear");let $=document.createElement("fig-tooltip");$.setAttribute("text","Clear search");let j=document.createElement("fig-button");j.setAttribute("variant","ghost"),j.setAttribute("icon",""),j.setAttribute("aria-label","Clear search");let _=d("close",{size:"small"});_.setAttribute("color","var(--figma-color-icon-secondary)"),j.append(_),$.append(j),Z.append($),this.append(Z),j.addEventListener("click",(q)=>{if(q.preventDefault(),q.stopPropagation(),!this.input||this.input.value===""){this.focus();return}this.value="",this.input.value="",this.dispatchEvent(new CustomEvent("input",{detail:"",bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:"",bubbles:!0})),this.#D(),this.focus()})}#D(){if(this.type!=="search"){this.removeAttribute("data-search-has-value");return}this.toggleAttribute("data-search-has-value",!!this.input?.value)}#C(){let J=this.querySelector('[slot="append"][data-generated="password-toggle"]');if(this.type!=="password"){J?.remove(),this.#J=!1;return}if(this.querySelector('[slot="append"]:not([data-generated])')){J?.remove();return}if(J){this.#S(J);return}let Z=document.createElement("span");Z.setAttribute("slot","append"),Z.setAttribute("data-generated","password-toggle");let $=document.createElement("fig-tooltip"),j=document.createElement("fig-button");j.setAttribute("variant","ghost"),j.setAttribute("icon","");let _=d("visible",{size:"small"});_.setAttribute("color","var(--figma-color-icon-secondary)"),j.append(_),$.append(j),Z.append($),this.append(Z),this.#S(Z),j.addEventListener("click",(q)=>{if(q.preventDefault(),q.stopPropagation(),this.#J=!this.#J,this.input)this.input.type=this.#J?"text":"password";this.#S(Z),this.focus()})}#S(J){let Q=J.querySelector("fig-tooltip"),Z=J.querySelector("fig-button"),$=J.querySelector("fig-icon"),j=this.#J?"Hide password":"Show password";Q?.setAttribute("text",j),Z?.setAttribute("aria-label",j),$?.setAttribute("name",this.#J?"visible":"hidden")}#T(J){if(J==="")return"";let Q=Number(J)*(this.transform||1);return Q=this.#x(Q),Q}#f(J){J.stopPropagation();let Q=J.target.value,Z=Q;if(this.type==="number")Q=Q/(this.transform||1),Q=this.#I(Q,!1),Z=Q*(this.transform||1);this.value=Q,this.input.value=Z,this.#D(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#A(J){if(this.type!=="number")return;if(J.buttons===0){this.#E();return}let Q=(this.step||1)*J.movementX,Z=Number(this.input.value);Z=Z/(this.transform||1)+Q,Z=this.#I(Z,!1);let $=Z*(this.transform||1);Z=this.#x(Z),$=this.#x($),this.value=Z,this.input.value=$,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#k(J){if(this.type!=="number")return;if(J.altKey||J.target.closest("[slot]"))this.#Q=!0,this.#U=this.style.userSelect,this.#L=document.body.style.cursor,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#Z),window.addEventListener("pointerup",this.#$),window.addEventListener("pointercancel",this.#$),window.addEventListener("blur",this.#j)}#E(J){if(this.type!=="number")return;let Q=this.#Q;if(this.#Q=!1,this.input.style.cursor="",this.style.cursor="",document.body.style.cursor=this.#L,this.style.userSelect=this.#U,window.removeEventListener("pointermove",this.#Z),window.removeEventListener("pointerup",this.#$),window.removeEventListener("pointercancel",this.#$),window.removeEventListener("blur",this.#j),Q)this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#I(J,Q=!0){let Z=J;if(this.type==="number"){if(Z=Number(Z),typeof this.min==="number")Z=Math.max(Q?this.#T(this.min):this.min,Z);if(typeof this.max==="number")Z=Math.min(Q?this.#T(this.max):this.max,Z);Z=this.#x(Z)}return Z}#x(J,Q=2){let Z=Math.round(J*100)/100;return Number.isInteger(Z)?Z:Z.toFixed(Q)}static get observedAttributes(){return["value","placeholder","label","disabled","readonly","type","multiline","step","min","max","transform","name","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"]}attributeChangedCallback(J,Q,Z){if(this.input)switch(J){case"disabled":this.disabled=this.input.disabled=Z!==null&&Z!=="false";break;case"readonly":this.readonly=Z!==null&&Z!=="false",this.input.readOnly=this.readonly;break;case"transform":if(this.type==="number")this.transform=Number(Z)||1,this.input.value=this.#T(this.value);break;case"value":if(this.#Q)break;let $=Z;if(this.type==="number")$=this.#I($,!1),this.value=$,this.input.value=this.#T($);else this.value=$,this.input.value=$;this.#D();break;case"min":case"max":case"step":if(Z===null||Z==="")this[J]=void 0,this.input.removeAttribute(J);else this[J]=this.input[J]=Number(Z),this.input.setAttribute(J,Z);break;case"name":if(this[J]=this.input[J]=Z||"",Z)this.input.setAttribute("name",Z);else this.input.removeAttribute("name");break;case"placeholder":this.placeholder=Z??"",this.input.placeholder=this.placeholder;break;case"type":if(this.type=Z||"text",this.input.type=this.type,this.removeEventListener("pointerdown",this.#X),this.type==="number")this.step=this.hasAttribute("step")?Number(this.getAttribute("step")):void 0,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):void 0,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):void 0,this.transform=Number(this.getAttribute("transform")||1),this.addEventListener("pointerdown",this.#X);this.#H(),this.#P(),this.#D(),this.#C();break;case"multiline":{let j=Z!==null&&Z!=="false";if(j!==this.multiline){this.multiline=j;let _=this.input;_.removeEventListener("change",this.#_),_.removeEventListener("input",this.#Y),_.remove(),this.input=this.#M(),this.input.readOnly=this.readonly,this.input.disabled=Boolean(this.disabled),this.input.addEventListener("change",this.#_),this.input.addEventListener("input",this.#Y),this.#R()}break}case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#R();break;default:this[J]=this.input[J]=Z;break}}}customElements.define("fig-input-text",q1);class W0 extends HTMLElement{#Q;#J;#Z;#$;#j;#X;#_;#Y;#q;#K;#G;#N;#U;#L;#W;#M;#B=!1;#O=null;#z=null;#F=0;#R="";#H="";#P=["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"];static#D="px";#C(J){return(J||"").split(",").map((Q)=>Q.trim().toLowerCase()).filter(Boolean)}#S(J){let Q=(J||"").trim();if(!Q)return"";return(this.#L??[]).includes(Q.toLowerCase())?"":Q}#T(){this.#N=this.#S(this.#U)}#f(J){if(J&&!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",(Q)=>{Q.preventDefault(),Q.stopPropagation();let Z=Q.target.closest("button");if(!Z||this.disabled||Z.disabled)return;let $=Z.classList.contains("fig-stepper-up")?1:-1;this.#k($),this.input.focus()}),this.append(this.#O);else if(!J&&this.#O)this.#O.remove(),this.#O=null;this.#A()}#A(){if(!this.#O)return;let J=this.#O.querySelector(".fig-stepper-up"),Q=this.#O.querySelector(".fig-stepper-down");if(!J||!Q)return;let Z=this.input?this.#b(this.input.value):this.value,$=Z!==""&&Z!==null&&Z!==void 0?Number(Z)/(this.transform||1):Number(this.value),j=Number.isFinite($),_=Boolean(this.disabled),q=j&&typeof this.min==="number"&&$<=this.min,X=j&&typeof this.max==="number"&&$>=this.max;J.disabled=_||X,Q.disabled=_||q}#k(J){let Q=this.step||1,Z=this.#b(this.input.value),$=(Z!==""?Number(Z)/(this.transform||1):0)+Q*J;$=this.#d($,!1),this.value=$,this.input.value=this.#y(this.value),this.#A(),this.#w(),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.#p.bind(this),this.#Z=this.#p.bind(this),this.#$=this.#l.bind(this),this.#j=(J)=>{J.stopPropagation(),this.#u(J)},this.#X=(J)=>{J.stopPropagation(),this.#m(J)},this.#_=(J)=>{this.#v(J)},this.#Y=(J)=>{this.#c(J)},this.#q=(J)=>{this.#_0(J)},this.#K=this.focus.bind(this),this.#G=this.#I.bind(this)}connectedCallback(){let J=this.getAttribute("value");this.value=J!==null&&J!==""?Number(J):"",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.#U=this.getAttribute("units")||"";let Q=this.getAttribute("units-disallow");if(this.#L=this.#C(Q===null?W0.#D:Q),this.#T(),this.#W=this.getAttribute("unit-position")||"suffix",this.#M=this.#n(this.hasAttribute("precision")?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);let Z=this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false";if(this.input=this.#E(),this.#h(),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.#f(Z),this.hasAttribute("disabled")){let $=this.getAttribute("disabled");this.disabled=this.input.disabled=$!=="false"}this.#A(),this.#w(),U0(this),this.addEventListener("pointerdown",this.#$),this.removeEventListener("click",this.#G),this.addEventListener("click",this.#G),this.#x(),this.input.removeEventListener("change",this.#j),this.input.addEventListener("change",this.#j),this.input.removeEventListener("input",this.#X),this.input.addEventListener("input",this.#X),this.input.removeEventListener("focus",this.#_),this.input.addEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#Y),this.input.addEventListener("blur",this.#Y),this.input.removeEventListener("keydown",this.#q),this.input.addEventListener("keydown",this.#q)}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#j),this.input.removeEventListener("input",this.#X),this.input.removeEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#Y),this.input.removeEventListener("keydown",this.#q);if(this.removeEventListener("click",this.#G),this.removeEventListener("pointerdown",this.#$),window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("blur",this.#Z),this.#z?.disconnect(),this.#z=null,this.#F)cancelAnimationFrame(this.#F),this.#F=0}focus(){this.input.focus()}#E(){let J=this.querySelector("input");if(J)return J;let Q=document.createElement("input");if(Q.type="text",Q.inputMode="decimal",Q.setAttribute("data-generated","input-control"),this.name)Q.name=this.name;return Q.placeholder=this.placeholder,Q.value=this.#y(this.value),this.insertBefore(Q,this.querySelector('[slot="append"]')),Q}#I(J){let Q=J.target?.closest?.("[slot]");if(!Q||Q.parentElement!==this)return;this.focus()}#x(){this.#z?.disconnect(),this.#z=new MutationObserver(()=>this.#V()),this.#z.observe(this,{childList:!0,characterData:!0,subtree:!0})}#V(){if(this.#F)return;this.#F=requestAnimationFrame(()=>{if(this.#F=0,!this.isConnected)return;this.#g()})}#g(){if(!this.input||!this.contains(this.input))this.input=this.#E(),this.input.addEventListener("change",this.#j),this.input.addEventListener("input",this.#X),this.input.addEventListener("focus",this.#_),this.input.addEventListener("blur",this.#Y),this.input.addEventListener("keydown",this.#q);let J=this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false";if(this.#O&&!this.contains(this.#O))this.#O=null;this.#f(J),this.#h(),this.#w(),U0(this)}#h(){if(!this.input)return;this.#P.forEach((J)=>{let Q=this.getAttribute(J);if(Q===null)this.input.removeAttribute(J);else this.input.setAttribute(J,Q)})}#w(){if(!this.input)return;if(this.input.setAttribute("role","spinbutton"),typeof this.min==="number")this.input.setAttribute("aria-valuemin",String(this.min));else this.input.removeAttribute("aria-valuemin");if(typeof this.max==="number")this.input.setAttribute("aria-valuemax",String(this.max));else this.input.removeAttribute("aria-valuemax");let J=this.value===""?null:Number(this.value);if(Number.isFinite(J))this.input.setAttribute("aria-valuenow",String(J)),this.input.setAttribute("aria-valuetext",this.#y(this.value));else this.input.removeAttribute("aria-valuenow"),this.input.removeAttribute("aria-valuetext")}#b(J){if(!J)return"";if(!this.#N){let $=J.replace(/[^\d.-]/g,""),j=$.split(".");if(j.length>2)$=j[0]+"."+j.slice(1).join("");return $}let Q=J.replace(this.#N,"").trim();Q=Q.replace(/[^\d.-]/g,"");let Z=Q.split(".");if(Z.length>2)Q=Z[0]+"."+Z.slice(1).join("");return Q}#y(J){if(J===""||J===null||J===void 0)return"";let Q=Number(J)*(this.transform||1);if(isNaN(Q))return"";if(Q=this.#q0(Q),!this.#N)return Q.toString();if(this.#W==="prefix")return this.#N+Q;else return Q+this.#N}#o(J){if(J===""||J===null||J===void 0)return"";let Q=Number(J)*(this.transform||1);return Q=this.#q0(Q),Q.toString()}#v(J){this.#B=!0,setTimeout(()=>{let Q=J.target.value;if(Q&&this.#N)if(this.#W==="prefix")J.target.setSelectionRange(this.#N.length,Q.length);else{let Z=Q.indexOf(this.#N);if(Z>-1)J.target.setSelectionRange(0,Z)}},0)}#c(J){this.#B=!1;let Q=this.#b(J.target.value);if(Q!==""){let Z=Number(Q)/(this.transform||1);Z=this.#d(Z,!1),this.value=Z,J.target.value=this.#y(this.value)}else this.value="",J.target.value="";this.#A(),this.#w()}#_0(J){if(this.disabled)return;if(J.key!=="ArrowUp"&&J.key!=="ArrowDown")return;J.preventDefault();let Q=this.step||1,Z=J.shiftKey?10:1,$=Q*Z*(J.key==="ArrowUp"?1:-1),j=this.#b(this.input.value),_=(j!==""?Number(j)/(this.transform||1):0)+$;_=this.#d(_,!1),this.value=_,this.input.value=this.#y(this.value),this.#A(),this.#w(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#m(J){let Q=this.#b(J.target.value);if(Q!=="")this.value=Number(Q)/(this.transform||1);else this.value="";this.#A(),this.#w(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#u(J){J.stopPropagation();let Q=this.#b(J.target.value);if(Q!==""){let Z=Number(Q)/(this.transform||1);Z=this.#d(Z,!1),this.value=Z,J.target.value=this.#y(this.value)}else this.value="",J.target.value="";this.#A(),this.#w(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#a(J){if(this.disabled)return;if(J.buttons===0){this.#p();return}let Q=(this.step||1)*J.movementX,Z=this.#b(this.input.value),$=Number(Z)/(this.transform||1)+Q;$=this.#d($,!1),this.value=$,this.input.value=this.#y(this.value),this.#A(),this.#w(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#l(J){if(this.disabled)return;if(J.altKey||J.target.closest("[slot]"))this.#B=!0,this.#R=this.style.userSelect,this.#H=document.body.style.cursor,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("pointercancel",this.#J),window.addEventListener("blur",this.#Z)}#p(J){let Q=this.#B;if(this.#B=!1,this.input.style.cursor="",this.style.cursor="",document.body.style.cursor=this.#H,this.style.userSelect=this.#R,window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("pointercancel",this.#J),window.removeEventListener("blur",this.#Z),Q)this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#d(J,Q=!0){let Z=Number(J);if(isNaN(Z))return"";if(typeof this.min==="number")Z=Math.max(this.min,Z);if(typeof this.max==="number")Z=Math.min(this.max,Z);return Z=this.#q0(Z),Z}#q0(J){let Q=this.#M??2,Z=Math.pow(10,Q),$=Math.round(J*Z)/Z;return Number.isInteger($)?$:parseFloat($.toFixed(Q))}#n(J){let Q=Number(J);if(!Number.isFinite(Q))return 2;return Math.max(0,Math.min(100,Math.trunc(Q)))}static get observedAttributes(){return["value","placeholder","disabled","step","min","max","transform","name","units","units-disallow","unit-position","steppers","precision","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"]}attributeChangedCallback(J,Q,Z){if(this.input)switch(J){case"disabled":this.disabled=this.input.disabled=Z!==null&&Z!=="false",this.#A();break;case"units":this.#U=Z||"",this.#T(),this.input.value=this.#y(this.value),this.#w();break;case"units-disallow":this.#L=this.#C(Z===null?W0.#D:Z),this.#T(),this.input.value=this.#y(this.value),this.#w();break;case"unit-position":this.#W=Z||"suffix",this.input.value=this.#y(this.value),this.#w();break;case"transform":this.transform=Number(Z)||1,this.input.value=this.#y(this.value),this.#w();break;case"value":if(this.#B)break;let $=Z!==null&&Z!==""?Number(Z):"";if($!=="")$=this.#d($,!1);this.value=$,this.input.value=this.#y(this.value),this.#A(),this.#w();break;case"min":case"max":case"step":if(Z===null||Z===""){this[J]=void 0,this.#A(),this.#w();break}this[J]=Number(Z),this.#A(),this.#w();break;case"steppers":{let j=Z!==null&&Z!=="false";this.#f(j);break}case"precision":this.#M=this.#n(Z!==null?Z:2),this.input.value=this.#y(this.value),this.#w();break;case"name":if(this[J]=this.input[J]=Z||"",Z)this.input.setAttribute("name",Z);else this.input.removeAttribute("name");break;case"placeholder":this.placeholder=Z??"",this.input.placeholder=this.placeholder;break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#h();break;default:this[J]=this.input[J]=Z;break}}}customElements.define("fig-input-number",W0);class X1 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),this.img=this.querySelector("img")}setSrc(J){if(this.src=J,!J){this.querySelector(":scope > img")?.remove(),this.img=null;return}let Q=this.querySelector(":scope > img")||document.createElement("img");if(Q.src=J,Q.alt=this.name||"",!Q.isConnected)this.replaceChildren(Q);this.img=Q}getInitials(J){return J?J.split(" ").map((Q)=>Q[0]).join(""):""}static get observedAttributes(){return["src","href","name"]}attributeChangedCallback(J,Q,Z){if(this[J]=Z,J==="name"){if(this.img)this.img.alt=Z||"";this.name=Z,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials)}else if(J==="src")this.src=Z,this.setSrc(this.src)}}customElements.define("fig-avatar",X1);class Y1 extends HTMLElement{#Q=!1;#J=null;#Z=null;#$=null;#j=null;#X=null;#_=null;constructor(){super();this.#Z=this.#K.bind(this),this.#$=this.focus.bind(this),this.#j=this.#G.bind(this),this.#X=this.#N.bind(this)}static get observedAttributes(){return["label"]}connectedCallback(){queueMicrotask(()=>{if(!this.isConnected)return;this.#q(),this.#Y()})}#Y(){if(this.#_||typeof MutationObserver>"u")return;this.#_=new MutationObserver(()=>{this.#q()}),this.#_.observe(this,{childList:!0})}#q(){let J=this.label,Q=this.#J;J?.removeEventListener("click",this.#Z),J?.removeEventListener("click",this.#$),J?.removeEventListener("pointerenter",this.#j),J?.removeEventListener("pointerleave",this.#X),Q?.removeEventListener("click",this.#Z),this.label=this.querySelector(":scope>label"),this.input=Array.from(this.childNodes).find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.nodeName.toLowerCase().startsWith("fig-")&&!(j instanceof Element&&j.classList.contains("fig-field-chevron")));let Z=this.input?.localName??"",$=Z==="fig-select"||Z==="fig-menu"||Z==="fig-dropdown"||Z==="fig-tooltip"||this.input instanceof HTMLDialogElement;if(this.#Q=!!(this.input&&("open"in this.input)&&!$),this.#Q&&this.label){if(!this.#J||!this.#J.isConnected)this.#J=d("chevron",{size:"small",className:"fig-field-chevron"}),this.insertBefore(this.#J,this.label);this.#J.addEventListener("click",this.#Z),this.label.addEventListener("click",this.#Z)}else{if(this.#J)this.#J.removeEventListener("click",this.#Z),this.#J.remove(),this.#J=null;if(this.input&&this.label){if(this.input.querySelectorAll("input, select, textarea").length!==1)this.label.addEventListener("click",this.#$)}}if(this.input&&this.label&&!this.#Q)this.#U();if(this.label)this.label.removeEventListener("pointerenter",this.#j),this.label.addEventListener("pointerenter",this.#j),this.label.removeEventListener("pointerleave",this.#X),this.label.addEventListener("pointerleave",this.#X)}disconnectedCallback(){if(this.#_?.disconnect(),this.#_=null,this.label)R.hide(this.label);if(this.label&&this.#Z)this.label.removeEventListener("click",this.#Z);if(this.label&&this.#$)this.label.removeEventListener("click",this.#$);if(this.label&&this.#j)this.label.removeEventListener("pointerenter",this.#j);if(this.label&&this.#X)this.label.removeEventListener("pointerleave",this.#X);if(this.#J&&this.#Z)this.#J.removeEventListener("click",this.#Z)}#K(J){if(J.preventDefault(),J.stopPropagation(),this.input&&typeof this.input.open<"u")this.input.open=!this.input.open}#G(){if(!this.label||this.label.scrollWidth<=this.label.clientWidth)return;R.show(this.label,this.label.textContent.trim())}#N(){if(this.label)R.hide(this.label)}#U(){if(!this.input||!this.label)return;let J=this.label.getAttribute("id")||u();this.label.setAttribute("id",J);let Q=this.input.querySelectorAll("input, select, textarea");if(Q.length===1){let Z=Q[0],$=Z.getAttribute("id")||u();if(Z.setAttribute("id",$),this.label.setAttribute("for",$),this.input.getAttribute("aria-labelledby")===J)this.input.removeAttribute("aria-labelledby");if(!Z.hasAttribute("aria-labelledby"))Z.setAttribute("aria-labelledby",J);return}if(this.label.removeAttribute("for"),!this.input.hasAttribute("aria-label")&&!this.input.hasAttribute("aria-labelledby"))this.input.setAttribute("aria-labelledby",J)}attributeChangedCallback(J,Q,Z){switch(J){case"label":if(this.label)this.label.textContent=Z,this.#U();break}}focus(){if(!this.input)return;if(this.input.contains(document.activeElement))return;let J=this.input.querySelectorAll("input, select, textarea");if(J.length===1)J[0].focus();else if(this.input.focus(),J.length===0)this.input.click()}}customElements.define("fig-field",Y1);class K1 extends HTMLElement{rgba;hex;#Q=100;#J;#Z;#$;#j;#X=!1;#_=!1;#Y=null;#q=this.#f.bind(this);#K=this.#A.bind(this);#G=this.#k.bind(this);#N=this.#w.bind(this);#U=this.#I.bind(this);#L=this.#V.bind(this);#W=this.#x.bind(this);#M=this.#b.bind(this);constructor(){super()}get alpha(){return this.getAttribute("alpha")}set alpha(J){if(J===null||J===void 0||J===!1)this.removeAttribute("alpha");else this.setAttribute("alpha",String(J))}#B(){let J={},Q=this.getAttribute("experimental");if(Q)J.experimental=Q;for(let{name:Z,value:$}of this.attributes)if(Z.startsWith("picker-")&&Z!=="picker-anchor")J[Z.slice(7)]=$;if(!J["dialog-position"])J["dialog-position"]="left";return J}#O(){let J=this.#B();return Object.entries(J).map(([Q,Z])=>`${Q}="${Z}"`).join(" ")}connectedCallback(){if(this.#z()){this.#F();return}this.#P()}disconnectedCallback(){this.#R()}#z(){return this.getAttribute("text")!=="false"?!!this.querySelector(":scope > .input-combo"):!!this.querySelector(":scope > fig-swatch")}#F(){if(this.#E(this.getAttribute("value")),this.#J=this.querySelector("fig-swatch"),this.#Z=this.querySelector("fig-fill-picker"),this.#$=this.querySelector("fig-input-text:not([type=number])"),this.#j=this.querySelector("fig-input-number"),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#j)this.#j.setAttribute("value",String(this.#Q));if(this.#J)this.#J.setAttribute("background",this.hexOpaque),this.#J.setAttribute("alpha",String(this.rgba.a));this.#h(),this.#H()}#R(){if(this.#J)this.#J.removeEventListener("pointerdown",this.#q,{capture:!0}),this.#J.removeEventListener("click",this.#K,{capture:!0}),this.#J.querySelector('input[type="color"]')?.removeEventListener("keydown",this.#G),this.#J.removeEventListener("input",this.#N);this.#$?.removeEventListener("input",this.#U),this.#$?.removeEventListener("change",this.#L),this.#j?.removeEventListener("input",this.#W),this.#j?.removeEventListener("change",this.#L),this.#Z?.removeEventListener("input",this.#M),this.#Z?.removeEventListener("change",this.#L)}#H(){if(this.#J){this.#J.disabled=A(this,"disabled");let J=this.#J.querySelector('input[type="color"]');if(this.#$||this.hasAttribute("swatch-disabled"))J?.setAttribute("tabindex","-1");if(this.hasAttribute("swatch-disabled")){if(J?.setAttribute("disabled",""),J)J.style.pointerEvents="none"}this.#J.addEventListener("pointerdown",this.#q,{capture:!0}),this.#J.addEventListener("click",this.#K,{capture:!0}),J?.addEventListener("keydown",this.#G),this.#J.addEventListener("input",this.#N)}if(this.#$)this.#$.addEventListener("input",this.#U),this.#$.addEventListener("change",this.#L);if(this.#j)this.#j.addEventListener("input",this.#W),this.#j.addEventListener("change",this.#L);if(this.#Z)this.#Z.addEventListener("input",this.#M),this.#Z.addEventListener("change",this.#L)}#P(){this.#E(this.getAttribute("value"));let J=this.getAttribute("alpha")!=="false",Z=this.#v?" disabled":"",$="";if(this.getAttribute("text")!=="false"){let _=`<fig-input-text
|
|
64
|
+
type="text"
|
|
65
|
+
placeholder="000000"
|
|
66
|
+
value="${this.hexOpaque.slice(1).toUpperCase()}"${Z}>
|
|
67
|
+
</fig-input-text>`;if(J)_+=`<fig-tooltip text="Opacity">
|
|
68
|
+
<fig-input-number
|
|
69
|
+
placeholder="##"
|
|
70
|
+
min="0"
|
|
71
|
+
max="100"
|
|
72
|
+
value="${this.#Q}"
|
|
73
|
+
units="%"${Z}>
|
|
74
|
+
</fig-input-number>
|
|
75
|
+
</fig-tooltip>`;let q="";q=`<fig-swatch background="${this.hexOpaque}" alpha="${this.rgba.a}"${Z}></fig-swatch>`,$=`<div class="input-combo">
|
|
76
|
+
${q}
|
|
77
|
+
${_}
|
|
78
|
+
</div>`}else $=`<fig-swatch background="${this.hexOpaque}" alpha="${this.rgba.a}"${Z}></fig-swatch>`;if(this.innerHTML=$,this.#J=this.querySelector("fig-swatch"),this.#Z=this.querySelector("fig-fill-picker"),this.#$=this.querySelector("fig-input-text:not([type=number])"),this.#j=this.querySelector("fig-input-number"),this.#h(),this.#$){let _=this.rgbAlphaToHex(this.rgba,1);if(this.#$.value=_.slice(1).toUpperCase(),this.#J)this.#J.background=_}this.#H()}#D(){if(!this.#Z)return;for(let[J,Q]of Object.entries(this.#B()))this.#Z.setAttribute(J,Q);if(this.#Z.setAttribute("mode","solid"),this.getAttribute("alpha")!=="false")this.#Z.removeAttribute("alpha");else this.#Z.setAttribute("alpha","false");if(A(this,"disabled"))this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");this.#Z.anchorElement=this,this.#Z.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.#Q}))}#C(){if(!t())return null;if(this.#Z?.isConnected)return this.#D(),this.#Z;let J=document.createElement("fig-fill-picker");return J.innerHTML="<span hidden></span>",J.addEventListener("input",this.#b.bind(this)),J.addEventListener("change",this.#V.bind(this)),this.appendChild(J),this.#Z=J,this.#D(),J}#S(){if(A(this,"disabled")||A(this,"swatch-disabled"))return!1;let J=this.#C();if(!J)return!1;return requestAnimationFrame(()=>J.open?.()),!0}#T(J){J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation?.()}#f(J){if(!t())return;if(A(this,"disabled")||A(this,"swatch-disabled"))return;if(this.#_=!0,this.#X=!0,this.#Y)clearTimeout(this.#Y);this.#Y=setTimeout(()=>{this.#X=!1,this.#_=!1,this.#Y=null},500),this.#T(J)}#A(J){if(!this.#X)return;if(this.#X=!1,this.#Y)clearTimeout(this.#Y),this.#Y=null;if(this.#T(J),this.#_)this.#_=!1,this.#S()}#k(J){if(J.key!=="Enter"&&J.key!==" ")return;if(!t())return;if(!this.#S())return;this.#T(J)}#E(J){let Q=J||"#D9D9D9";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),this.#Q=Q.length>7?(this.rgba.a*100).toFixed(0):100,this.style.setProperty("--alpha",this.rgba.a)}#I(J){J.stopPropagation();let Q=J.target.value.replace(/#/g,"");if(this.#E("#"+Q),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#j)this.#j.setAttribute("value",this.#Q);if(this.#J)this.#J.setAttribute("background",this.hexOpaque);this.#y()}#x(J){J.stopPropagation();let Q=Number(J.target.value)||0,$=Math.round(Q/100*255).toString(16).padStart(2,"0");if(this.#E(this.hexOpaque+$),this.#J)this.#J.setAttribute("alpha",this.rgba.a);if(this.#Z)this.#Z.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.#Q}));this.#y()}#V(J){J.stopPropagation(),this.#o()}focus(){if(this.#$){this.#$.focus();return}this.#J?.focus()}#g(){return this.getAttribute("aria-label")||"Color"}#h(){if(!this.hasAttribute("role"))this.setAttribute("role","group");if(this.#v)this.setAttribute("aria-disabled","true");else this.removeAttribute("aria-disabled");let J=this.getAttribute("aria-describedby"),Q=this.getAttribute("aria-invalid"),Z=this.getAttribute("aria-required"),$=this.getAttribute("aria-labelledby"),j=this.#g();if(this.#$){if(this.#$.setAttribute("aria-label",`${j} hex color`),J)this.#$.setAttribute("aria-describedby",J);else this.#$.removeAttribute("aria-describedby");if(Q)this.#$.setAttribute("aria-invalid",Q);else this.#$.removeAttribute("aria-invalid");if(Z)this.#$.setAttribute("aria-required",Z);else this.#$.removeAttribute("aria-required")}if(this.#j){if(this.#j.setAttribute("aria-label",`${j} opacity`),J)this.#j.setAttribute("aria-describedby",J);else this.#j.removeAttribute("aria-describedby");if(Q)this.#j.setAttribute("aria-invalid",Q);else this.#j.removeAttribute("aria-invalid");if(Z)this.#j.setAttribute("aria-required",Z);else this.#j.removeAttribute("aria-required")}if(!this.#$){let _=this.#J?.querySelector('input[type="color"]');if(!_)return;if($)_.setAttribute("aria-labelledby",$),_.removeAttribute("aria-label");else _.setAttribute("aria-label",j),_.removeAttribute("aria-labelledby");if(J)_.setAttribute("aria-describedby",J);else _.removeAttribute("aria-describedby")}}#w(J){if(J.stopPropagation(),this.#E(J.target.value),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());this.#y()}#b(J){J.stopPropagation();let Q=J.detail;if(Q&&Q.color){let Z=Q.color;if(Q.alpha!==void 0){let $=Math.round(Q.alpha*255).toString(16).padStart(2,"0");Z=Q.color+$}if(this.#E(Z),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#j&&Q.alpha!==void 0)this.#j.setAttribute("value",Math.round(Q.alpha*100));if(this.#J)this.#J.setAttribute("background",this.hexOpaque),this.#J.setAttribute("alpha",this.rgba.a);this.#y()}}#y(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,hex:this.hex,rgba:this.rgba}}))}#o(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,hex:this.hex,rgba:this.rgba}}))}static get observedAttributes(){return["value","style","mode","experimental","alpha","text","disabled","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"]}get mode(){return this.getAttribute("mode")}set mode(J){this.setAttribute("mode",J)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":if(this.#E(Z),this.#$)this.#$.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#J)this.#J.setAttribute("background",this.hexOpaque),this.#J.setAttribute("alpha",this.rgba.a);if(this.#Z)this.#Z.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.#Q}));if(this.#j)this.#j.setAttribute("value",this.#Q);break;case"mode":this.#D();break;case"alpha":case"text":if(this.isConnected)this.#P();break;case"disabled":this.#c();break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#h();break}}get#v(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#c(){let J=this.#v;for(let Q of[this.#J,this.#$,this.#j]){if(!Q)continue;if(J)Q.setAttribute("disabled","");else Q.removeAttribute("disabled")}if(this.#h(),this.#Z)this.#D()}rgbAlphaToHex({r:J,g:Q,b:Z},$=1){J=Math.max(0,Math.min(255,Math.round(J))),Q=Math.max(0,Math.min(255,Math.round(Q))),Z=Math.max(0,Math.min(255,Math.round(Z))),$=Math.max(0,Math.min(1,$));let j=J.toString(16).padStart(2,"0"),_=Q.toString(16).padStart(2,"0"),q=Z.toString(16).padStart(2,"0");if($===1)return`#${j}${_}${q}`.toUpperCase();let Y=Math.round($*255).toString(16).padStart(2,"0");return`#${j}${_}${q}${Y}`.toUpperCase()}convertToRGBA(J){let Q,Z,$,j=1;if(J.startsWith("#")){let _=J.slice(1);if(_.length===8)j=parseInt(_.slice(6),16)/255,_=_.slice(0,6);Q=parseInt(_.slice(0,2),16),Z=parseInt(_.slice(2,4),16),$=parseInt(_.slice(4,6),16)}else if(J.startsWith("rgba")||J.startsWith("rgb")){let _=J.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_)Q=parseInt(_[1]),Z=parseInt(_[2]),$=parseInt(_[3]),j=_[4]?parseFloat(_[4]):1}else if(J.startsWith("hsla")||J.startsWith("hsl")){let _=J.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_){let q=parseInt(_[1])/360,X=parseInt(_[2])/100,Y=parseInt(_[3])/100;if(j=_[4]?parseFloat(_[4]):1,X===0)Q=Z=$=Y;else{let K=(U,W,B)=>{if(B<0)B+=1;if(B>1)B-=1;if(B<0.16666666666666666)return U+(W-U)*6*B;if(B<0.5)return W;if(B<0.6666666666666666)return U+(W-U)*(0.6666666666666666-B)*6;return U},N=Y<0.5?Y*(1+X):Y+X-Y*X,G=2*Y-N;Q=K(G,N,q+0.3333333333333333),Z=K(G,N,q),$=K(G,N,q-0.3333333333333333)}Q=Math.round(Q*255),Z=Math.round(Z*255),$=Math.round($*255)}}else return null;return{r:Q,g:Z,b:$,a:j}}}customElements.define("fig-input-color",K1);var R5=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],D5=["shorter","longer","increasing","decreasing"],G1=new Set(["oklch","hsl"]);function q0(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase();if(!R5.includes(Z))Z="srgb";Q.interpolationSpace=Z;let $=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=D5.includes($)?$:"shorter",Q}function N1(J){let Q=q0(J),Z={...Q,interpolationSpace:Q.interpolationSpace};if(G1.has(Q.interpolationSpace))Z.hueInterpolation=Q.hueInterpolation;else delete Z.hueInterpolation;return Z}function U1(J){let Q=q0(J);if(Q.interpolationSpace==="srgb")return"";if(G1.has(Q.interpolationSpace))return`in ${Q.interpolationSpace} ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}function n(J){let Q=J.replace(/^#/,"");return{r:parseInt(Q.substring(0,2),16),g:parseInt(Q.substring(2,4),16),b:parseInt(Q.substring(4,6),16)}}function s(J){let Q=J/255;return Q<=0.04045?Q/12.92:Math.pow((Q+0.055)/1.055,2.4)}function e(J){let Q=J<=0.0031308?12.92*J:1.055*Math.pow(J,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,Q))*255)}function j0(J,Q,Z){let $=s(J),j=s(Q),_=s(Z),q=Math.cbrt(0.4122214708*$+0.5363325363*j+0.0514459929*_),X=Math.cbrt(0.2119034982*$+0.6806995451*j+0.1073969566*_),Y=Math.cbrt(0.0883024619*$+0.2817188376*j+0.6299787005*_);return{l:0.2104542553*q+0.793617785*X-0.0040720468*Y,a:1.9779984951*q-2.428592205*X+0.4505937099*Y,b:0.0259040371*q+0.7827717662*X-0.808675766*Y}}function c0(J,Q,Z){let $=J+0.3963377774*Q+0.2158037573*Z,j=J-0.1055613458*Q-0.0638541728*Z,_=J-0.0894841775*Q-1.291485548*Z,q=$*$*$,X=j*j*j,Y=_*_*_;return{r:e(4.0767416621*q-3.3077115913*X+0.2309699292*Y),g:e(-1.2684380046*q+2.6097574011*X-0.3413193965*Y),b:e(-0.0041960863*q-0.7034186147*X+1.707614701*Y)}}function T0(J,Q,Z){return{l:J,c:Math.sqrt(Q*Q+Z*Z),h:Math.atan2(Z,Q)*180/Math.PI}}function A5(J,Q,Z){let $=Z*Math.PI/180;return{l:J,a:Q*Math.cos($),b:Q*Math.sin($)}}function p0(J,Q,Z,$){let j=(J%360+360)%360,q=(Q%360+360)%360-j;switch($){case"longer":if(q>0&&q<180)q-=360;else if(q<0&&q>-180)q+=360;else if(q===0)q=0;break;case"increasing":if(q<0)q+=360;break;case"decreasing":if(q>0)q-=360;break;default:if(q>180)q-=360;else if(q<-180)q+=360;break}return((j+q*Z)%360+360)%360}function T5(J,Q,Z,$){let j=[...J].sort((F,z)=>F.position-z.position),_=Q*100;if(j.length===0)return"#888888";if(_<=j[0].position)return j[0].color;if(_>=j[j.length-1].position)return j[j.length-1].color;let q=0;while(q<j.length-1&&j[q+1].position<_)q++;let X=j[q],Y=j[q+1],K=Y.position-X.position,N=K>0?(_-X.position)/K:0,G=n(X.color),U=n(Y.color),W,B,L,H=Z||"oklab";if(H==="srgb-linear"){let F=s(G.r),z=s(G.g),O=s(G.b),T=s(U.r),P=s(U.g),C=s(U.b);W=e(F+(T-F)*N),B=e(z+(P-z)*N),L=e(O+(C-O)*N)}else if(H==="oklch"){let F=j0(G.r,G.g,G.b),z=j0(U.r,U.g,U.b),O=T0(F.l,F.a,F.b),T=T0(z.l,z.a,z.b),P=O.l+(T.l-O.l)*N,C=O.c+(T.c-O.c)*N,I=p0(O.h,T.h,N,$||"shorter"),E=A5(P,C,I),h=c0(E.l,E.a,E.b);W=h.r,B=h.g,L=h.b}else if(H==="hsl"){let F=P0(G.r,G.g,G.b),z=P0(U.r,U.g,U.b),O=p0(F.h,z.h,N,$||"shorter"),T=F.s+(z.s-F.s)*N,P=F.l+(z.l-F.l)*N,C=P5(O,T,P);W=C[0],B=C[1],L=C[2]}else if(H==="srgb")W=Math.round(G.r+(U.r-G.r)*N),B=Math.round(G.g+(U.g-G.g)*N),L=Math.round(G.b+(U.b-G.b)*N);else{let F=j0(G.r,G.g,G.b),z=j0(U.r,U.g,U.b),O=F.l+(z.l-F.l)*N,T=F.a+(z.a-F.a)*N,P=F.b+(z.b-F.b)*N,C=c0(O,T,P);W=C.r,B=C.g,L=C.b}return`#${W.toString(16).padStart(2,"0")}${B.toString(16).padStart(2,"0")}${L.toString(16).padStart(2,"0")}`.toUpperCase()}function P0(J,Q,Z){let $=J/255,j=Q/255,_=Z/255,q=Math.max($,j,_),X=Math.min($,j,_),Y=(q+X)/2;if(q===X)return{h:0,s:0,l:Y*100};let K=q-X,N=Y>0.5?K/(2-q-X):K/(q+X),G;switch(q){case $:G=((j-_)/K+(j<_?6:0))/6;break;case j:G=((_-$)/K+2)/6;break;default:G=(($-j)/K+4)/6;break}return{h:G*360,s:N*100,l:Y*100}}function P5(J,Q,Z){Q/=100,Z/=100;let $=(1-Math.abs(2*Z-1))*Q,j=$*(1-Math.abs(J/60%2-1)),_=Z-$/2,q,X,Y;if(J<60)q=$,X=j,Y=0;else if(J<120)q=j,X=$,Y=0;else if(J<180)q=0,X=$,Y=j;else if(J<240)q=0,X=j,Y=$;else if(J<300)q=j,X=0,Y=$;else q=$,X=0,Y=j;return[Math.round((q+_)*255),Math.round((X+_)*255),Math.round((Y+_)*255)]}class W1 extends HTMLElement{#Q="solid";#J;#Z;#$;#j={color:"#D9D9D9",alpha:1};#X={type:"linear",angle:180,interpolationSpace:"srgb",hueInterpolation:"shorter",opacity:1,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#_={url:null,scaleMode:"fill",scale:50,opacity:1};#Y={url:null,scaleMode:"fill",opacity:1};#q={snapshot:null,opacity:1};constructor(){super()}static get observedAttributes(){return["value","disabled","mode","experimental","alpha","aria-label","aria-describedby","aria-invalid","aria-required"]}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","group");this.#K(),this.#B()}disconnectedCallback(){this.#J=null,this.#Z=null,this.#$=null}#K(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(Q.type)this.#Q=Q.type;switch(this.#Q){case"solid":if(Q.color)this.#j.color=Q.color;if(Q.alpha!==void 0)this.#j.alpha=Q.alpha;if(Q.opacity!==void 0)this.#j.alpha=Q.opacity/100;break;case"gradient":if(Q.gradient)this.#X=q0({...this.#X,...Q.gradient}),this.#X.opacity=this.#U(Q.gradient.opacity??Q.opacity??Q.alpha,this.#X.opacity??1);else if(Q.opacity!==void 0||Q.alpha!==void 0)this.#X.opacity=this.#U(Q.opacity??Q.alpha,this.#X.opacity??1);break;case"image":if(Q.image)this.#_={...this.#_,...Q.image};break;case"video":if(Q.video)this.#Y={...this.#Y,...Q.video};break;case"webcam":if(Q.webcam)this.#q={...this.#q,...Q.webcam};if(Q.opacity!==void 0)this.#q.opacity=Q.opacity;break}}catch(Q){if(J.startsWith("#")){if(this.#Q="solid",this.#j.color=J.slice(0,7),J.length>7){let Z=J.slice(7,9);this.#j.alpha=parseInt(Z,16)/255}}}}#G(){let J={},Q=this.getAttribute("mode");if(Q)J.mode=Q;let Z=this.getAttribute("experimental");if(Z)J.experimental=Z;let $=this.getAttribute("alpha");if($)J.alpha=$;for(let{name:j,value:_}of this.attributes)if(j.startsWith("picker-")&&j!=="picker-anchor")J[j.slice(7)]=_;if(!J["dialog-position"])J["dialog-position"]="left";return Object.entries(J).map(([j,_])=>`${j}="${b(_)}"`).join(" ")}#N(){switch(this.#Q){case"solid":return this.#j.color;case"gradient":{let Q=[...this.#X.stops].sort(($,j)=>$.position-j.position).map(($)=>{let j=($.opacity??100)/100;if(j>=1)return`${$.color} ${$.position}%`;let{r:_,g:q,b:X}=n($.color);return`rgba(${_}, ${q}, ${X}, ${j}) ${$.position}%`}).join(", "),Z=U1(this.#X);return`linear-gradient(${this.#X.angle}deg${Z?` ${Z}`:""}, ${Q})`}case"image":return this.#_.url?`url(${this.#_.url})`:"#D9D9D9";default:return"#D9D9D9"}}#U(J,Q=1){if(J===void 0||J===null||J==="")return Q;let Z=Number(J);if(!Number.isFinite(Z))return Q;if(Z>1)return Math.max(0,Math.min(1,Z/100));return Math.max(0,Math.min(1,Z))}#L(){switch(this.#Q){case"solid":return this.#j.alpha;case"gradient":return this.#X.opacity??1;case"image":return this.#_.opacity??1;case"video":return this.#Y.opacity??1;case"webcam":return this.#q.opacity??1;default:return 1}}#W(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.setAttribute("aria-disabled",J?"true":"false");for(let Q of[this.#J,this.#Z,this.#$]){if(!Q)continue;if(J)Q.setAttribute("disabled","");else Q.removeAttribute("disabled")}}#M(){if(!this.hasAttribute("role"))this.setAttribute("role","group");this.#W();let J=this.getAttribute("aria-label")||"Fill",Q=this.getAttribute("aria-describedby"),Z=this.getAttribute("aria-invalid"),$=this.getAttribute("aria-required"),j=(_,q)=>{if(!_)return;if(_.setAttribute("aria-label",q),Q)_.setAttribute("aria-describedby",Q);else _.removeAttribute("aria-describedby");if(Z)_.setAttribute("aria-invalid",Z);else _.removeAttribute("aria-invalid");if($)_.setAttribute("aria-required",$);else _.removeAttribute("aria-required")};j(this.#J,`${J} picker`),j(this.#$,`${J} hex color`),j(this.#Z,`${J} opacity`)}#B(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=JSON.stringify(this.value),Z=this.getAttribute("alpha")!=="false",$=(q)=>Z?`<fig-tooltip text="Opacity">
|
|
79
|
+
<fig-input-number
|
|
80
|
+
class="fig-input-fill-opacity"
|
|
81
|
+
placeholder="##"
|
|
82
|
+
min="0"
|
|
83
|
+
max="100"
|
|
84
|
+
value="${q}"
|
|
85
|
+
units="%"
|
|
86
|
+
${J?"disabled":""}>
|
|
87
|
+
</fig-input-number>
|
|
88
|
+
</fig-tooltip>`:"",j="";switch(this.#Q){case"solid":j=`
|
|
89
|
+
<fig-input-text
|
|
90
|
+
type="text"
|
|
91
|
+
class="fig-input-fill-hex"
|
|
92
|
+
placeholder="000000"
|
|
93
|
+
value="${b(this.#j.color.slice(1).toUpperCase())}"
|
|
94
|
+
${J?"disabled":""}>
|
|
95
|
+
</fig-input-text>
|
|
96
|
+
${$(Math.round(this.#j.alpha*100))}`;break;case"gradient":{let q=this.#X.type.charAt(0).toUpperCase()+this.#X.type.slice(1);j=`
|
|
97
|
+
<label class="fig-input-fill-label">${b(q)}</label>
|
|
98
|
+
${$(Math.round((this.#X.opacity??1)*100))}`;break}case"image":j=`
|
|
99
|
+
<label class="fig-input-fill-label">Image</label>
|
|
100
|
+
${$(Math.round((this.#_.opacity??1)*100))}`;break;case"video":j=`
|
|
101
|
+
<label class="fig-input-fill-label">Video</label>
|
|
102
|
+
${$(Math.round((this.#Y.opacity??1)*100))}`;break;case"webcam":j=`
|
|
103
|
+
<label class="fig-input-fill-label">Webcam</label>
|
|
104
|
+
${$(Math.round((this.#q.opacity??1)*100))}`;break}let _=this.#G();this.innerHTML=`
|
|
105
|
+
<div class="input-combo">
|
|
106
|
+
<fig-fill-picker ${_} value='${b(Q)}' ${J?"disabled":""}>
|
|
107
|
+
<fig-swatch background="${b(this.#N())}" alpha="${this.#L()}"${J?" disabled":""}></fig-swatch>
|
|
108
|
+
</fig-fill-picker>
|
|
109
|
+
${j}
|
|
110
|
+
</div>`,this.#O()}#O(){this.#J=this.querySelector("fig-fill-picker"),this.#Z=this.querySelector(".fig-input-fill-opacity"),this.#$=this.querySelector(".fig-input-fill-hex");let J=this.querySelector(".fig-input-fill-label");if(this.#M(),J&&this.#J)J.addEventListener("click",()=>{let Q=this.#J.querySelector("fig-swatch");if(Q)Q.click()});if(this.#J){let Q=this.getAttribute("picker-anchor");if(!Q||Q==="self")this.#J.anchorElement=this;else{let Z=null;try{Z=document.querySelector(Q)}catch{}if(Z)this.#J.anchorElement=Z}this.#J.addEventListener("input",(Z)=>{Z.stopPropagation();let $=Z.detail;if(!$)return;let j=$.type,_=j!==this.#Q;switch(this.#Q=j,j){case"solid":this.#j.color=$.color,this.#j.alpha=$.alpha;break;case"gradient":if($.gradient)this.#X=q0({...this.#X,...$.gradient});break;case"image":if($.image)this.#_=$.image;break;case"video":if($.video)this.#Y=$.video;break}if(_)this.#F();else this.#z();this.#P()}),this.#J.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#D()})}if(this.#$)this.#$.addEventListener("input",(Q)=>{Q.stopPropagation();let Z="#"+Q.target.value.replace("#","");this.#j.color=Z,this.#R(),this.#P()}),this.#$.addEventListener("change",(Q)=>{Q.stopPropagation(),this.#D()});if(this.#Z)this.#Z.addEventListener("input",(Q)=>{Q.stopPropagation();let Z=parseFloat(Q.target.value),j=(isNaN(Z)?100:Z)/100;switch(this.#Q){case"solid":this.#j.alpha=j;break;case"gradient":this.#X.opacity=j;break;case"image":this.#_.opacity=j;break;case"video":this.#Y.opacity=j;break;case"webcam":this.#q.opacity=j;break}this.#R(),this.#H(j),this.#P()}),this.#Z.addEventListener("change",(Q)=>{Q.stopPropagation(),this.#D()})}#z(){switch(this.#Q){case"solid":if(this.#$)this.#$.setAttribute("value",this.#j.color.slice(1).toUpperCase());if(this.#Z)this.#Z.setAttribute("value",Math.round(this.#j.alpha*100));break;case"gradient":{let J=this.querySelector(".fig-input-fill-label");if(J){let Q=this.#X.type.charAt(0).toUpperCase()+this.#X.type.slice(1);J.textContent=Q}if(this.#Z)this.#Z.setAttribute("value",Math.round((this.#X.opacity??1)*100));break}case"image":if(this.#Z)this.#Z.setAttribute("value",Math.round((this.#_.opacity??1)*100));break;case"video":if(this.#Z)this.#Z.setAttribute("value",Math.round((this.#Y.opacity??1)*100));break;case"webcam":if(this.#Z)this.#Z.setAttribute("value",Math.round((this.#q.opacity??1)*100));break}}#F(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=this.getAttribute("alpha")!=="false",Z=this.querySelector(".input-combo");if(!Z)return;let $=Z.querySelector(".fig-input-fill-label"),j=Z.querySelector(".fig-input-fill-hex"),_=Z.querySelector(".fig-input-fill-opacity"),q=Z.querySelectorAll("fig-tooltip");$?.remove(),j?.remove(),q.forEach((K)=>K.remove());let X="";switch(this.#Q){case"solid":X=`
|
|
111
|
+
<fig-input-text
|
|
112
|
+
type="text"
|
|
113
|
+
class="fig-input-fill-hex"
|
|
114
|
+
placeholder="000000"
|
|
115
|
+
value="${b(this.#j.color.slice(1).toUpperCase())}"
|
|
116
|
+
${J?"disabled":""}>
|
|
117
|
+
</fig-input-text>
|
|
118
|
+
${Q?`<fig-tooltip text="Opacity">
|
|
119
|
+
<fig-input-number
|
|
120
|
+
class="fig-input-fill-opacity"
|
|
121
|
+
placeholder="##"
|
|
122
|
+
min="0"
|
|
123
|
+
max="100"
|
|
124
|
+
value="${Math.round(this.#j.alpha*100)}"
|
|
125
|
+
units="%"
|
|
126
|
+
${J?"disabled":""}>
|
|
127
|
+
</fig-input-number>
|
|
128
|
+
</fig-tooltip>`:""}`;break;case"gradient":{let K=this.#X.type.charAt(0).toUpperCase()+this.#X.type.slice(1);X=`
|
|
129
|
+
<label class="fig-input-fill-label">${b(K)}</label>
|
|
130
|
+
${Q?`<fig-tooltip text="Opacity">
|
|
131
|
+
<fig-input-number
|
|
132
|
+
class="fig-input-fill-opacity"
|
|
133
|
+
placeholder="##"
|
|
134
|
+
min="0"
|
|
135
|
+
max="100"
|
|
136
|
+
value="${Math.round((this.#X.opacity??1)*100)}"
|
|
137
|
+
units="%"
|
|
138
|
+
${J?"disabled":""}>
|
|
139
|
+
</fig-input-number>
|
|
140
|
+
</fig-tooltip>`:""}`;break}case"image":X=`
|
|
141
|
+
<label class="fig-input-fill-label">Image</label>
|
|
142
|
+
${Q?`<fig-tooltip text="Opacity">
|
|
143
|
+
<fig-input-number
|
|
144
|
+
class="fig-input-fill-opacity"
|
|
145
|
+
placeholder="##"
|
|
146
|
+
min="0"
|
|
147
|
+
max="100"
|
|
148
|
+
value="${Math.round((this.#_.opacity??1)*100)}"
|
|
149
|
+
units="%"
|
|
150
|
+
${J?"disabled":""}>
|
|
151
|
+
</fig-input-number>
|
|
152
|
+
</fig-tooltip>`:""}`;break;case"video":X=`
|
|
153
|
+
<label class="fig-input-fill-label">Video</label>
|
|
154
|
+
${Q?`<fig-tooltip text="Opacity">
|
|
155
|
+
<fig-input-number
|
|
156
|
+
class="fig-input-fill-opacity"
|
|
157
|
+
placeholder="##"
|
|
158
|
+
min="0"
|
|
159
|
+
max="100"
|
|
160
|
+
value="${Math.round((this.#Y.opacity??1)*100)}"
|
|
161
|
+
units="%"
|
|
162
|
+
${J?"disabled":""}>
|
|
163
|
+
</fig-input-number>
|
|
164
|
+
</fig-tooltip>`:""}`;break;case"webcam":X=`
|
|
165
|
+
<label class="fig-input-fill-label">Webcam</label>
|
|
166
|
+
${Q?`<fig-tooltip text="Opacity">
|
|
167
|
+
<fig-input-number
|
|
168
|
+
class="fig-input-fill-opacity"
|
|
169
|
+
placeholder="##"
|
|
170
|
+
min="0"
|
|
171
|
+
max="100"
|
|
172
|
+
value="${Math.round((this.#q.opacity??1)*100)}"
|
|
173
|
+
units="%"
|
|
174
|
+
${J?"disabled":""}>
|
|
175
|
+
</fig-input-number>
|
|
176
|
+
</fig-tooltip>`:""}`;break}Z.insertAdjacentHTML("beforeend",X),this.#Z=this.querySelector(".fig-input-fill-opacity"),this.#$=this.querySelector(".fig-input-fill-hex");let Y=this.querySelector(".fig-input-fill-label");if(this.#M(),Y&&this.#J)Y.addEventListener("click",()=>{let K=this.#J.querySelector("fig-swatch");if(K)K.click()});if(this.#$)this.#$.addEventListener("input",(K)=>{K.stopPropagation();let N="#"+K.target.value.replace("#","");this.#j.color=N,this.#R(),this.#P()}),this.#$.addEventListener("change",(K)=>{K.stopPropagation(),this.#D()});if(this.#Z)this.#Z.addEventListener("input",(K)=>{K.stopPropagation();let N=parseFloat(K.target.value),U=(isNaN(N)?100:N)/100;switch(this.#Q){case"solid":this.#j.alpha=U;break;case"gradient":this.#X.opacity=U;break;case"image":this.#_.opacity=U;break;case"video":this.#Y.opacity=U;break;case"webcam":this.#q.opacity=U;break}this.#R(),this.#H(U),this.#P()}),this.#Z.addEventListener("change",(K)=>{K.stopPropagation(),this.#D()})}#R(){if(this.#J)this.#J.setAttribute("value",JSON.stringify(this.value))}#H(J){if(this.#J){let Q=this.#J.querySelector("fig-swatch");if(Q)Q.setAttribute("alpha",J)}}#P(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#D(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#j.color,alpha:this.#j.alpha,opacity:Math.round(this.#j.alpha*100)};case"gradient":return{type:"gradient",gradient:N1(this.#X)};case"image":return{type:"image",image:{...this.#_}};case"video":return{type:"video",video:{...this.#Y}};case"webcam":return{type:"webcam",webcam:{...this.#q}};default:return{type:this.#Q}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":let $=this.#Q;if(this.#K(),this.#J)if(this.#Q!==$)this.#B();else this.#R(),this.#z();break;case"disabled":this.#W();break;case"mode":case"experimental":if(this.#J)if(Z)this.#J.setAttribute(J,Z);else this.#J.removeAttribute(J);break;case"alpha":if(this.isConnected)this.#B();break;case"aria-label":case"aria-describedby":case"aria-invalid":case"aria-required":this.#M();break}}}customElements.define("fig-input-fill",W1);class L1 extends HTMLElement{#Q=[];#J=[];#Z=[];#$=null;#j=this.#q.bind(this);static get observedAttributes(){return["value","disabled","min","max","open","fixed"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","");else this.removeAttribute("open");if(Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}get#X(){return this.hasAttribute("fixed")&&this.getAttribute("fixed")!=="false"}get#_(){let J=parseInt(this.getAttribute("min"));return isNaN(J)?2:J}get#Y(){let J=parseInt(this.getAttribute("max"));return isNaN(J)?8:J}connectedCallback(){if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.removeEventListener("keydown",this.#j),this.addEventListener("keydown",this.#j),this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{if(this.#$=null,!this.isConnected)return;this.#K(),this.#G()})}disconnectedCallback(){if(this.#$)cancelAnimationFrame(this.#$),this.#$=null;this.removeEventListener("keydown",this.#j),this.#J=[],this.#Z=[]}#q(J){if(J.key!=="Enter"&&J.key!==" ")return;if(J.target!==this&&!J.target?.closest?.(".palette-colors-inline"))return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;J.preventDefault(),J.stopPropagation(),this.open=!0,this.querySelector(".palette-colors-inline")?.setAttribute("aria-expanded","true")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":this.#K(),this.#O();break;case"disabled":this.#z();break;case"min":case"max":case"fixed":this.#G();break;case"open":break}}#K(){let J=this.getAttribute("value");if(!J){this.#Q=[];return}let Q=J.trim();try{let Z=JSON.parse(Q);if(Array.isArray(Z)){this.#Q=Z.map(($)=>{if(typeof $==="string")return{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1};if($&&typeof $==="object")return{color:$.color||"#D9D9D9",alpha:$.alpha!==void 0?$.alpha:$.opacity!==void 0?$.opacity/100:1};return{color:"#D9D9D9",alpha:1}});return}}catch(Z){}if(Q.includes(",")){this.#Q=Q.split(",").map((Z)=>{let $=Z.trim();return{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1}});return}if(Q.startsWith("#")){this.#Q=[{color:Q.slice(0,7),alpha:Q.length>7?parseInt(Q.slice(7,9),16)/255:1}];return}this.#Q=[]}get value(){return this.#Q.map((J)=>({...J}))}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}#G(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.innerHTML="",this.#J=[],this.#Z=[];let Q=document.createElement("div");Q.className="palette-colors-inline",Q.setAttribute("role","button"),Q.setAttribute("aria-expanded",String(this.open)),Q.setAttribute("aria-label","Edit palette colors");let Z=()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.open=!0,Q.setAttribute("aria-expanded","true")};Q.addEventListener("click",Z),Q.addEventListener("keydown",(_)=>{if(_.key!=="Enter"&&_.key!==" ")return;_.preventDefault(),_.stopPropagation(),Z()});let $=document.createElement("div");if($.className="palette-colors",this.#Q.forEach((_,q)=>{$.appendChild(this.#N(_,q,J,{inline:!0}))}),Q.appendChild($),this.appendChild(Q),!this.#X)this.#W(J,this);let j=document.createElement("div");j.className="palette-colors-expanded",this.#Q.forEach((_,q)=>{if(j.appendChild(this.#N(_,q,J)),!this.#X)j.appendChild(this.#U(q,J))}),this.appendChild(j)}#N(J,Q,Z,{inline:$=!1}={}){let j=J.alpha<1?J.color+Math.round(J.alpha*255).toString(16).padStart(2,"0"):J.color,_=document.createElement("fig-input-color");if(_.setAttribute("value",j),$)_.setAttribute("text","false"),_.setAttribute("alpha","true"),_.setAttribute("swatch-disabled","");else _.setAttribute("text","true"),_.setAttribute("alpha","true"),_.setAttribute("full","");if(Z)_.setAttribute("disabled","");let q=$?this.#Z:this.#J,X=(Y)=>{Y.stopPropagation();let K=Y.currentTarget;this.#Q[Q]={color:K.hexOpaque||this.#Q[Q].color,alpha:K.rgba?K.rgba.a:this.#Q[Q].alpha};let N=q[Q];if(N){let G=this.#Q[Q],U=G.alpha<1?G.color+Math.round(G.alpha*255).toString(16).padStart(2,"0"):G.color;N.setAttribute("value",U)}};if(_.addEventListener("input",(Y)=>{X(Y),this.#R()}),_.addEventListener("change",(Y)=>{X(Y),this.#H()}),$)this.#J.push(_);else this.#Z.push(_);return _}#U(J,Q){let Z=document.createElement("fig-button");if(Z.setAttribute("variant","ghost"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Remove color"),Z.className="palette-remove-btn",Q||this.#Q.length<=this.#_)Z.setAttribute("disabled","");Z.appendChild(d("minus")),Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;this.#L(J)});let $=document.createElement("fig-tooltip");return $.setAttribute("text","Remove color"),$.appendChild(Z),$}#L(J){if(this.#X)return;if(J<0||J>=this.#Q.length)return;if(this.#Q.length<=this.#_)return;this.#Q.splice(J,1),this.#J=[],this.#Z=[],this.#G(),this.#H()}#W(J,Q=this){let Z=this.#Q.length>=this.#Y,$=document.createElement("fig-button");if($.setAttribute("variant","ghost"),$.setAttribute("icon","true"),$.setAttribute("aria-label","Add color"),$.className="palette-add-btn",J||Z)$.setAttribute("disabled","");$.appendChild(d("add")),$.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#Q.length>=this.#Y)return;this.open=!0,this.#M({color:"#D9D9D9",alpha:1})});let j=document.createElement("fig-tooltip");j.setAttribute("text","Add color"),j.appendChild($),Q.appendChild(j)}#M(J){if(this.#X)return;this.#Q.push(J);let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Z=this.#Q.length-1,$=this.#N(J,Z,Q,{inline:!0}),j=this.querySelector(".palette-colors");if(j)j.appendChild($);let _=this.#N(J,Z,Q),q=this.querySelector(".palette-colors-expanded");if(q)q.appendChild(_),q.appendChild(this.#U(Z,Q));if(this.#Q.length>=this.#Y){let X=this.querySelector(".palette-add-btn");if(X)X.setAttribute("disabled","")}this.#F(Q),this.#H()}#B(J){let Q=this.#Q[J];if(!Q)return;let Z=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,$=this.#J[J];if($)$.setAttribute("value",Z);let j=this.#Z[J];if(j)j.setAttribute("value",Z)}#O(){if(this.#J.length!==this.#Q.length){this.#G();return}this.#Q.forEach((J,Q)=>{this.#B(Q)})}#z(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#J,...this.#Z].forEach((Z)=>{if(J)Z.setAttribute("disabled","");else Z.removeAttribute("disabled")});let Q=this.querySelector(".palette-add-btn");if(Q)if(J||this.#Q.length>=this.#Y)Q.setAttribute("disabled","");else Q.removeAttribute("disabled");this.#F(J)}#F(J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){let Q=J||this.#Q.length<=this.#_;this.querySelectorAll(".palette-remove-btn").forEach((Z)=>{if(Q)Z.setAttribute("disabled","");else Z.removeAttribute("disabled")})}#R(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#H(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}customElements.define("fig-input-palette",L1);class _0 extends HTMLElement{static SHIFT_SNAP=5;#Q;#J;#Z=!1;#$=null;#j=null;#X=null;#_={type:"linear",angle:90,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled","edit","mode","size"]}get#Y(){let J=this.getAttribute("edit");if(J==="false")return"false";if(J==="picker")return"picker";return"true"}get#q(){return this.#Y==="true"}get#K(){return this.getAttribute("mode")==="tip"?"tip":"handle"}#G(){if(!this.#J)return null;return this.#J.querySelector("fig-handle:not(.fig-input-gradient-ghost):not([disabled])")}#N(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"){this.setAttribute("tabindex","-1");return}this.setAttribute("tabindex",this.#q?"-1":"0")}#U(J){let Q=q0(J);return{...Q,type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):90,centerX:Number.isFinite(Number(Q.centerX))?Number(Q.centerX):50,centerY:Number.isFinite(Number(Q.centerY))?Number(Q.centerY):50}}connectedCallback(){if(this.#M(),this.#D(),this.removeEventListener("keydown",this.#W),this.addEventListener("keydown",this.#W),this.#q)document.addEventListener("keydown",this.#L)}disconnectedCallback(){if(document.removeEventListener("keydown",this.#L),this.removeEventListener("keydown",this.#W),this.#j)this.#j.disconnect(),this.#j=null;if(this.#X!==null)cancelAnimationFrame(this.#X),this.#X=null;clearTimeout(this.#$),this.removeEventListener("pointerenter",this.#k),this.removeEventListener("pointermove",this.#I),this.removeEventListener("pointerleave",this.#E),this.removeEventListener("click",this.#g),this.removeEventListener("dblclick",this.#V)}#L=(J)=>{let Q=document.activeElement;if(!(Q instanceof Node)||!this.contains(Q))return;let Z=Q&&(Q.tagName==="INPUT"||Q.tagName==="TEXTAREA"||Q.isContentEditable);if(!this.#J)return;if(J.key==="Tab"&&!Z){let _=this.#J.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!_)return;J.preventDefault();let q=[...this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],X=q.indexOf(_),Y=J.shiftKey?(X-1+q.length)%q.length:(X+1)%q.length;_.deselect(),q[Y].select();return}if((J.key==="ArrowLeft"||J.key==="ArrowRight")&&!Z){let _=this.#J.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!_)return;let q=parseInt(_.dataset.stopIndex,10);if(isNaN(q)||!this.#_.stops[q])return;J.preventDefault();let X=(J.key==="ArrowRight"?1:-1)*(J.shiftKey?_0.SHIFT_SNAP:1),Y=this.#_.stops[q];Y.position=Math.max(0,Math.min(100,Y.position+X)),_.setAttribute("value",`${Y.position}% 50%`);let K=_.closest("fig-tooltip");if(K)K.text=`${Math.round(Y.position)}%`,K.setAttribute("show","true"),K.showPopup(),_.hideColorTip(),clearTimeout(this.#$),this.#$=setTimeout(()=>{K.removeAttribute("show"),_.showColorTip()},600);this.#c(),this.#m(),this.#u();return}if(J.key!=="Delete"&&J.key!=="Backspace")return;if(Z)return;if(this.#_.stops.length<=2)return;let $=this.#J.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!$)return;let j=parseInt($.dataset.stopIndex,10);if(isNaN(j)||!this.#_.stops[j])return;J.preventDefault(),$.removeAttribute("selected"),this.#_.stops.splice(j,1),this.#b(),this.#c(),this.#m(),this.#u()};#W=(J)=>{if(this.#Y!=="picker")return;if(J.key!=="Enter"&&J.key!==" ")return;if(J.altKey||J.ctrlKey||J.metaKey)return;if(A(this,"disabled"))return;let Q=this.querySelector("fig-fill-picker");if(!Q||typeof Q.open!=="function")return;J.preventDefault(),Q.open()};#M(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(Q?.type==="gradient"&&Q.gradient){this.#_=this.#U({...this.#_,...Q.gradient});return}if(Q?.gradient)this.#_=this.#U({...this.#_,...Q.gradient})}catch(Q){}}#B(){let J=this.#U(this.#_),Z=[...J.stops].sort((_,q)=>_.position-q.position).map((_)=>{let q=(_.opacity??100)/100;if(q>=1)return`${_.color} ${_.position}%`;let{r:X,g:Y,b:K}=n(_.color);return`rgba(${X}, ${Y}, ${K}, ${q}) ${_.position}%`}).join(", "),$=U1(J),j=$?` ${$}`:"";if(this.#Y==="true")return`linear-gradient(to right${j}, ${Z})`;if(J.type==="radial")return`radial-gradient(circle at ${J.centerX}% ${J.centerY}%${j}, ${Z})`;if(J.type==="angular")return`conic-gradient(from ${J.angle}deg${j}, ${Z})`;return`linear-gradient(${J.angle}deg${j}, ${Z})`}#O(J){let Q=(J.opacity??100)/100;if(Q>=1)return J.color;let{r:Z,g:$,b:j}=n(J.color);return`rgba(${Z}, ${$}, ${j}, ${Q})`}#z(){let J=this.getAttribute("size");return J?` size="${J}"`:""}#F(){if(!this.#Q)return;let J=this.getAttribute("size");if(J)this.#Q.setAttribute("size",J);else this.#Q.removeAttribute("size")}#R(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=this.#K==="tip"?' tip="color"':"";return this.#_.stops.map((Z,$)=>`<fig-tooltip action="manual" text="${Math.round(Z.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color"${Q} color="${this.#O(Z)}" value="${Z.position}% 50%" hit-area="4" data-stop-index="${$}"${J?" disabled":""}></fig-handle></fig-tooltip>`).join("")}#H=null;#P=!1;#D(){this.#j?.disconnect(),this.#j=null;let J=A(this,"disabled"),Q=this.#Y;if(Q==="picker"&&t()){let Z=this.getAttribute("experimental"),$=Z?` experimental="${Z}"`:"",j=JSON.stringify(this.value);this.innerHTML=`
|
|
177
|
+
<fig-fill-picker mode="gradient"${$} value='${j}'${J?" disabled":""}>
|
|
178
|
+
<fig-swatch background="${this.#B()}"${this.#z()}${J?" disabled":""}></fig-swatch>
|
|
179
|
+
</fig-fill-picker>`,this.#Q=this.querySelector("fig-swatch"),this.#J=null,this.#C(),this.#N();return}if(this.innerHTML=`
|
|
180
|
+
<fig-swatch background="${this.#B()}"${this.#z()}${J?" disabled":""}></fig-swatch>
|
|
181
|
+
${Q==="true"||Q==="picker"?`<div class="fig-input-gradient-track">${this.#R()}</div>`:""}`,this.#Q=this.querySelector("fig-swatch"),this.#J=this.querySelector(".fig-input-gradient-track"),Q==="true"||Q==="picker")this.#T(),this.#_0();this.#N()}#C(){let J=this.querySelector("fig-fill-picker");if(!J)return;J.anchorElement=this;let Q=(Z)=>{Z.stopPropagation();let $=Z.detail;if(!$?.gradient)return;this.#_=this.#U({...this.#_,...$.gradient}),this.#c()};J.addEventListener("input",(Z)=>{Q(Z),this.#m()}),J.addEventListener("change",(Z)=>{Q(Z),this.#u()})}#S(J){return T5(this.#_.stops,J,this.#_.interpolationSpace,this.#_.hueInterpolation)}#T(){if(!this.#J||this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let J=document.createElement("fig-handle");if(J.classList.add("fig-input-gradient-ghost"),J.setAttribute("type","color"),this.#K==="tip")J.setAttribute("tip","add");J.style.position="absolute",J.style.top="50%",J.style.transform="translate(-50%, -50%)",J.style.pointerEvents="none",J.style.opacity="0",J.style.transition="opacity 0.15s",this.#J.appendChild(J),this.#H=J,this.addEventListener("pointerenter",this.#k),this.addEventListener("pointermove",this.#I),this.addEventListener("pointerleave",this.#E),this.addEventListener("click",this.#g),this.addEventListener("dblclick",this.#V)}#f(){if(!this.#H)return;this.#H.style.opacity="1"}#A(){if(!this.#H)return;this.#H.style.opacity="0"}#k=()=>{if(this.#Z)return;this.#f()};#E=()=>{this.#A()};#I=(J)=>{if(this.#Z){this.#A();return}if(!this.#H||!this.#J)return;if(J.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){this.#A();return}let Q=this.#J.getBoundingClientRect(),Z=Math.max(0,Math.min(1,(J.clientX-Q.left)/Q.width));this.#H.style.left=`${Z*100}%`;let $=this.#S(Z);this.#H.setAttribute("color",$),this.#f()};#x(){let J=this.#_.stops.length;if(J<2)return;for(let Q=0;Q<J;Q++)this.#_.stops[Q].position=Math.round(Q/(J-1)*100);this.#b(),this.#c(),this.#m(),this.#u()}#V=(J)=>{if(!this.#J)return;if(!J.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;this.#x(),this.#J.querySelectorAll("fig-handle[selected]").forEach((Q)=>{Q.removeAttribute("selected")})};#g=(J)=>{if(!this.#J)return;if(this.#Z)return;if(this.#P){this.#P=!1;return}if(J.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){if(J.shiftKey){let q=J.target.closest("fig-handle"),X=parseInt(q?.dataset.stopIndex,10);if(this.#x(),!isNaN(X))this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Y)=>{if(parseInt(Y.dataset.stopIndex,10)===X)Y.select();else Y.deselect()});J.stopPropagation()}return}let Q=this.#J.getBoundingClientRect(),Z=Math.max(0,Math.min(1,(J.clientX-Q.left)/Q.width)),$=Math.round(Z*100),j=this.#S(Z);this.#_.stops.push({position:$,color:j,opacity:100}),this.#_.stops.sort((q,X)=>q.position-X.position);let _=this.#_.stops.findIndex((q)=>q.position===$&&q.color===j);this.#b(),this.#c(),this.#m(),this.#u(),requestAnimationFrame(()=>{let X=this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[_];if(X)X.click()})};#h(){if(this.#X=null,!this.isConnected)return;if(!this.#J)return;let J=this.#_.stops;this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q,Z)=>{if(Z>=J.length)return;Q.removeAttribute("value"),Q.setAttribute("value",`${J[Z].position}% 50%`)})}refreshLayout(){this.#h()}#w(){if(this.#X!==null)return;this.#X=requestAnimationFrame(()=>this.#h())}#b(){if(!this.#J)return;let J=this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),Q=this.#_.stops;if(J.length!==Q.length){let Z=this.#H;if(this.#J.innerHTML=this.#R(),Z)this.#J.appendChild(Z);this.#y(),this.#o(),this.#w();return}for(let Z=0;Z<Q.length;Z++){let $=J[Z],j=Q[Z];if($.dataset.stopIndex=Z,$.setAttribute("value",`${j.position}% 50%`),$.setAttribute("color",this.#O(j)),this.#K==="tip")$.setAttribute("tip","color");else $.removeAttribute("tip");let _=$.closest("fig-tooltip");if(_)_.setAttribute("text",`${Math.round(j.position)}%`)}this.#y()}#y(){if(!this.#J)return;let J=this.#K==="tip";if(this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q)=>{if(J)Q.setAttribute("tip","color");else Q.removeAttribute("tip")}),this.#H)if(J)this.#H.setAttribute("tip","add");else this.#H.removeAttribute("tip")}#o(){if(!this.#j||!this.#J)return;this.#j.disconnect(),this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((J)=>{this.#j.observe(J,{attributes:!0,attributeFilter:["color"]})})}#v(){if(!this.#J)return;let J=this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),Q=this.#_.stops,Z=new Set;J.forEach(($)=>{let j=Math.round(parseFloat($.getAttribute("value"))||0),_=($.getAttribute("color")||"").toUpperCase(),q=-1;for(let X=0;X<Q.length;X++){if(Z.has(X))continue;if(Q[X].position===j&&Q[X].color.toUpperCase()===_){q=X;break}}if(q===-1){let X=1/0;for(let Y=0;Y<Q.length;Y++){if(Z.has(Y))continue;let K=Math.abs(Q[Y].position-j);if(K<X)X=K,q=Y}}if(q!==-1)Z.add(q),$.dataset.stopIndex=q})}#c(){if(!this.#Q)return;this.#Q.setAttribute("background",this.#B()),this.#F()}#_0(){if(!this.#J)return;this.#J.addEventListener("pointerdown",(J)=>{if(A(this,"disabled"))return;if(J.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;if(J.button!==0)return;J.preventDefault(),J.stopPropagation();let Q=this.#J.getBoundingClientRect(),Z=Math.max(0,Math.min(1,(J.clientX-Q.left)/Q.width)),$=Math.round(Z*100),j=this.#S(Z);this.#_.stops.push({position:$,color:j,opacity:100}),this.#_.stops.sort((Y,K)=>Y.position-K.position);let _=this.#_.stops.findIndex((Y)=>Y.position===$&&Y.color===j);this.#P=!0,this.#b(),this.#c(),this.#m(),this.#A();let X=this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[_];if(X)this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Y)=>{if(Y!==X)Y.deselect()}),X.select(),X.dispatchEvent(new PointerEvent("pointerdown",{bubbles:!0,clientX:J.clientX,clientY:J.clientY,pointerId:J.pointerId,pointerType:J.pointerType,button:J.button,buttons:J.buttons}))}),this.#J.addEventListener("input",(J)=>{let Q=J.target.closest("fig-handle");if(!Q)return;if(J.stopPropagation(),J.detail?.color){let Y=parseInt(Q.dataset.stopIndex,10);if(!isNaN(Y)&&this.#_.stops[Y]){if(this.#_.stops[Y].color=J.detail.color,J.detail.opacity!==void 0)this.#_.stops[Y].opacity=J.detail.opacity;Q.setAttribute("color",this.#O(this.#_.stops[Y])),this.#c(),this.#m()}return}if(!this.#Z)Q.style.zIndex="5";this.#Z=!0;let Z=parseInt(Q.dataset.stopIndex,10);if(isNaN(Z)||!this.#_.stops[Z])return;let $=J.detail?.px??0,j=Math.round($*100),_=j,q=this.#J.getBoundingClientRect().width;if(J.detail?.shiftKey)_=Math.round(_/_0.SHIFT_SNAP)*_0.SHIFT_SNAP;else{let Y=q>0?5/q*100:0;for(let K=0;K<this.#_.stops.length;K++){if(K===Z)continue;if(Math.abs(this.#_.stops[K].position-_)<=Y){_=this.#_.stops[K].position;break}}}if(this.#_.stops[Z].position=_,_!==j)Q.style.left=`${_/100*q}px`;let X=Q.closest("fig-tooltip");if(X){if(X.text=`${Math.round(_)}%`,!X.hasAttribute("show"))X.setAttribute("show","true"),Q.hideColorTip()}this.#c(),this.#m()}),this.#J.addEventListener("change",(J)=>{let Q=J.target.closest("fig-handle");if(!Q)return;if(J.stopPropagation(),J.detail?.color){let Y=parseInt(Q.dataset.stopIndex,10);if(!isNaN(Y)&&this.#_.stops[Y]){if(this.#_.stops[Y].color=J.detail.color,J.detail.opacity!==void 0)this.#_.stops[Y].opacity=J.detail.opacity;Q.setAttribute("color",this.#O(this.#_.stops[Y])),this.#c(),this.#u()}return}Q.style.zIndex="";let Z=Q.closest("fig-tooltip");if(Z)Z.removeAttribute("show");Q.showColorTip();let $=parseInt(Q.dataset.stopIndex,10);if(isNaN($)||!this.#_.stops[$])return;let j=J.detail?.px??0,_=Math.round(j*100),q=this.#J.getBoundingClientRect().width,X=q>0?5/q*100:0;for(let Y=0;Y<this.#_.stops.length;Y++){if(Y===$)continue;if(Math.abs(this.#_.stops[Y].position-_)<=X){_=this.#_.stops[Y].position;break}}this.#_.stops[$].position=_,Q.style.left=`${_/100*q}px`,this.#_.stops.sort((Y,K)=>Y.position-K.position),this.#v(),this.#c(),this.#u(),requestAnimationFrame(()=>{this.#Z=!1})}),this.#j=new MutationObserver((J)=>{for(let Q of J){if(Q.attributeName!=="color")continue;let Z=Q.target;if(Z.classList.contains("fig-input-gradient-ghost"))continue;let $=parseInt(Z.dataset.stopIndex,10);if(isNaN($)||!this.#_.stops[$])continue;let j=Z.getAttribute("color");if(!j||!j.startsWith("#"))continue;if(j!==this.#_.stops[$].color)this.#_.stops[$].color=j,this.#c(),this.#m()}}),this.#J.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((J)=>{this.#j.observe(J,{attributes:!0,attributeFilter:["color"]})})}#m(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#u(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){return{type:"gradient",gradient:N1(this.#U(this.#_))}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}focus(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#q){let Q=this.#G();if(Q){Q.focus(J);return}}HTMLElement.prototype.focus.call(this,J)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":this.#M(),this.#c(),this.#b();break;case"disabled":this.#a();break;case"edit":if(this.#D(),this.#q)document.addEventListener("keydown",this.#L);else document.removeEventListener("keydown",this.#L);break;case"mode":this.#y();break;case"size":this.#F();break}}#a(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.#N(),this.#Q)if(J)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(this.#J)for(let Q of this.#J.querySelectorAll("fig-handle"))if(J)Q.setAttribute("disabled","");else Q.removeAttribute("disabled")}}customElements.define("fig-input-gradient",_0);class L0 extends HTMLElement{#Q=null;#J;#Z;#$;#j=!1;constructor(){super();if(this.input=document.createElement("input"),this.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",u()),this.name)this.input.setAttribute("name",this.name);this.input.setAttribute("type","checkbox"),this.#J=this.handleInput.bind(this),this.#Z=this.handleChange.bind(this),this.#$=(J)=>{if(J.target!==this||this.input.disabled)return;this.input.click()}}connectedCallback(){let J=this.querySelector(":scope > input");if(J)this.input=J;else if(!this.input.parentNode)this.append(this.input);this.input.removeEventListener("input",this.#J),this.input.addEventListener("input",this.#J),this.input.removeEventListener("change",this.#Z),this.input.addEventListener("change",this.#Z),this.removeEventListener("click",this.#$),this.addEventListener("click",this.#$),this.#q();let Q=this.querySelector(":scope > label");if(Q)this.#Q=Q,this.#j=!1,this.#Q.setAttribute("for",this.input.id);if(this.hasAttribute("label"))this.#X(),this.#Q.innerText=this.getAttribute("label");if(!this.hasAttribute("label")){let Z=Array.from(this.childNodes).filter(($)=>$.nodeType===Node.TEXT_NODE).map(($)=>$.textContent||"").join(" ").trim();if(Z&&!this.input.hasAttribute("aria-label")&&!this.input.hasAttribute("aria-labelledby"))this.input.setAttribute("aria-label",Z)}this.render()}static get observedAttributes(){return["disabled","label","checked","name","value","indeterminate"]}#X(){if(!this.#Q)this.#Q=document.createElement("label"),this.#j=!0,this.#Q.setAttribute("for",this.input.id);if(this.#Q&&!this.#Q.parentNode&&this.input.parentNode)this.input.after(this.#Q)}render(){}#_(J){return this.hasAttribute(J)&&this.getAttribute(J)!=="false"}#Y(){if(this.input.indeterminate)this.input.setAttribute("aria-checked","mixed");else this.input.setAttribute("aria-checked",this.input.checked?"true":"false")}#q(){let J=this.#_("checked"),Q=this.#_("indeterminate")&&!J,Z=this.#_("disabled");this.input.checked=J,this.input.indeterminate=Q,this.input.disabled=Z,this.input.value=this.getAttribute("value")||"";let $=this.getAttribute("name")||this.name;if($)this.input.setAttribute("name",$);else this.input.removeAttribute("name");if(Q)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");this.#Y()}focus(){this.input.focus()}get value(){return this.input.value}set value(J){this.input.value=J,this.setAttribute("value",J)}get checked(){return this.input.checked}set checked(J){if(this.input.checked=J,J)this.setAttribute("checked","");else this.removeAttribute("checked")}disconnectedCallback(){this.input.removeEventListener("input",this.#J),this.input.removeEventListener("change",this.#Z),this.removeEventListener("click",this.#$)}attributeChangedCallback(J,Q,Z){switch(J){case"label":if(Z)this.#X(),this.#Q.innerText=Z;else if(this.#Q&&this.#j)this.#Q.remove(),this.#Q=null,this.#j=!1;break;case"checked":if(this.#_("checked")&&this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");this.#q();break;case"indeterminate":this.#q();break;case"disabled":this.#q();break;case"name":if(Z)this.input.setAttribute("name",Z);else this.input.removeAttribute("name");break;case"value":this.input.value=Z||"";break;default:this.input[J]=Z,this.input.setAttribute(J,Z);break}}handleInput(J){if(J.stopPropagation(),this.input.indeterminate=!1,this.input.removeAttribute("indeterminate"),this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");if(this.#Y(),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}}))}handleChange(J){J.stopPropagation(),this.#Y(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}}))}}customElements.define("fig-checkbox",L0);class B1 extends L0{constructor(){super();this.input.setAttribute("type","radio");let J=this.getAttribute("name");if(J)this.input.setAttribute("name",J);else this.input.removeAttribute("name")}}customElements.define("fig-radio",B1);class M1 extends L0{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",M1);class O1 extends HTMLElement{static observedAttributes=["options","placeholder","value","disabled","experimental","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"];#Q=!1;#J=null;#Z=null;#$=null;#j=null;#X=!1;#_=["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"];#Y=this.#M.bind(this);#q=this.#B.bind(this);#K=this.#O.bind(this);get value(){return this.getAttribute("value")||""}set value(J){this.setAttribute("value",J??"")}#G(){return!!this.querySelector(":scope > .input-combo")}#N(){if(this.#J=this.querySelector("fig-input-text"),this.#$=this.querySelector("fig-button"),this.#Z=this.querySelector("fig-dropdown"),this.#J)this.#J.setAttribute("value",this.value),this.#J.setAttribute("placeholder",this.getAttribute("placeholder")||"");this.#D()}connectedCallback(){if(this.#j=Array.from(this.children).find((J)=>J.tagName==="FIG-DROPDOWN")||null,this.#Q=this.#j!==null,this.#j)this.#j.remove();if(this.#G())this.#N(),this.#L();else this.#U(),this.#L();this.#C(A(this,"disabled"))}disconnectedCallback(){this.#W()}#U(){let J=this.#R(),Q=this.getAttribute("placeholder")||"",Z=this.value,$=this.getAttribute("experimental"),j=$?` experimental="${b($)}"`:"",_=this.#P(),q=this.#Q?"":`<fig-dropdown type="dropdown" label="${b(_)}"${j}>${J.map((X)=>`<option>${b(X.trim())}</option>`).join("")}</fig-dropdown>`;if(this.innerHTML=`<div class="input-combo">
|
|
182
|
+
<fig-input-text placeholder="${b(Q)}" value="${b(Z)}"></fig-input-text>
|
|
183
|
+
<fig-button type="select" variant="input" icon>
|
|
184
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
185
|
+
<path d="M5.87868 7.12132L8 9.24264L10.1213 7.12132" stroke="currentColor" stroke-opacity="0.9" stroke-linecap="round"/>
|
|
186
|
+
</svg>
|
|
187
|
+
${q}
|
|
188
|
+
</fig-button>
|
|
189
|
+
</div>`,this.#J=this.querySelector("fig-input-text"),this.#$=this.querySelector("fig-button"),this.#Q&&this.#j&&this.#$){if(!this.#j.hasAttribute("type"))this.#j.setAttribute("type","dropdown");if(!this.#j.hasAttribute("label"))this.#j.setAttribute("label",_);if($)this.#j.setAttribute("experimental",$);this.#$.append(this.#j)}this.#Z=this.querySelector("fig-dropdown"),this.#D()}#L(){this.#W(),this.#Z?.addEventListener("input",this.#Y),this.#J?.addEventListener("input",this.#q),this.#J?.addEventListener("change",this.#K)}#W(){this.#Z?.removeEventListener("input",this.#Y),this.#J?.removeEventListener("input",this.#q),this.#J?.removeEventListener("change",this.#K)}#M(J){J.stopPropagation();let Q=J.target.closest("fig-dropdown")?.value??"";if(this.#X=!0,this.setAttribute("value",Q),this.#X=!1,this.#J)this.#J.setAttribute("value",Q);this.#z(),this.#F()}#B(J){J.stopPropagation();let Q=J.target.value??"";this.#X=!0,this.setAttribute("value",Q),this.#X=!1,this.#z()}#O(J){J.stopPropagation();let Q=J.target.value??"";this.#X=!0,this.setAttribute("value",Q),this.#X=!1,this.#F()}#z(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#F(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#R(){return(this.getAttribute("options")||"").split(",").map((J)=>J.trim()).filter(Boolean)}#H(){return(this.getAttribute("aria-label")||this.getAttribute("placeholder")||"Combo input").trim()}#P(){return`${this.#H()} options`}#D(){if(this.#J)this.#_.forEach((J)=>{let Q=this.getAttribute(J);if(Q===null)this.#J.removeAttribute(J);else this.#J.setAttribute(J,Q)});if(this.#Z&&!this.#Z.hasAttribute("aria-label"))this.#Z.setAttribute("label",this.#P())}#C(J){if(this.#J)if(J)this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled");if(this.#$)if(J)this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}focus(){this.#J?.focus()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"options":if(this.#Z&&!this.#Q){let $=this.#R();this.#Z.replaceChildren(...$.map((j)=>{let _=document.createElement("option");return _.textContent=j,_}))}break;case"placeholder":if(this.#J)this.#J.setAttribute("placeholder",Z||"");this.#D();break;case"value":if(!this.#X&&this.#J)this.#J.setAttribute("value",Z||"");break;case"disabled":this.#C(Z!==null&&Z!=="false");break;case"experimental":if(this.#Z){if(Z)this.#Z.setAttribute("experimental",Z);else if(!this.#Q)this.#Z.removeAttribute("experimental")}break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#D();break}}}customElements.define("fig-combo-input",O1);class z1 extends HTMLElement{#Q="color";#J=null;#Z=!1;constructor(){super();this.#J=this.#K.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.#Y(),this.#$(),this.#q()}#$(){let J=this.getAttribute("alpha");if(J!==null)this.style.setProperty("--alpha",J);else this.style.removeProperty("--alpha")}#j(J){if(!J)return"color";let Q=J.toLowerCase();if(Q.includes("gradient"))return"gradient";if(Q.includes("url("))return"image";return"color"}#X(J){if(!J)return"#D9D9D9";if(J.startsWith("#"))return J.slice(0,7);try{let{ctx:Q}=E0(1,1);return Q.fillStyle=J,Q.fillStyle}catch{return"#D9D9D9"}}#_(J){if(!J||!J.includes("var("))return J;let Q=this.style.background;this.style.background=J;let Z=getComputedStyle(this),$=Z.backgroundImage,j=Z.backgroundColor;if(this.style.background=Q,$&&$!=="none")return $;return j||J}#Y(){let J=this.getAttribute("background")||"#D9D9D9",Q=J.includes("var("),Z=Q?this.#_(J):J,$=this.#j(Z);if($!==this.#Q||!this.input){if(this.#Q=$,this.setAttribute("data-type",this.#Q),this.input)this.input.removeEventListener("input",this.#J);if(this.#Q==="color"){let _=this.#X(Z);if(this.innerHTML=`<div></div><input type="color" value="${_}" />`,this.input=this.querySelector("input"),!Q)this.input.addEventListener("input",this.#J);this.#q()}else this.innerHTML="<div></div>",this.input=null,this.#q()}else if(this.#Q==="color"&&this.input){let _=this.#X(Z);if(this.input.value!==_)this.input.value=_}let j=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(J);this.style.setProperty("--swatch-background",j?J:`linear-gradient(${J}, ${J})`)}#q(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.setAttribute("aria-disabled",J?"true":"false"),this.input){this.input.disabled=J;let Q=this.getAttribute("aria-labelledby"),Z=this.getAttribute("aria-label")||"Color swatch",$=this.getAttribute("aria-describedby");if(Q)this.input.setAttribute("aria-labelledby",Q),this.input.removeAttribute("aria-label");else this.input.setAttribute("aria-label",Z),this.input.removeAttribute("aria-labelledby");if($)this.input.setAttribute("aria-describedby",$);else this.input.removeAttribute("aria-describedby");this.removeAttribute("role"),this.removeAttribute("aria-hidden");return}if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-hidden","true");else this.setAttribute("role","img"),this.removeAttribute("aria-hidden")}#K(J){this.#Z=!0,this.setAttribute("background",J.target.value),this.#Z=!1}get background(){return this.getAttribute("background")}set background(J){this.setAttribute("background",J)}focus(){this.input?.focus()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="background"){if(this.#Z){let $=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(Z);this.style.setProperty("--swatch-background",$?Z:`linear-gradient(${Z}, ${Z})`);return}this.#Y()}else if(J==="alpha")this.#$();else if(J==="disabled"||J==="aria-label"||J==="aria-labelledby"||J==="aria-describedby")this.#q()}get alpha(){return this.getAttribute("alpha")}set alpha(J){if(J===null||J===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",J)}}customElements.define("fig-swatch",z1);class B0 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=null;#j=null;#X=null;#_=null;#Y=this.#o.bind(this);#q=this.#c.bind(this);#K=this.#_0.bind(this);#G=this.#m.bind(this);#N=null;#U=null;#L=null;#W=null;#M=null;#B=null;#O=null;static get observedAttributes(){return["src","type","alt","upload","label","aspect-ratio","fit","checkerboard","caption","controls","autoplay","loop","muted","poster","aria-label","aria-labelledby","title"]}get mediaKind(){return(this.getAttribute("type")||"image").toLowerCase()==="video"?"video":"image"}get src(){return this.#Q}set src(J){if(this.#Q=J||"",J===null||J===void 0||J==="")this.removeAttribute("src");else this.setAttribute("src",J)}get file(){return this.#_}#z(){return this.#X||this.#Q||""}async getBase64(){if(this.mediaKind!=="image")return null;if(!this.#z())return null;if(!this.#J)return null;try{if(typeof this.#J.decode==="function")await this.#J.decode();else if(!this.#J.complete)await new Promise(($,j)=>{this.#J.addEventListener("load",$,{once:!0}),this.#J.addEventListener("error",j,{once:!0})})}catch{}let J=this.#J.naturalWidth,Q=this.#J.naturalHeight;if(!(J>0)||!(Q>0))return null;let Z=document.createElement("canvas");return Z.width=J,Z.height=Q,Z.getContext("2d").drawImage(this.#J,0,0),Z.toDataURL()}connectedCallback(){this.#Q=this.getAttribute("src")||"";let J=this.getAttribute("aspect-ratio");if(J)this.style.setProperty("--fig-media-aspect-ratio",J);else this.style.setProperty("--fig-media-aspect-ratio","4/3");let Q=this.getAttribute("fit");if(Q)this.style.setProperty("--fig-media-fit",Q);if(this.querySelectorAll("fig-swatch[data-generated]").forEach(($)=>$.remove()),this.#H(),this.#D(),this.#R(),this.#k(),this.#C(),this.#f(),this.hasAttribute("upload")&&this.getAttribute("upload")!=="false"&&!this.querySelector("fig-input-file[data-generated]"))this.#b();this.#$=this.querySelector("fig-input-file[data-generated]"),this.#$?.removeEventListener("change",this.#Y),this.#$?.addEventListener("change",this.#Y)}disconnectedCallback(){if(this.#$?.removeEventListener("change",this.#Y),this.#F(),this.#w(),this.#j)URL.revokeObjectURL(this.#j),this.#j=null;this.#X=null}#F(){if(!this.#J)return;if(this.#J.tagName==="VIDEO")this.#J.removeEventListener("play",this.#q),this.#J.removeEventListener("pause",this.#K),this.#J.removeEventListener("ended",this.#G)}#R(){if(this.#F(),this.#J?.tagName!=="VIDEO")return;this.#J.addEventListener("play",this.#q),this.#J.addEventListener("pause",this.#K),this.#J.addEventListener("ended",this.#G)}#H(){if(this.#Z?.isConnected)return;let J=this.querySelector(":scope > fig-preview");if(J){this.#Z=J;return}let Q=document.createElement("fig-preview");Q.setAttribute("data-generated",""),this.prepend(Q),this.#Z=Q}#P(){let J=this.mediaKind==="video"?"video":"img";return this.querySelector(`${J}:not([data-generated])`)}#D(){let J=this.#P();if(J){if(this.#H(),this.#J&&this.#J!==J){if(this.#F(),this.#J.hasAttribute("data-generated"))this.#J.remove()}if(this.#J=J,this.#Z&&J.parentElement!==this.#Z)this.#Z.append(J);this.#C();return}this.#H();let Q=this.mediaKind==="video"?"VIDEO":"IMG";if(this.#J&&this.#J.tagName!==Q){if(this.#F(),this.#J.hasAttribute("data-generated"))this.#J.remove();this.#J=null}if(this.#J)return;if(this.mediaKind==="video"){let Z=document.createElement("video");Z.setAttribute("data-generated",""),Z.className="fig-media-element",Z.setAttribute("playsinline",""),Z.preload="auto",this.#Z.append(Z),this.#J=Z,this.#R();let $=()=>{if(this.#J?.autoplay)return;try{this.#J.currentTime=0.001}catch{}};this.#J.addEventListener("loadedmetadata",$,{once:!0})}else{let Z=document.createElement("img");Z.setAttribute("data-generated",""),Z.className="fig-media-element",Z.loading="lazy",Z.decoding="async",Z.alt=this.getAttribute("alt")||"",this.#Z.append(Z),this.#J=Z}}#C(){if(!this.#J)return;if(this.#J.tagName==="IMG"){if(this.hasAttribute("alt")||this.#J.hasAttribute("data-generated"))this.#J.alt=this.getAttribute("alt")||"";return}if(this.#J.tagName!=="VIDEO")return;["aria-label","aria-labelledby","title"].forEach((J)=>{let Q=this.getAttribute(J);if(Q===null)this.#J.removeAttribute(J);else this.#J.setAttribute(J,Q)})}#S(){return this.querySelector(":scope > figcaption:not([data-generated])")}#T(){return Array.from(this.querySelectorAll(":scope > figcaption[data-generated]"))}#f(){let J=this.#S(),Q=this.#T();if(J){Q.forEach((_)=>_.remove());return}let Z=this.getAttribute("caption")||"";if(!Z){Q.forEach((_)=>_.remove());return}let $=Q[0]||document.createElement("figcaption");if(Q.slice(1).forEach((_)=>_.remove()),!$.hasAttribute("data-generated"))$.setAttribute("data-generated","");if($.textContent!==Z)$.textContent=Z;let j=this.querySelector(":scope > fig-media-controls");if(j)j.before($);else if(this.#Z?.isConnected)this.#Z.after($);else if(!$.isConnected)this.append($)}#A(J,Q=!1){if(!this.hasAttribute(J))return Q;return this.getAttribute(J)!=="false"}#k(){if(!this.#J)return;if(!this.#J.hasAttribute("data-generated"))return;let J=this.#z();if(this.#J.getAttribute("src")!==J){if(J)this.#J.setAttribute("src",J);else if(this.#J.removeAttribute("src"),this.#J.tagName==="VIDEO")this.#J.load()}if(this.#J.tagName==="IMG"){this.#C();return}let Q=this.getAttribute("poster");if(Q)this.#J.setAttribute("poster",Q);else this.#J.removeAttribute("poster");this.#J.controls=!1,this.#J.removeAttribute("controls"),this.#J.autoplay=this.#A("autoplay",!1),this.#J.loop=this.#A("loop",!1),this.#J.muted=this.#A("muted",!1),this.#J.playsInline=!0,this.#C(),this.#x(),this.#I()}get mediaEl(){return this.#J}#E(){if(this.mediaKind!=="video")return!1;return Boolean(this.#z())}#I(){let J=this.#N||this.querySelector(":scope > fig-media-controls");if(!J)return;if(this.mediaKind!=="video")return;if(this.#E()){if(J.hasAttribute("data-fig-empty-disabled"))J.removeAttribute("disabled"),J.removeAttribute("data-fig-empty-disabled");return}J.setAttribute("disabled",""),J.setAttribute("data-fig-empty-disabled",""),J.playing=!1,J.time=0,J.duration=0}#x(){if(this.mediaKind!=="video"){this.#w();return}let J=this.querySelector(":scope > fig-media-controls:not([data-generated])");if(J){if(this.#N!==J)this.#w(),this.#N=J;this.#g(),this.#I();return}if(this.#A("controls",!1))this.#V();else this.#w()}#V(){let J=Array.from(this.querySelectorAll(":scope > fig-media-controls[data-generated]")),Q=J[0];if(J.slice(1).forEach(($)=>$.remove()),Q){this.#N=Q,this.#g(),this.#I();return}let Z=document.createElement("fig-media-controls");Z.setAttribute("data-generated",""),this.append(Z),this.#N=Z,this.#g(),this.#I()}#g(){if(!this.#N||!this.#J)return;if(this.#U===this.#J&&this.#L===this.#N){this.#I();return}this.#h();let J=this.#N,Q=this.#J;this.#U=Q,this.#L=J;let Z=null,$=()=>{if(this.#I(),!this.#E())return;if(J.playing=!Q.paused&&!Q.ended,Number.isFinite(Q.duration))J.duration=Q.duration;if(Z!==null)if(Math.abs(Q.currentTime-Z)<0.25)Z=null;else return;J.time=Q.currentTime||0},j=()=>{if(!this.#E())return;let X=Q.play?.();if(X&&typeof X.catch==="function")X.catch(()=>{})},_=()=>Q.pause?.(),q=(X)=>{if(!this.#E())return;let Y=Number(X?.detail?.time);if(!Number.isFinite(Y))return;Z=Y;try{Q.currentTime=Y}catch{}};this.#W=$,this.#M=j,this.#B=_,this.#O=q,Q.addEventListener("play",$),Q.addEventListener("pause",$),Q.addEventListener("ended",$),Q.addEventListener("timeupdate",$),Q.addEventListener("loadedmetadata",$),Q.addEventListener("durationchange",$),Q.addEventListener("seeked",$),J.addEventListener("play",j),J.addEventListener("pause",_),J.addEventListener("seek",q),$()}#h(){let J=this.#U,Q=this.#L;if(J&&this.#W)J.removeEventListener("play",this.#W),J.removeEventListener("pause",this.#W),J.removeEventListener("ended",this.#W),J.removeEventListener("timeupdate",this.#W),J.removeEventListener("loadedmetadata",this.#W),J.removeEventListener("durationchange",this.#W),J.removeEventListener("seeked",this.#W);if(Q){if(this.#M)Q.removeEventListener("play",this.#M);if(this.#B)Q.removeEventListener("pause",this.#B);if(this.#O)Q.removeEventListener("seek",this.#O)}this.#U=null,this.#L=null,this.#W=null,this.#M=null,this.#B=null,this.#O=null}#w(){this.#h(),this.querySelectorAll(":scope > fig-media-controls[data-generated]").forEach((J)=>{J.remove()}),this.#N=null}toggle(){if(!this.#J||this.mediaKind!=="video")return;if(this.#J.paused||this.#J.ended)this.play();else this.pause()}play(){if(this.mediaKind!=="video"||!this.#J)return;let J=this.#J.play();if(J&&typeof J.catch==="function")J.catch(()=>{})}pause(){if(this.mediaKind!=="video"||!this.#J)return;this.#J.pause()}#b(){let J=document.createElement("fig-input-file");J.setAttribute("data-generated",""),J.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*"),J.setAttribute("variant","overlay");let Q=this.getAttribute("label")||"Upload";if(J.setAttribute("label",this.#Q?"Replace":Q),this.#_?.name)J.setAttribute("filename",this.#_.name);else if(this.#Q)J.setAttribute("url",this.#Q);J.addEventListener("change",this.#Y),this.#H(),this.#Z.append(J),this.#$=J}#y(){if(this.#$)this.#$.removeEventListener("change",this.#Y),this.#$.remove(),this.#$=null}#o(J){if(J.target!==this.#$)return;let Q=J.detail?.files?.[0],Z=J.detail?.cleared===!0;if(!Q){if(this.#j)URL.revokeObjectURL(this.#j),this.#j=null;if(this.#_=null,this.#X=null,Z)this.src="";if(this.#k(),this.#$){let $=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Q?"Replace":$),this.#$.removeAttribute("filename"),this.#Q)this.#$.setAttribute("url",this.#Q);else this.#$.removeAttribute("url")}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}));return}if(this.#j)URL.revokeObjectURL(this.#j);if(this.#_=Q,this.#j=URL.createObjectURL(Q),this.#X=this.#j,this.#k(),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{file:Q,src:this.#j}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.#$)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",Q.name),this.#$.setAttribute("label","Replace")}#v(J){if(!this.#J)return;this.dispatchEvent(new CustomEvent(J,{bubbles:!0,cancelable:!1,composed:!0,detail:{src:this.#Q||"",currentTime:this.#J.currentTime,duration:this.#J.duration}}))}#c(){this.#v("play")}#_0(){this.#v("pause")}#m(){this.#v("ended")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="src"){let $=Z||"",j=$&&($===this.#X||$===this.#j);if(this.#Q=$,this.#j&&!j)URL.revokeObjectURL(this.#j),this.#j=null,this.#X=null,this.#_=null;if(this.#k(),this.#$){let _=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Q?"Replace":_),this.#Q)if(this.#_?.name)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",this.#_.name);else this.#$.setAttribute("url",this.#Q),this.#$.removeAttribute("filename");else this.#$.removeAttribute("url"),this.#$.removeAttribute("filename")}}if(J==="type"){if(this.#D(),this.#k(),this.#$)this.#$.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*")}if(["alt","aria-label","aria-labelledby","title"].includes(J))this.#C();if(J==="upload"){let $=Z!==null&&Z!=="false";if($&&!this.#$)this.#b();else if(!$)this.#y()}if(J==="aspect-ratio")if(Z)this.style.setProperty("--fig-media-aspect-ratio",Z);else this.style.removeProperty("--fig-media-aspect-ratio");if(J==="fit")if(Z)this.style.setProperty("--fig-media-fit",Z);else this.style.removeProperty("--fig-media-fit");if(J==="label"&&this.#$){let $=this.getAttribute("label")||"Upload";this.#$.setAttribute("label",this.#Q?"Replace":$)}if(["controls","autoplay","loop","muted","poster"].includes(J))this.#k();if(J==="caption")this.#f()}}customElements.define("fig-media",B0);class F1 extends B0{get mediaKind(){return"image"}}customElements.define("fig-image",F1);class H1 extends B0{get mediaKind(){return"video"}}customElements.define("fig-video",H1);class R1 extends HTMLElement{static get observedAttributes(){return["src","alt","label","text","sublabel","href","target","selected","disabled","full","aspect-ratio","fit","label-line-clamp"]}#Q=null;#J=null;#Z=null;#$=null;#j=null;#X=null;#_=!1;connectedCallback(){this.#U(),this.#L()}attributeChangedCallback(){if(!this.isConnected)return;this.#U(),this.#L()}#Y(){return this.getAttribute("label")??this.getAttribute("text")??""}#q(){return this.getAttribute("sublabel")??""}#K(){let J=this.getAttribute("href");return Boolean(J)&&!A(this,"disabled")}#G(){return this.getAttribute("label-line-clamp")==="2"?"2":"1"}#N(){return this.querySelector(":scope > fig-image:not([data-generated]), :scope > fig-media:not([data-generated]), :scope > fig-preview:not([data-generated]), :scope > .fig-card-link > .fig-card-media > fig-image:not([data-generated]), :scope > .fig-card-link > .fig-card-media > fig-media:not([data-generated]), :scope > .fig-card-link > .fig-card-media > fig-preview:not([data-generated])")}#U(){let J=this.#N();this.#_=Boolean(J);let Z=this.#K()?"a":"div";if(!this.#Q||this.#Q.tagName.toLowerCase()!==Z){let $=document.createElement(Z);if($.className="fig-card-link",this.#Q){while(this.#Q.firstChild)$.appendChild(this.#Q.firstChild);this.#Q.replaceWith($)}else this.appendChild($);this.#Q=$}if(!this.#J||!this.#J.isConnected){if(this.#J=this.#Q.querySelector(":scope > .fig-card-media"),!this.#J)this.#J=document.createElement("div"),this.#J.className="fig-card-media",this.#Q.prepend(this.#J)}if(J&&J.parentElement!==this.#J)this.#J.querySelectorAll("[data-generated]").forEach(($)=>$.remove()),this.#J.appendChild(J),this.#$=null;if(!this.#_){if(this.#$=this.#J.querySelector(":scope > fig-image[data-generated]")||null,!this.#$)this.#J.querySelectorAll(":scope > fig-image, :scope > fig-media, :scope > fig-preview").forEach(($)=>{if($.hasAttribute("data-generated"))$.remove()}),this.#$=document.createElement("fig-image"),this.#$.setAttribute("data-generated",""),this.#$.setAttribute("full",""),this.#$.setAttribute("size","auto"),this.#J.appendChild(this.#$)}if(!this.#Z||!this.#Z.isConnected){if(this.#Z=this.#Q.querySelector(":scope > .fig-card-text"),!this.#Z)this.#Z=document.createElement("div"),this.#Z.className="fig-card-text",this.#Z.setAttribute("data-generated",""),this.#Q.appendChild(this.#Z)}if(!this.#j||!this.#j.isConnected){if(this.#j=this.#Z.querySelector(":scope > .fig-card-label[data-generated]"),!this.#j){if(this.#j=this.#Q.querySelector(":scope > .fig-card-label[data-generated]")||null,!this.#j)this.#j=document.createElement("label"),this.#j.className="fig-card-label",this.#j.setAttribute("data-generated","");this.#Z.appendChild(this.#j)}}if(!this.#X||!this.#X.isConnected){if(this.#X=this.#Z.querySelector(":scope > .fig-card-sublabel[data-generated]"),!this.#X){if(this.#X=this.#Q.querySelector(":scope > .fig-card-sublabel[data-generated]")||null,!this.#X)this.#X=document.createElement("span"),this.#X.className="fig-card-sublabel",this.#X.setAttribute("data-generated","");this.#j.after(this.#X)}}}#L(){if(!this.#Q)return;let J=A(this,"disabled"),Q=A(this,"selected"),Z=this.#Y(),$=this.#q(),j=this.#G();if(this.style.setProperty("--fig-card-label-line-clamp",j),this.#K()){let _=this.getAttribute("href")||"",q=this.getAttribute("target");if(this.#Q.setAttribute("href",_),q)if(this.#Q.setAttribute("target",q),q==="_blank")this.#Q.setAttribute("rel","noopener noreferrer");else this.#Q.removeAttribute("rel");else this.#Q.removeAttribute("target"),this.#Q.removeAttribute("rel");if(Q)this.#Q.setAttribute("aria-current","true");else this.#Q.removeAttribute("aria-current");this.removeAttribute("role"),this.removeAttribute("aria-label")}else{this.#Q.removeAttribute("href"),this.#Q.removeAttribute("target"),this.#Q.removeAttribute("rel"),this.#Q.removeAttribute("aria-current"),this.setAttribute("role","group");let _=[Z,$].filter(Boolean).join(", ");if(_)this.setAttribute("aria-label",_);else this.removeAttribute("aria-label")}if(J)this.setAttribute("aria-disabled","true");else this.removeAttribute("aria-disabled");if(this.#$&&!this.#_){let _=this.getAttribute("src"),q=this.getAttribute("alt"),X=this.getAttribute("aspect-ratio")||"1/1",Y=this.getAttribute("fit")||"contain",K=q!=null?q:"";if(_)this.#$.setAttribute("src",_);else this.#$.removeAttribute("src");this.#$.setAttribute("alt",K),this.#$.setAttribute("aspect-ratio",X),this.#$.setAttribute("fit",Y),this.#$.setAttribute("full",""),this.#$.setAttribute("size","auto")}if(this.#j)this.#j.textContent=Z,this.#j.hidden=!Z;if(this.#X)this.#X.textContent=$,this.#X.hidden=!$;if(this.#Z)this.#Z.hidden=!Z&&!$}}customElements.define("fig-card",R1);class D1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=null;#j=!1;#X=!1;static get observedAttributes(){return["playing","duration","time","disabled"]}connectedCallback(){this.#_(),this.#G(),this.#N(),this.#Y()}get playing(){return this.hasAttribute("playing")&&this.getAttribute("playing")!=="false"}set playing(J){if(J)this.setAttribute("playing","");else this.removeAttribute("playing")}get duration(){let J=Number(this.getAttribute("duration"));return Number.isFinite(J)&&J>=0?J:0}set duration(J){let Q=Number(J);if(!Number.isFinite(Q)||Q<0){this.removeAttribute("duration");return}this.setAttribute("duration",String(Q))}get time(){let J=Number(this.getAttribute("time"));return Number.isFinite(J)&&J>=0?J:0}set time(J){let Q=Number(J);if(!Number.isFinite(Q)||Q<0){this.removeAttribute("time");return}this.setAttribute("time",String(Q))}get disabled(){return A(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}attributeChangedCallback(J){if(!this.#X)return;if(J==="playing")this.#G();if(J==="duration"||J==="time")this.#N();if(J==="disabled")this.#Y()}#_(){if(this.#X)return;if(this.#X=!0,!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Media controls");let J=document.createElement("fig-tooltip");J.setAttribute("text","Play");let Q=document.createElement("fig-button");Q.setAttribute("variant","ghost"),Q.setAttribute("size","small"),Q.setAttribute("icon","true"),Q.setAttribute("aria-label","Play");let Z=d("play",{className:"fig-media-controls-play-icon"});Q.append(Z),J.append(Q),Q.addEventListener("click",(q)=>{q.preventDefault(),q.stopPropagation(),this.toggle()});let $=document.createElement("fig-slider");$.setAttribute("text","false"),$.setAttribute("min","0"),$.setAttribute("max",String(this.duration)),$.setAttribute("step","1"),$.setAttribute("value",String(this.time)),$.setAttribute("full",""),$.setAttribute("aria-label","Seek"),$.setAttribute("aria-valuetext",this.#K(this.time,this.duration));let j=document.createElement("span");j.className="fig-media-controls-time",j.textContent=this.#q(this.time);let _=(q)=>{if(this.disabled){q.preventDefault?.(),q.stopPropagation();return}let X=q.currentTarget,Y=Number(X?.value);if(!Number.isFinite(Y))return;this.#j=!0,this.setAttribute("time",String(Y)),this.dispatchEvent(new CustomEvent("seek",{bubbles:!0,composed:!0,detail:{time:Y}})),requestAnimationFrame(()=>{this.#j=!1})};$.addEventListener("input",_),$.addEventListener("change",_),this.append(J,$,j),this.#Q=Q,this.#J=J,this.#Z=$,this.#$=j,this.#Y()}#Y(){let J=this.disabled;if(this.setAttribute("aria-disabled",J?"true":"false"),this.#Q)if(J)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}#q(J){if(!Number.isFinite(J)||J<0)J=0;let Q=Math.floor(J),Z=Math.floor(Q/60),$=Q%60;return`${String(Z).padStart(2,"0")}:${String($).padStart(2,"0")}`}#K(J,Q=0){let Z=this.#q(J);if(!Number.isFinite(Q)||Q<=0)return Z;return`${Z} of ${this.#q(Q)}`}#G(){if(!this.#Q)return;let J=this.playing;this.#Q.setAttribute("aria-label",J?"Pause":"Play"),this.#J?.setAttribute("text",J?"Pause":"Play");let Q=this.#Q.querySelector(".fig-media-controls-play-icon");if(Q)Q.setAttribute("name",J?"pause":"play")}#N(){if(!this.#Z)return;let J=this.duration;if(Number(this.#Z.getAttribute("max"))!==J)this.#Z.setAttribute("max",String(J));let Q=this.time;if(!this.#j)this.#Z.setAttribute("value",String(Q));if(this.#Z.setAttribute("aria-valuetext",this.#K(Q,J)),this.#$)this.#$.textContent=this.#q(Q)}toggle(){if(this.disabled)return;let J=!this.playing;this.playing=J,this.dispatchEvent(new CustomEvent(J?"play":"pause",{bubbles:!0,composed:!0,detail:{playing:J}}))}play(){if(this.disabled||this.playing)return;this.toggle()}pause(){if(this.disabled||!this.playing)return;this.toggle()}}customElements.define("fig-media-controls",D1);class A1 extends HTMLElement{static observedAttributes=["accepts","label","disabled","multiple","variant","url","filename"];#Q=null;#J=null;#Z=null;#$=null;#j=null;#X=null;get files(){return this.#X}get#_(){let J=this.getAttribute("filename");if(J)return J;let Q=this.getAttribute("url");if(!Q)return"";try{let $=new URL(Q,location.href).pathname.split("/").pop();return $?decodeURIComponent($):Q}catch{return Q}}get value(){if(this.#X&&this.#X.length>0){if(this.#X.length===1)return this.#X[0].name;return`${this.#X.length} files`}return this.#_}connectedCallback(){this.#L(),this.addEventListener("dragover",this.#G),this.addEventListener("dragleave",this.#N),this.addEventListener("drop",this.#U)}disconnectedCallback(){this.#Q?.removeEventListener("change",this.#q),this.#Z?.removeEventListener("click",this.#K),this.removeEventListener("dragover",this.#G),this.removeEventListener("dragleave",this.#N),this.removeEventListener("drop",this.#U)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;this.#L()}clear(){if(this.#X=null,this.#Q)this.#Q.value="";this.removeAttribute("url"),this.removeAttribute("filename"),this.#L(),this.#Y({cleared:!0})}#Y(J={}){let Q={files:this.#X,...J};this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#q=()=>{if(this.#Q.files.length>0)this.#X=this.#Q.files,this.removeAttribute("url"),this.#L(),this.#Y()};#K=(J)=>{J.stopPropagation(),this.clear()};#G=(J)=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(J.preventDefault(),!this.hasAttribute("dragover")){if(this.setAttribute("dragover",""),this.#j)this.#j.dataset.prevText=this.#j.textContent,this.#j.textContent="Drop file"}};#N=()=>{if(this.removeAttribute("dragover"),this.#j&&this.#j.dataset.prevText!==void 0)this.#j.textContent=this.#j.dataset.prevText,delete this.#j.dataset.prevText};#U=(J)=>{if(J.preventDefault(),this.removeAttribute("dragover"),this.#j&&this.#j.dataset.prevText!==void 0)this.#j.textContent=this.#j.dataset.prevText,delete this.#j.dataset.prevText;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=this.getAttribute("accepts"),Z=Array.from(J.dataTransfer.files);if(Q){let j=Q.split(",").map((_)=>_.trim().toLowerCase());Z=Z.filter((_)=>{let q="."+_.name.split(".").pop().toLowerCase(),X=_.type.toLowerCase();return j.some((Y)=>Y===q||Y===X||Y.endsWith("/*")&&X.startsWith(Y.slice(0,-1)))})}if(!this.hasAttribute("multiple")||this.getAttribute("multiple")==="false")Z=Z.slice(0,1);if(Z.length===0)return;let $=new DataTransfer;if(Z.forEach((j)=>$.items.add(j)),this.#X=$.files,this.#Q)this.#Q.files=$.files;this.removeAttribute("url"),this.#L(),this.#Y()};#L(){let J=this.getAttribute("accepts")||"",Q=this.getAttribute("label")||"Upload",Z=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",$=this.hasAttribute("multiple")&&this.getAttribute("multiple")!=="false",j=this.getAttribute("variant")||"input",_=this.#X&&this.#X.length>0||!!this.getAttribute("url")||!!this.getAttribute("filename");if(this.innerHTML="",_){let q=J?`Accepts ${J.split(",").map((G)=>G.trim()).join(", ")}`:"";if(this.#j=document.createElement("fig-button"),this.#j.setAttribute("variant",j),this.#j.setAttribute("type","upload"),this.#j.className="fig-input-file-filename",Z)this.#j.setAttribute("disabled","");let X=document.createElement("fig-truncate");X.setAttribute("position","middle"),X.setAttribute("tooltip","");let Y=this.value,K=Y.lastIndexOf(".");if(K>0)X.setAttribute("tail",Y.slice(K));if(X.textContent=Y,this.#j.appendChild(X),this.#Q=document.createElement("input"),this.#Q.type="file",this.#Q.title="",this.#Q.disabled=Z,J)this.#Q.setAttribute("accept",J);if($)this.#Q.setAttribute("multiple","");if(this.#Q.addEventListener("change",this.#q),this.#j.appendChild(this.#Q),q)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",q),this.#$.appendChild(this.#j),this.appendChild(this.#$);else this.appendChild(this.#j);let N=document.createElement("fig-tooltip");if(N.setAttribute("text","Remove"),this.#Z=document.createElement("fig-button"),this.#Z.setAttribute("variant",j==="overlay"?"overlay":"ghost"),this.#Z.setAttribute("icon","true"),this.#Z.setAttribute("aria-label","Remove"),this.#Z.className="fig-input-file-clear",Z)this.#Z.setAttribute("disabled","");this.#Z.replaceChildren(d("minus")),this.#Z.addEventListener("click",this.#K),N.appendChild(this.#Z),this.appendChild(N)}else{let q=J?`Accepts ${J.split(",").map((X)=>X.trim()).join(", ")}`:"";if(q)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",q);if(this.#j=document.createElement("fig-button"),this.#j.setAttribute("variant",j),this.#j.setAttribute("type","upload"),this.#j.textContent=Q,Z)this.#j.setAttribute("disabled","");if(this.#Q=document.createElement("input"),this.#Q.type="file",this.#Q.title="",this.#Q.disabled=Z,J)this.#Q.setAttribute("accept",J);if($)this.#Q.setAttribute("multiple","");if(this.#Q.addEventListener("change",this.#q),this.#j.appendChild(this.#Q),this.#$)this.#$.appendChild(this.#j),this.appendChild(this.#$);else this.appendChild(this.#j)}}}customElements.define("fig-input-file",A1);class c extends HTMLElement{#Q={x:0.42,y:0};#J={x:0.58,y:1};#Z={stiffness:200,damping:15,mass:1};#$="bezier";#j=2;#X=null;#_=null;#Y=null;#q=null;#K=null;#G=null;#N=null;#U=null;#L=null;#W=null;#M=null;#B=null;#O=null;#z=0.8;#F=200;#R=200;#H=null;#P=null;#D=null;#C=5;#S=2;#T=10;#f=10;#A=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","edit"]}connectedCallback(){this.#j=parseInt(this.getAttribute("precision")||"2"),m(this,"--aspect-ratio",this.getAttribute("aspect-ratio"));let J=this.getAttribute("value");if(J)this.#k(J);this.#B=this.#E(),this.#g(),this.#_0()}disconnectedCallback(){if(this.#X=null,this.#D)this.#D.disconnect(),this.#D=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="aspect-ratio"){if(m(this,"--aspect-ratio",Z),this.#_)this.#m(),this.#d();return}if(J==="edit"){if(this.isConnected)this.#g();return}if(J==="value"&&Z){let $=this.#$;if(this.#k(Z),this.#B=this.#E(),$!==this.#$&&this.#V())this.#g();else{if(this.#_)this.#d();this.#J0(),this.#s()}}if(J==="precision")this.#j=parseInt(Z||"2")}get value(){if(this.#$==="spring"){let{stiffness:Q,damping:Z,mass:$}=this.#Z;return`spring(${Q}, ${Z}, ${$})`}let J=this.#j;return`${this.#Q.x.toFixed(J)}, ${this.#Q.y.toFixed(J)}, ${this.#J.x.toFixed(J)}, ${this.#J.y.toFixed(J)}`}get cssValue(){if(this.#$==="spring"){let Q=this.#I(),Z=20,$=Math.max(1,Math.floor(Q.length/20)),j=[];for(let _=0;_<Q.length;_+=$)j.push(Q[_].value.toFixed(3));if(Q.length>0)j.push(Q[Q.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}let J=this.#j;return`cubic-bezier(${this.#Q.x.toFixed(J)}, ${this.#Q.y.toFixed(J)}, ${this.#J.x.toFixed(J)}, ${this.#J.y.toFixed(J)})`}get preset(){return this.#B}set value(J){this.setAttribute("value",J)}#k(J){let Q=J.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if(Q)return this.#$="spring",this.#Z.stiffness=parseFloat(Q[1]),this.#Z.damping=parseFloat(Q[2]),this.#Z.mass=parseFloat(Q[3]),!0;let Z=J.split(",").map(($)=>parseFloat($.trim()));if(Z.length>=4&&Z.every(($)=>!isNaN($)))return this.#$="bezier",this.#Q.x=Z[0],this.#Q.y=Z[1],this.#J.x=Z[2],this.#J.y=Z[3],!0;return!1}#E(){if(this.#$==="bezier"){for(let Q of c.PRESETS){if(Q.type!=="bezier"||!Q.value)continue;if(Math.abs(this.#Q.x-Q.value[0])<0.001&&Math.abs(this.#Q.y-Q.value[1])<0.001&&Math.abs(this.#J.x-Q.value[2])<0.001&&Math.abs(this.#J.y-Q.value[3])<0.001)return Q.name}return"Custom bezier"}for(let Q of c.PRESETS){if(Q.type!=="spring"||!Q.spring)continue;if(Math.abs(this.#Z.stiffness-Q.spring.stiffness)<0.001&&Math.abs(this.#Z.damping-Q.spring.damping)<0.001&&Math.abs(this.#Z.mass-Q.spring.mass)<0.001)return Q.name}return"Custom spring"}#I(){let{stiffness:J,damping:Q,mass:Z}=this.#Z,$=0.004,j=5,_=[],q=0,X=0;for(let Y=0;Y<=5;Y+=0.004){let K=-J*(q-1)-Q*X;if(X+=K/Z*0.004,q+=X*0.004,_.push({t:Y,value:q}),Y>0.1&&Math.abs(q-1)<0.0005&&Math.abs(X)<0.0005)break}return _}static#x(J,Q=24){let{stiffness:Z,damping:$,mass:j}=J,_=0.004,q=5,X=[],Y=0,K=0;for(let z=0;z<=5;z+=0.004){let O=-Z*(Y-1)-$*K;if(K+=O/j*0.004,Y+=K*0.004,X.push({t:z,value:Y}),z>0.1&&Math.abs(Y-1)<0.001&&Math.abs(K)<0.001)break}let N=X[X.length-1].t||1,G=1;for(let z of X)if(z.value>G)G=z.value;let U=0;for(let z of X)if(z.value<U)U=z.value;let W=Math.max(G-U,1),B=6,L=Q-B*2,H=Math.max(1,Math.floor(X.length/30)),F="";for(let z=0;z<X.length;z+=H){let O=B+X[z].t/N*L,T=B+(1-(X[z].value-U)/W)*L;F+=(z===0?"M":"L")+O.toFixed(1)+","+T.toFixed(1)}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${F}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(J,Q,Z,$,j=24){let q=(j-12)/2,X=48,Y=[],K=(O,T,P,C,I)=>{let E=1-I;return E*E*E*O+3*E*E*I*T+3*E*I*I*P+I*I*I*C};for(let O=0;O<=48;O++){let T=O/48;Y.push({x:K(0,J,Z,1,T),y:K(0,Q,$,1,T)})}let N=1/0,G=-1/0,U=1/0,W=-1/0;for(let O of Y){if(O.x<N)N=O.x;if(O.x>G)G=O.x;if(O.y<U)U=O.y;if(O.y>W)W=O.y}let B=Math.max(G-N,0.000001),L=Math.max(W-U,0.000001),H=(O)=>q+(O-N)/B*12,F=(O)=>q+(1-(O-U)/L)*12,z="";for(let O=0;O<Y.length;O++){let T=H(Y[O].x),P=F(Y[O].y);z+=`${O===0?"M":"L"}${T.toFixed(1)},${P.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${z}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#V(){return this.getAttribute("edit")!=="false"}#g(){if(this.classList.toggle("spring-mode",this.#$==="spring"),this.classList.toggle("bezier-mode",this.#$!=="spring"),this.#o(),this.innerHTML=this.#b(),this.#v(),this.#_)this.#c(),this.#m(),this.#d();this.#s(),this.#G0()}static#h(J){return String(J).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}#w(){let J="",Q=void 0;for(let Z of c.PRESETS){if(!this.#V()&&!Z.value&&!Z.spring)continue;if(Z.group!==Q){if(Q!==void 0)J+="</optgroup>";if(Z.group)J+=`<optgroup label="${Z.group}">`;Q=Z.group}let $;if(Z.type==="spring"){let _=Z.spring||this.#Z;$=c.#x(_)}else{let _=Z.value||[this.#Q.x,this.#Q.y,this.#J.x,this.#J.y];$=c.curveIcon(..._)}let j=Z.name===this.#B?" selected":"";J+=`<option value="${Z.name}"${j}>${$} ${Z.name}</option>`}if(Q)J+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${J}</fig-dropdown>`}#b(){let Q=this.#w();if(!this.#V())return Q;let Z=`<fig-input-text class="fig-easing-curve-value-input" value="${c.#h(this.value)}" full></fig-input-text>`;if(this.#$==="spring")return`${Q}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
|
|
190
|
+
<rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
|
|
191
|
+
<line class="fig-easing-curve-target" x1="0" y1="40" x2="200" y2="40"/>
|
|
192
|
+
<line class="fig-easing-curve-diagonal" x1="0" y1="180" x2="0" y2="180"/>
|
|
193
|
+
<path class="fig-easing-curve-path"/>
|
|
194
|
+
<foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small" aria-label="Spring bounce handle"></fig-handle></foreignObject>
|
|
195
|
+
<foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small" aria-label="Spring duration handle"></fig-handle></foreignObject>
|
|
196
|
+
</svg></div>${Z}`;return`${Q}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
|
|
197
|
+
<rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
|
|
198
|
+
<line class="fig-easing-curve-diagonal" x1="0" y1="200" x2="200" y2="0"/>
|
|
199
|
+
<line class="fig-easing-curve-arm" data-arm="1"/>
|
|
200
|
+
<line class="fig-easing-curve-arm" data-arm="2"/>
|
|
201
|
+
<path class="fig-easing-curve-path"/>
|
|
202
|
+
<circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#S}"/>
|
|
203
|
+
<circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#S}"/>
|
|
204
|
+
<foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small" aria-label="First easing control point"></fig-handle></foreignObject>
|
|
205
|
+
<foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small" aria-label="Second easing control point"></fig-handle></foreignObject>
|
|
206
|
+
</svg></div>${Z}`}#y(J,Q){let Z=getComputedStyle(this).getPropertyValue(J).trim();if(!Z)return Q;let $=Number.parseFloat(Z);return Number.isFinite($)?$:Q}#o(){this.#S=this.#y("--easing-bezier-endpoint-radius",this.#S),this.#A=this.#y("--easing-duration-bar-radius",this.#A)}#v(){this.#_=this.querySelector(".fig-easing-curve-svg"),this.#Y=this.querySelector(".fig-easing-curve-path"),this.#q=this.querySelector('[data-arm="1"]'),this.#K=this.querySelector('[data-arm="2"]'),this.#G=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#N=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#U=this.querySelector('[data-endpoint="start"]'),this.#L=this.querySelector('[data-endpoint="end"]'),this.#W=this.querySelector(".fig-easing-curve-dropdown"),this.#M=this.querySelector(".fig-easing-curve-value-input"),this.#O=this.querySelector(".fig-easing-curve-target"),this.#H=this.querySelector(".fig-easing-curve-bounds"),this.#P=this.querySelector(".fig-easing-curve-diagonal")}#c(){let J=this.#G?.querySelector("fig-handle"),Q=this.#N?.querySelector("fig-handle");if(J){let Z=J.offsetWidth||this.#C*2,$=J.offsetHeight||this.#C*2;this.#C=Math.max(Z,$)/2,this.#G.setAttribute("width",Z),this.#G.setAttribute("height",$)}if(Q){let Z=Q.offsetWidth||this.#T,$=Q.offsetHeight||this.#f;if(this.#$==="spring")this.#T=Z,this.#f=$;this.#N.setAttribute("width",Z),this.#N.setAttribute("height",$)}}#_0(){if(this.#D||!window.ResizeObserver)return;this.#D=new ResizeObserver(()=>{if(this.#m())this.#d()}),this.#D.observe(this)}#m(){if(!this.#_)return!1;let J=this.#_.getBoundingClientRect(),Q=Math.max(1,Math.round(J.width||200)),Z=Math.max(1,Math.round(J.height||200)),$=Q!==this.#F||Z!==this.#R;return this.#F=Q,this.#R=Z,this.#_.setAttribute("viewBox",`0 0 ${Q} ${Z}`),$}#u(J,Q){return{x:J*this.#F,y:(1-Q)*this.#R}}#a(J,Q){return{x:J/this.#F,y:1-Q/this.#R}}#l={minVal:0,maxVal:1.2,totalTime:1};#p(J,Q){let $=this.#R-40,{minVal:j,maxVal:_}=this.#l,q=_-j||1;return{x:J*this.#F,y:20+(1-(Q-j)/q)*$}}#d(){if(this.#m(),this.#$==="spring")this.#e();else this.#n()}#q0(){this.#q?.classList.toggle("is-active",this.#$==="bezier"&&this.#X===1),this.#K?.classList.toggle("is-active",this.#$==="bezier"&&this.#X===2)}#n(){if(this.#H)this.#H.setAttribute("x","0"),this.#H.setAttribute("y","0"),this.#H.setAttribute("width",this.#F),this.#H.setAttribute("height",this.#R);if(this.#P)this.#P.setAttribute("x1","0"),this.#P.setAttribute("y1",this.#R),this.#P.setAttribute("x2",this.#F),this.#P.setAttribute("y2","0");let J=this.#u(0,0),Q=this.#u(this.#Q.x,this.#Q.y),Z=this.#u(this.#J.x,this.#J.y),$=this.#u(1,1);this.#Y.setAttribute("d",`M${J.x},${J.y} C${Q.x},${Q.y} ${Z.x},${Z.y} ${$.x},${$.y}`),this.#q.setAttribute("x1",J.x),this.#q.setAttribute("y1",J.y),this.#q.setAttribute("x2",Q.x),this.#q.setAttribute("y2",Q.y),this.#K.setAttribute("x1",$.x),this.#K.setAttribute("y1",$.y),this.#K.setAttribute("x2",Z.x),this.#K.setAttribute("y2",Z.y);let j=this.#C;if(this.#G.setAttribute("x",Q.x-j),this.#G.setAttribute("y",Q.y-j),this.#N.setAttribute("x",Z.x-j),this.#N.setAttribute("y",Z.y-j),this.#U)this.#U.setAttribute("cx",J.x),this.#U.setAttribute("cy",J.y);if(this.#L)this.#L.setAttribute("cx",$.x),this.#L.setAttribute("cy",$.y);this.#t()}#t(){if(!this.#_||!this.#G||!this.#N)return;let J=this.#Q.y>=this.#J.y?[this.#G,this.#N]:[this.#N,this.#G];for(let Q of J)this.#_.append(Q)}#e(){if(this.#H)this.#H.setAttribute("x","0"),this.#H.setAttribute("y","0"),this.#H.setAttribute("width",this.#F),this.#H.setAttribute("height",this.#R);let J=this.#I();if(!J.length)return;let Q=J[J.length-1].t||1,Z=0,$=1;for(let L of J){if(L.value<Z)Z=L.value;if(L.value>$)$=L.value}let j=Math.max(Math.abs(Z-1),Math.abs($-1),0.01),_=0;this.#l={minVal:1-j-_,maxVal:1+j+_,totalTime:Q};let q=Math.max(0.05,Math.min(0.95,this.#z)),X="";for(let L=0;L<J.length;L++){let H=J[L].t/Q*q,F=this.#p(H,J[L].value);X+=(L===0?"M":"L")+F.x.toFixed(1)+","+F.y.toFixed(1)}let Y=this.#p(q,1),K=this.#p(1,1);if(X+=`L${Y.x.toFixed(1)},${Y.y.toFixed(1)} L${K.x.toFixed(1)},${K.y.toFixed(1)}`,this.#Y.setAttribute("d",X),this.#O){let L=this.#p(0,1),H=this.#p(1,1);this.#O.setAttribute("x1",L.x),this.#O.setAttribute("y1",L.y),this.#O.setAttribute("x2",H.x),this.#O.setAttribute("y2",H.y)}let N=this.#Z0(J),G=N.t/Q*q,U=this.#p(G,N.value),W=this.#C;this.#G.setAttribute("x",U.x-W),this.#G.setAttribute("y",U.y-W);let B=this.#p(q,1);this.#N.setAttribute("x",B.x-this.#T/2),this.#N.setAttribute("y",B.y-this.#f/2)}#Z0(J){let Q={t:0,value:1},Z=!1;for(let $ of J){if($.value>=0.99)Z=!0;if(Z&&$.value>Q.value)Q={t:$.t,value:$.value}}return Q}#J0(){if(!this.#W)return;this.#W.value=this.#B,this.#F0()}#s(){if(!this.#M)return;this.#M.setAttribute("value",this.value)}#$0(J){let Q=J.split(",").map((Z)=>Number.parseFloat(Z.trim()));if(Q.length!==4||Q.some((Z)=>!Number.isFinite(Z)))return null;if(Q[0]<0||Q[0]>1||Q[2]<0||Q[2]>1)return null;return Q}#j0(J,Q){let Z=this.#$0(J);if(!Z){if(Q==="change")this.#s();return}let $=this.#$;if(this.#$="bezier",this.#Q.x=Z[0],this.#Q.y=Z[1],this.#J.x=Z[2],this.#J.y=Z[3],this.#B=this.#E(),$!==this.#$)this.#g();else if(this.#d(),this.#J0(),Q==="change")this.#s();this.#Q0(Q)}#B0(J,Q,Z){if(!J)return;for(let $ of J.querySelectorAll("option"))if($.value===Q)$.innerHTML=`${Z} ${Q}`}#F0(){if(!this.#W)return;if(!this.#V())return;let J=c.curveIcon(this.#Q.x,this.#Q.y,this.#J.x,this.#J.y),Q=c.#x(this.#Z);this.#B0(this.#W,"Custom bezier",J),this.#B0(this.#W,"Custom spring",Q),this.#B0(this.#W.select,"Custom bezier",J),this.#B0(this.#W.select,"Custom spring",Q)}#R0(J){this.#d(),this.#B=this.#E(),this.#J0(),this.#s(),this.#Q0(J)}#X0(J,Q){let Z=J.shiftKey?0.1:0.01,$=Q===1?this.#Q:this.#J;switch(J.key){case"ArrowLeft":$.x-=Z;break;case"ArrowRight":$.x+=Z;break;case"ArrowUp":$.y+=Z;break;case"ArrowDown":$.y-=Z;break;case"Home":$.x=0,$.y=0;break;case"End":$.x=1,$.y=1;break;default:return!1}return $.x=Math.max(0,Math.min(1,Math.round($.x*100)/100)),$.y=Math.round($.y*100)/100,this.#R0("input"),this.#Q0("change"),!0}#N0(J,Q){let Z=J.shiftKey?10:1;if(Q==="bounce")switch(J.key){case"ArrowUp":this.#Z.damping=Math.max(1,Math.round(this.#Z.damping-Z));break;case"ArrowDown":this.#Z.damping=Math.max(1,Math.round(this.#Z.damping+Z));break;case"Home":this.#Z.damping=1;break;case"End":this.#Z.damping=50;break;default:return!1}else{let $=Z*2;switch(J.key){case"ArrowLeft":this.#z=Math.max(0.05,this.#z-$/200),this.#Z.stiffness=Math.max(10,Math.round(this.#Z.stiffness+$*1.5));break;case"ArrowRight":this.#z=Math.min(0.95,this.#z+$/200),this.#Z.stiffness=Math.max(10,Math.round(this.#Z.stiffness-$*1.5));break;case"Home":this.#z=0.05;break;case"End":this.#z=0.95;break;default:return!1}}return this.#R0("input"),this.#Q0("change"),!0}#K0(J,Q){let Z=J?.querySelector("fig-handle");if(!Z)return;Z.addEventListener("pointerdown",($)=>{if($.preventDefault(),$.stopImmediatePropagation(),this.#$==="bezier")this.#U0($,Number(Q));else this.#M0($,Q)},{capture:!0}),Z.addEventListener("keydown",($)=>{if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!(this.#$==="bezier"?this.#X0($,Number(Q)):this.#N0($,Q)))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#Q0(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{mode:this.#$,value:this.value,cssValue:this.cssValue,preset:this.#B}}))}#G0(){if(this.#_&&this.#$==="bezier"){this.#K0(this.#G,"1"),this.#K0(this.#N,"2"),this.#G.addEventListener("pointerdown",(Q)=>this.#U0(Q,1)),this.#N.addEventListener("pointerdown",(Q)=>this.#U0(Q,2));let J=this.querySelector(".fig-easing-curve-svg-container");if(J)J.addEventListener("pointerdown",(Q)=>{if(Q.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#U0(Q,this.#D0(Q))})}else if(this.#_){this.#K0(this.#G,"bounce"),this.#K0(this.#N,"duration"),this.#G.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#M0(Q,"bounce")}),this.#N.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#M0(Q,"duration")});let J=this.querySelector(".fig-easing-curve-svg-container");if(J)J.addEventListener("pointerdown",(Q)=>{if(Q.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#M0(Q,"duration")})}if(this.#W)this.#W.addEventListener("change",(J)=>{let Q=J.detail,Z=c.PRESETS.find(($)=>$.name===Q);if(!Z)return;if(Z.type==="bezier"){if(Z.value)this.#Q.x=Z.value[0],this.#Q.y=Z.value[1],this.#J.x=Z.value[2],this.#J.y=Z.value[3];if(this.#B=Q,this.#$!=="bezier")this.#$="bezier",this.#g();else if(this.#_)this.#d(),this.#s()}else if(Z.type==="spring"){if(Z.spring)this.#Z={...Z.spring};if(this.#B=Q,this.#$!=="spring")this.#$="spring",this.#g();else if(this.#_)this.#d(),this.#s()}this.#Q0("input"),this.#Q0("change")});if(this.#M)this.#M.addEventListener("input",(J)=>{J.stopPropagation();let Q=J.detail??J.target?.value;if(typeof Q!=="string")return;this.#j0(Q,"input")}),this.#M.addEventListener("change",(J)=>{J.stopPropagation();let Q=J.detail??J.target?.value;if(typeof Q!=="string")return;this.#j0(Q,"change")})}#z0(J){let Q=this.#_.getScreenCTM();if(!Q)return{x:0,y:0};let Z=Q.inverse();return{x:Z.a*J.clientX+Z.c*J.clientY+Z.e,y:Z.b*J.clientX+Z.d*J.clientY+Z.f}}#D0(J){return this.#z0(J).x<=this.#F/2?1:2}#U0(J,Q){J.preventDefault(),this.#X=Q,this.#q0();let Z=(j)=>{if(!this.#X)return;let _=this.#z0(j),q=this.#a(_.x,_.y);if(q.x=Math.round(q.x*100)/100,q.y=Math.round(q.y*100)/100,q.x=Math.max(0,Math.min(1,q.x)),this.#X===1)this.#Q.x=q.x,this.#Q.y=q.y;else this.#J.x=q.x,this.#J.y=q.y;this.#d(),this.#B=this.#E(),this.#J0(),this.#s(),this.#Q0("input")},$=()=>{this.#X=null,this.#q0(),document.removeEventListener("pointermove",Z),document.removeEventListener("pointerup",$),this.#Q0("change")};document.addEventListener("pointermove",Z),document.addEventListener("pointerup",$)}#M0(J,Q){J.preventDefault(),this.#X=Q,this.classList.toggle("spring-bounce-dragging",Q==="bounce");let Z=this.#Z.damping,$=this.#Z.stiffness,j=this.#z,_=J.clientY,q=J.clientX,X=(K)=>{if(!this.#X)return;if(Q==="bounce"){let N=K.clientY-_;this.#Z.damping=Math.max(1,Math.round(Z+N*0.15))}else{let N=K.clientX-q;this.#z=Math.max(0.05,Math.min(0.95,j+N/200)),this.#Z.stiffness=Math.max(10,Math.round($-N*1.5))}this.#d(),this.#B=this.#E(),this.#J0(),this.#s(),this.#Q0("input")},Y=()=>{this.#X=null,this.classList.remove("spring-bounce-dragging"),document.removeEventListener("pointermove",X),document.removeEventListener("pointerup",Y),this.#Q0("change")};document.addEventListener("pointermove",X),document.addEventListener("pointerup",Y)}}customElements.define("fig-easing-curve",c);class T1 extends HTMLElement{#Q=0;#J=0;#Z=0;#$=1;#j=!1;#X=!1;#_=null;#Y=null;#q=null;#K=null;#G=(J)=>this.#E(J);#N=null;#U=[];#L={};#W={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#$=parseInt(this.getAttribute("precision")||"1"),m(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),m(this,"--perspective",this.getAttribute("perspective")),m(this,"--perspective-origin",this.getAttribute("perspective-origin")),this.#O(this.getAttribute("transform-origin")),this.#R(this.getAttribute("fields"));let J=this.getAttribute("value");if(J)this.#H(J);if(this.querySelector(".fig-3d-rotate-container"))this.#M();else this.#P();this.#F(this.getAttribute("selected")),this.#z()}disconnectedCallback(){this.#j=!1,this.#B()}#M(){this.#Y=this.querySelector(".fig-3d-rotate-container"),this.#_=this.querySelector(".fig-3d-rotate-cube"),this.#D(),this.#S(),this.#A()}#B(){if(this.#N?.abort(),this.#N=null,this.#q)window.removeEventListener("keydown",this.#q),window.removeEventListener("keyup",this.#K),this.#q=null,this.#K=null}#O(J){if(!J||!J.trim()){this.style.removeProperty("--transform-origin");return}let Q=J.trim().split(/\s+/);if(Q.length===2)this.style.setProperty("--transform-origin",`${Q[0]} ${Q[1]} -50cqi`);else this.style.setProperty("--transform-origin",J.trim())}#z(){if(!this.#Y)return;this.#Y.style.cursor=this.#k?"":"default"}#F(J){if(!this.#_)return;let Q=this.#_.querySelectorAll(".fig-3d-rotate-face"),Z=J?J.trim().toLowerCase():"";for(let $ of Q)$.classList.toggle("selected",Z!==""&&$.classList.contains(Z))}#R(J){if(!J||!J.trim()){this.#U=[];return}let Q=["rotateX","rotateY","rotateZ"];this.#U=J.split(",").map((Z)=>Z.trim()).filter((Z)=>Q.includes(Z))}attributeChangedCallback(J,Q,Z){if(J==="aspect-ratio"){m(this,"--aspect-ratio",Z);return}if(J==="perspective"){m(this,"--perspective",Z);return}if(J==="perspective-origin"){m(this,"--perspective-origin",Z);return}if(J==="transform-origin"){this.#O(Z);return}if(J==="selected"){this.#F(Z);return}if(J==="drag"){this.#z();return}if(J==="fields"){if(this.#R(Z),this.#_)this.#P();return}if(!this.#_)return;if(J==="value"&&Z){if(this.#j)return;this.#H(Z),this.#S(),this.#C()}if(J==="precision")this.#$=parseInt(Z||"1")}get value(){let J=this.#$;return`rotateX(${this.#Q.toFixed(J)}deg) rotateY(${this.#J.toFixed(J)}deg) rotateZ(${this.#Z.toFixed(J)}deg)`}set value(J){this.setAttribute("value",J)}get rotateX(){return this.#Q}get rotateY(){return this.#J}get rotateZ(){return this.#Z}#H(J){let Q=J.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),Z=J.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),$=J.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if(Q)this.#Q=parseFloat(Q[1]);if(Z)this.#J=parseFloat(Z[1]);if($)this.#Z=parseFloat($[1])}#P(){let J={rotateX:"X",rotateY:"Y",rotateZ:"Z"},Q={rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#Z},Z=this.#U.map(($)=>`<fig-input-number
|
|
207
|
+
name="${$}"
|
|
208
|
+
step="1"
|
|
209
|
+
precision="1"
|
|
210
|
+
value="${Q[$]}"
|
|
211
|
+
units="°">
|
|
212
|
+
<span slot="prepend">${J[$]}</span>
|
|
213
|
+
</fig-input-number>`).join("");this.innerHTML=`<div class="fig-3d-rotate-container" tabindex="0">
|
|
214
|
+
<div class="fig-3d-rotate-scene">
|
|
215
|
+
<div class="fig-3d-rotate-cube">
|
|
216
|
+
<div class="fig-3d-rotate-face front"></div>
|
|
217
|
+
<div class="fig-3d-rotate-face back"></div>
|
|
218
|
+
<div class="fig-3d-rotate-face right"></div>
|
|
219
|
+
<div class="fig-3d-rotate-face left"></div>
|
|
220
|
+
<div class="fig-3d-rotate-face top"></div>
|
|
221
|
+
<div class="fig-3d-rotate-face bottom"></div>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>${Z}`,this.#Y=this.querySelector(".fig-3d-rotate-container"),this.#_=this.querySelector(".fig-3d-rotate-cube"),this.#D(),this.#S(),this.#A()}#D(){this.#L={};for(let J of this.#U){let Q=this.querySelector(`fig-input-number[name="${J}"]`);if(!Q)continue;if(this.#L[J]=Q,!this.#W[J])this.#W[J]=($)=>{$.stopPropagation();let j=parseFloat($.target.value);if(isNaN(j))return;if(J==="rotateX")this.#Q=j;else if(J==="rotateY")this.#J=j;else if(J==="rotateZ")this.#Z=j;this.#S(),this.#T($.type)};let Z=this.#W[J];Q.removeEventListener("input",Z),Q.removeEventListener("change",Z),Q.addEventListener("input",Z),Q.addEventListener("change",Z)}}#C(){let J={rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#Z};for(let Q of this.#U){let Z=this.#L[Q];if(Z)Z.setAttribute("value",J[Q].toFixed(this.#$))}}#S(){if(!this.#_)return;this.#_.style.transform=`rotateX(${this.#Q}deg) rotateY(${this.#J}deg) rotateZ(${this.#Z}deg)`}#T(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,rotateX:this.#Q,rotateY:this.#J,rotateZ:this.#Z}}))}#f(J){if(!this.#X)return J;return Math.round(J/15)*15}#A(){if(this.#B(),!this.#Y)return;this.#N=new AbortController,this.#Y.addEventListener("pointerdown",this.#G,{signal:this.#N.signal}),this.#q=(J)=>{if(J.key==="Shift")this.#X=!0},this.#K=(J)=>{if(J.key==="Shift")this.#X=!1},window.addEventListener("keydown",this.#q),window.addEventListener("keyup",this.#K)}get#k(){let J=this.getAttribute("drag");return J===null||J.toLowerCase()!=="false"}#E(J){if(!this.#k)return;J.preventDefault(),this.#j=!0,this.#Y.classList.add("dragging"),this.#Y.setPointerCapture(J.pointerId);let{clientX:Q,clientY:Z}=J,$=this.#Q,j=this.#J,_=(X)=>{if(!this.#j)return;if(X.buttons===0){q();return}let Y=X.clientX-Q,K=X.clientY-Z;this.#J=this.#f(j+Y*0.5),this.#Q=this.#f($-K*0.5),this.#S(),this.#C(),this.setAttribute("value",this.value),this.#T("input")},q=()=>{if(!this.#j)return;this.setAttribute("value",this.value),this.#j=!1,this.#Y.classList.remove("dragging"),this.#Y.removeEventListener("pointermove",_),this.#Y.removeEventListener("pointerup",q),this.#Y.removeEventListener("pointercancel",q),this.#Y.removeEventListener("lostpointercapture",q),this.#T("change")};this.#Y.addEventListener("pointermove",_),this.#Y.addEventListener("pointerup",q),this.#Y.addEventListener("pointercancel",q),this.#Y.addEventListener("lostpointercapture",q)}}customElements.define("fig-3d-rotate",T1);class k0 extends HTMLElement{#Q=50;#J=50;#Z=0;#$=null;#j=[];#X=null;#_=null;#Y=null;#q=!1;#K=!1;#G=null;#N=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"]}#L(){this.#$=this.querySelector(".origin-grid"),this.#j=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#X=this.querySelector("fig-handle"),this.#_=this.querySelector('fig-input-number[name="x"]'),this.#Y=this.querySelector('fig-input-number[name="y"]'),this.#S(),this.#T(),this.#P(),this.#v()}connectedCallback(){if(this.#Z=parseInt(this.getAttribute("precision")||"0"),m(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),this.#R(this.getAttribute("value")),this.querySelector(".fig-origin-grid-surface"))this.#L();else this.#H();this.#B(),this.#D()}disconnectedCallback(){this.#q=!1,this.#w(),this.#o()}get value(){let J=this.#Z;return`${this.#Q.toFixed(J)}% ${this.#J.toFixed(J)}%`}set value(J){this.setAttribute("value",J)}attributeChangedCallback(J,Q,Z){if(J==="aspect-ratio"){m(this,"--aspect-ratio",Z);return}if(J==="drag"){this.#B();return}if(J==="fields"){this.#H(),this.#B(),this.#D();return}if(J==="precision"){this.#Z=parseInt(Z||"0"),this.#P(),this.#D();return}if(J==="value"){if(this.#K||this.#q)return;this.#R(Z),this.#S(),this.#T(),this.#P()}}get#W(){let J=this.getAttribute("drag");return J===null||J.toLowerCase()!=="false"}get#M(){let J=this.getAttribute("fields");if(J===null)return!1;return J.toLowerCase()!=="false"}#B(){if(!this.#$)return;this.#$.classList.toggle("drag-disabled",!this.#W)}#O(J){return Math.max(0,Math.min(100,J))}#z(J,Q){let Z=(J||"").trim().toLowerCase();if(!Z)return Q==="x"?this.#Q:this.#J;let $=Q==="x"?{left:0,center:50,right:100}:{top:0,center:50,bottom:100};if(Z in $)return $[Z];let j=Number.parseFloat(Z.replace("%",""));if(Number.isFinite(j))return j;return Q==="x"?this.#Q:this.#J}#F(J){let Q=J.trim().replace(/,/g," ").split(/\s+/).filter(Boolean);if(Q.length<1)return;if(Q.length===1){let Z=this.#z(Q[0],"x");this.#Q=Z,this.#J=Z;return}this.#Q=this.#z(Q[0],"x"),this.#J=this.#z(Q[1],"y")}#R(J){let Q=typeof J==="string"?J.trim():"";if(!Q){this.#Q=50,this.#J=50;return}this.#F(Q)}#H(){let J=Array.from({length:9},(j,_)=>{let q=_%3,X=Math.floor(_/3);return`<span class="origin-grid-cell" data-col="${q}" data-row="${X}">
|
|
225
|
+
<span class="origin-grid-dot"></span>
|
|
226
|
+
</span>`}).join(""),Q=this.#Q.toFixed(this.#Z),Z=this.#J.toFixed(this.#Z),$=this.#M?`<div class="origin-values">
|
|
227
|
+
<fig-input-number name="x" value="${Q}" step="1" units="%"><span slot="prepend">X</span></fig-input-number>
|
|
228
|
+
<fig-input-number name="y" value="${Z}" step="1" units="%"><span slot="prepend">Y</span></fig-input-number>
|
|
229
|
+
</div>`:"";this.innerHTML=`<div class="fig-origin-grid-surface">
|
|
230
|
+
<div class="origin-grid" aria-label="Transform origin grid">
|
|
231
|
+
<div class="origin-grid-cells">${J}</div>
|
|
232
|
+
<fig-handle></fig-handle>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
${$}`,this.#$=this.querySelector(".origin-grid"),this.#j=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#X=this.querySelector("fig-handle"),this.#_=this.querySelector('fig-input-number[name="x"]'),this.#Y=this.querySelector('fig-input-number[name="y"]'),this.#S(),this.#T(),this.#P(),this.#v()}#P(){let J=this.#Q.toFixed(this.#Z),Q=this.#J.toFixed(this.#Z);if(this.#_)this.#_.setAttribute("value",J);if(this.#Y)this.#Y.setAttribute("value",Q)}#D(){let J=this.value;if(this.getAttribute("value")===J)return;this.#K=!0,this.setAttribute("value",J),this.#K=!1}#C(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,x:this.#Q,y:this.#J}}))}#S(){if(!this.#X)return;let J=(Q)=>16.6667+this.#O(Q)/100*66.6667;this.#X.style.left=`${J(this.#Q)}%`,this.#X.style.top=`${J(this.#J)}%`}#T(){if(!this.#X)return;let J=this.#Q<0||this.#Q>100,Q=this.#J<0||this.#J>100,Z=this.#Q<0,$=this.#Q>100,j=this.#J<0,_=this.#J>100;this.#X.classList.toggle("beyond-bounds-x",J),this.#X.classList.toggle("beyond-bounds-y",Q),this.#X.classList.toggle("overflow-left",Z),this.#X.classList.toggle("overflow-right",$),this.#X.classList.toggle("overflow-up",j),this.#X.classList.toggle("overflow-down",_)}#f(J,Q){if(!this.#$)return null;let Z=this.#$.getBoundingClientRect(),$=(J-Z.left)/Math.max(Z.width,1),j=(Q-Z.top)/Math.max(Z.height,1);if($<0||$>1||j<0||j>1)return null;let _=Math.max(0,Math.min(2,Math.floor($*3))),q=Math.max(0,Math.min(2,Math.floor(j*3)));return this.#j.find((X)=>Number(X.getAttribute("data-col"))===_&&Number(X.getAttribute("data-row"))===q)}#A(){for(let J of this.#j)J.classList.remove("is-hovered")}#k(J){if(this.#A(),J)J.classList.add("is-hovered")}#E(J,Q,Z){let $=Number(J),j=Number(Q);if(!Number.isFinite($)||!Number.isFinite(j))return;if($===this.#Q&&j===this.#J&&Z==="input")return;this.#Q=$,this.#J=j,this.#S(),this.#T(),this.#P(),this.#D(),this.#C(Z)}#I(J,Q){if(!this.#$)return{x:this.#Q,y:this.#J};let Z=this.#$.getBoundingClientRect(),$=Z.width/6,j=Z.height/6,_=Math.max(1,Z.width-$*2),q=Math.max(1,Z.height-j*2),X=(J-(Z.left+$))/_,Y=(Q-(Z.top+j))/q;return{x:X*100,y:Y*100}}#x(J,Q){if(!this.#$)return{x:50,y:50};let Z=this.#$.getBoundingClientRect(),$=(J-Z.left)/Math.max(Z.width,1)*3,j=(Q-Z.top)/Math.max(Z.height,1)*3,_=Math.max(0,Math.min(2,Math.floor($))),q=Math.max(0,Math.min(2,Math.floor(j)));return{x:_*50,y:q*50}}#V(J){let Z=J,$=1/0;for(let j of k0.SNAP_POINTS){let _=Math.abs(J-j);if(_<$)$=_,Z=j}return $<=2.5?Z:J}#g(J,Q){if(!Q)return J;return{x:this.#V(J.x),y:this.#V(J.y)}}#h(J){if(!this.#W)return!1;let Q=J.shiftKey?10:1,Z=this.#Q,$=this.#J;switch(J.key){case"ArrowLeft":Z-=Q;break;case"ArrowRight":Z+=Q;break;case"ArrowUp":$-=Q;break;case"ArrowDown":$+=Q;break;case"Home":Z=0,$=0;break;case"End":Z=100,$=100;break;default:return!1}return this.#E(this.#O(Z),this.#O($),"input"),this.#C("change"),!0}#w(){if(!this.#$||!this.#N||!this.#U)return;this.#$.removeEventListener("pointermove",this.#N),this.#$.removeEventListener("pointerup",this.#U),this.#$.removeEventListener("pointercancel",this.#U),this.#$.removeEventListener("lostpointercapture",this.#U),this.#N=null,this.#U=null}#b(J){if(!this.#$||!this.#W)return;J.preventDefault(),this.#q=!0,this.#G=J.pointerId;let{clientX:Q,clientY:Z}=J,$=3,j=!1;this.#$.setPointerCapture(J.pointerId),this.#N=(_)=>{if(!this.#q||_.pointerId!==this.#G)return;let q=_.clientX-Q,X=_.clientY-Z,Y=Math.hypot(q,X);if(!j&&Y<$)return;if(!j)j=!0,this.#$.classList.add("is-dragging"),this.#A();let K=this.#g(this.#I(_.clientX,_.clientY),_.shiftKey);this.#E(K.x,K.y,"input")},this.#U=(_)=>{if(!this.#q||_.pointerId!==this.#G)return;if(this.#q=!1,this.#G=null,this.#$.classList.remove("is-dragging"),this.#A(),this.#w(),!j){let q=this.#x(Q,Z);this.#E(q.x,q.y,"input")}this.#C("change")},this.#$.addEventListener("pointermove",this.#N),this.#$.addEventListener("pointerup",this.#U),this.#$.addEventListener("pointercancel",this.#U),this.#$.addEventListener("lostpointercapture",this.#U)}#y=null;#o(){this.#y?.abort(),this.#y=null}#v(){if(this.#o(),!this.#$||!this.#X)return;this.#y=new AbortController;let{signal:J}=this.#y;this.#$.addEventListener("pointerdown",(Z)=>{let $=this.#f(Z.clientX,Z.clientY);if(this.#k($),this.#W){this.#b(Z);return}let j=this.#x(Z.clientX,Z.clientY);this.#E(j.x,j.y,"input"),this.#C("change")},{signal:J}),this.#$.addEventListener("pointermove",(Z)=>{if(this.#q)return;let $=this.#f(Z.clientX,Z.clientY);this.#k($)},{signal:J}),this.#$.addEventListener("pointerleave",()=>{this.#A()},{signal:J}),this.#X.addEventListener("keydown",(Z)=>{if(!this.#h(Z))return;Z.preventDefault(),Z.stopPropagation()},{signal:J});let Q=(Z,$)=>{if(!Z)return;let j=(_)=>{let q=Number.parseFloat(_.target.value);if(!Number.isFinite(q))return;if($==="x")this.#E(q,this.#J,"input");else this.#E(this.#Q,q,"input")};Z.addEventListener("input",j,{signal:J}),Z.addEventListener("change",j,{signal:J}),Z.addEventListener("focusout",()=>{this.#C("change")},{signal:J})};Q(this.#_,"x"),Q(this.#Y,"y")}}customElements.define("fig-origin-grid",k0);class P1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=null;#j=null;#X=null;#_=null;#Y=null;#q=!1;#K={x:0.5,y:0.5};#G=!1;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.#Q=(J)=>this.#D(J),this.#J=()=>{this.isDragging=!0,this.plane?.classList.add("dragging")},this.#Z=(J)=>this.#C(J),this.#$=()=>this.#S(),this.#j=(J)=>this.#F(J),this.#X=(J)=>this.#R(J),this.#_=()=>this.#H(),this.#Y=()=>this.#H()}#N(){this.#O(),this.#A(),this.#E(),this.#I(),this.#G=!0}connectedCallback(){p(this,()=>{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",m(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),!this.hasAttribute("value"))this.setAttribute("value","50% 50%");if(this.querySelector(".fig-input-joystick-plane")){this.#N();return}this.#W(),this.#O(),this.#A(),this.#E(),this.#I(),this.#G=!0})}#U(J){return this.coordinates==="math"?1-J:J}disconnectedCallback(){this.#z()}get#L(){let J=this.getAttribute("fields");if(J===null)return!1;return J.toLowerCase()!=="false"}#W(){this.innerHTML=this.#B()}#M(){let J=(this.getAttribute("axis-labels")||"").trim();if(!J)return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1};let Q=J.split(/[\s,]+/).filter(Boolean);if(Q.length===1)return{left:"",right:"",top:Q[0],bottom:"",leftNoRotate:!1};if(Q.length===2){let[Z,$]=Q;return{left:Z,right:"",top:"",bottom:$,leftNoRotate:!0}}if(Q.length===4){let[Z,$,j,_]=Q;return{left:Z,right:$,top:j,bottom:_,leftNoRotate:!1}}return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1}}#B(){let J=this.#M();return`
|
|
236
|
+
<div class="fig-input-joystick-plane-container">
|
|
237
|
+
${[J.left?`<label class="fig-joystick-axis-label left${J.leftNoRotate?" no-rotate":""}" aria-hidden="true">${J.left}</label>`:"",J.right?`<label class="fig-joystick-axis-label right" aria-hidden="true">${J.right}</label>`:"",J.top?`<label class="fig-joystick-axis-label top" aria-hidden="true">${J.top}</label>`:"",J.bottom?`<label class="fig-joystick-axis-label bottom" aria-hidden="true">${J.bottom}</label>`:""].join("")}
|
|
238
|
+
<div class="fig-input-joystick-plane">
|
|
239
|
+
<div class="fig-input-joystick-guides"></div>
|
|
240
|
+
<fig-handle drag drag-surface=".fig-input-joystick-plane" drag-axes="x,y" drag-snapping="modifier"></fig-handle>
|
|
241
|
+
</div>
|
|
242
|
+
<fig-tooltip text="Reset">
|
|
243
|
+
<fig-button variant="ghost" icon="true" class="fig-joystick-reset" aria-label="Reset to default">
|
|
244
|
+
<fig-icon name="reset" size="small"></fig-icon>
|
|
245
|
+
</fig-button>
|
|
246
|
+
</fig-tooltip>
|
|
247
|
+
</div>
|
|
248
|
+
${this.#L?`<div class="joystick-values">
|
|
249
|
+
<fig-input-number
|
|
250
|
+
name="x"
|
|
251
|
+
step="1"
|
|
252
|
+
value="${(this.position.x*100).toFixed(this.precision)}"
|
|
253
|
+
min="0"
|
|
254
|
+
max="100"
|
|
255
|
+
units="%">
|
|
256
|
+
<span slot="prepend">X</span>
|
|
257
|
+
</fig-input-number>
|
|
258
|
+
<fig-input-number
|
|
259
|
+
name="y"
|
|
260
|
+
step="1"
|
|
261
|
+
min="0"
|
|
262
|
+
max="100"
|
|
263
|
+
value="${(this.position.y*100).toFixed(this.precision)}"
|
|
264
|
+
units="%">
|
|
265
|
+
<span slot="prepend">Y</span>
|
|
266
|
+
</fig-input-number>
|
|
267
|
+
</div>`:""}
|
|
268
|
+
`}#O(){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.#Z),this.cursor?.addEventListener("change",this.#$);let J=this.querySelector(".fig-joystick-reset");if(J)J.addEventListener("click",()=>this.#x());if(this.#L&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#j),this.xInput.addEventListener("change",this.#j),this.xInput.addEventListener("focusout",this.#_),this.yInput.addEventListener("input",this.#X),this.yInput.addEventListener("change",this.#X),this.yInput.addEventListener("focusout",this.#Y)}#z(){if(this.plane?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("pointerdown",this.#J),this.cursor?.removeEventListener("input",this.#Z),this.cursor?.removeEventListener("change",this.#$),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#L&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#j),this.xInput.removeEventListener("change",this.#j),this.xInput.removeEventListener("focusout",this.#_),this.yInput.removeEventListener("input",this.#X),this.yInput.removeEventListener("change",this.#X),this.yInput.removeEventListener("focusout",this.#Y)}#F(J){let Q=Number.parseFloat(J.target.value);if(!Number.isFinite(Q))return;this.position.x=Math.max(0,Math.min(1,Q/100)),this.#A(),this.#E(),this.#T()}#R(J){let Q=Number.parseFloat(J.target.value);if(!Number.isFinite(Q))return;this.position.y=Math.max(0,Math.min(1,Q/100)),this.#A(),this.#E(),this.#T()}#H(){this.#E(),this.#f()}#P(J,Q,{syncHandle:Z=!0}={}){let $=Math.max(0,Math.min(1,J)),j=Math.max(0,Math.min(1,Q)),_=this.coordinates==="math"?1-j:j;if(this.position={x:$,y:_},Z)this.#A();this.#k(),this.#E()}#D(J){if(!this.plane||!this.cursor)return;if(J.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;let Q=this.plane.getBoundingClientRect(),Z=Q.width>0?(J.clientX-Q.left)/Q.width:0.5,$=Q.height>0?(J.clientY-Q.top)/Q.height:0.5;this.cursor.value=`${Math.round(Z*100)}% ${Math.round($*100)}%`,this.#P(Z,$,{syncHandle:!1}),this.#T(),this.#f()}#C(J){let Q=J.detail??{};if(typeof Q.px!=="number"||typeof Q.py!=="number")return;this.#P(Q.px,Q.py,{syncHandle:!1}),this.#T()}#S(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#E(),this.#f()}#T(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#f(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#A(){let J=this.#U(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${J*100}%`;this.#k()}#k(){if(this.#L&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#E(){let J=this.value;if(this.getAttribute("value")!==J)this.#q=!0,this.setAttribute("value",J),this.#q=!1;this.#I()}#I(){let J=this.#K,Q=Math.round(this.position.x*100)===Math.round(J.x*100)&&Math.round(this.position.y*100)===Math.round(J.y*100);this.toggleAttribute("default",Q),this.style.setProperty("--is-not-default",Q?"0":"1")}#x(){this.position={...this.#K},this.#A(),this.#E(),this.#T(),this.#f()}focus(){this.cursor?.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(J){let Q=J==null?"":String(J).trim();if(!Q)this.position={x:0.5,y:0.5};else{let Z=Q.split(/[\s,]+/).filter(Boolean),$=(q)=>{if(!q)return 0.5;let X=q.includes("%"),Y=Number.parseFloat(q.replace(/%/g,"").trim());if(!Number.isFinite(Y))return 0.5;let K=X||Math.abs(Y)>1?Y/100:Y;return Math.max(0,Math.min(1,K))},j=$(Z[0]),_=$(Z[1]??Z[0]);this.position={x:j,y:_}}if(this.#G)this.#A(),this.#I()}attributeChangedCallback(J,Q,Z){if(J==="aspect-ratio"){m(this,"--aspect-ratio",Z);return}if(J==="value"){if(this.#q||this.isDragging)return;this.value=Z}if(J==="precision")this.precision=parseInt(Z);if(J==="transform")this.transform=Number(Z);if(J==="fields"&&Z!==Q)this.#z(),this.#W(),this.#O(),this.#A();if(J==="axis-labels"&&Z!==Q)this.#z(),this.#W(),this.#O(),this.#A();if(J==="coordinates")this.coordinates=Z||"screen",this.#A()}}customElements.define("fig-joystick",P1);class S0 extends HTMLElement{get durationPropertyName(){return this.localName==="fig-skeleton"?"--fig-skeleton-duration":"--fig-shimmer-duration"}connectedCallback(){let J=this.getAttribute("duration");if(J)this.style.setProperty(this.durationPropertyName,J);this.#Q()}static get observedAttributes(){return["duration","playing","aria-label","aria-labelledby"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(J){if(J)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(J,Q,Z){if(J==="duration")this.style.setProperty(this.durationPropertyName,Z||"1.5s");if(J==="playing"||J==="aria-label"||J==="aria-labelledby")this.#Q()}#Q(){let J=this.playing;if(this.setAttribute("aria-busy",J?"true":"false"),this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")){if(!this.hasAttribute("role"))this.setAttribute("role","status");this.removeAttribute("aria-hidden")}else this.removeAttribute("role"),this.setAttribute("aria-hidden","true")}}customElements.define("fig-shimmer",S0);class C1 extends S0{connectedCallback(){super.connectedCallback(),this.inert=!0,this.setAttribute("inert","")}}customElements.define("fig-skeleton",C1);class E1 extends HTMLElement{static observedAttributes=["name","collapsible","open"];#Q=null;#J=null;connectedCallback(){this.#j()}disconnectedCallback(){if(this.#J)this.#J.removeEventListener("click",this.#Z);if(this.#Q)this.#Q.removeEventListener("click",this.#Z),this.#Q.removeEventListener("keydown",this.#$),this.#Q.querySelector("h3")?.removeEventListener("click",this.#Z)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){this.#Q?.setAttribute("aria-expanded",String(this.open));return}this.#j()}get open(){let J=this.getAttribute("open");return J!==null&&J!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Q?.setAttribute("aria-expanded",String(!!J)),Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}#Z=(J)=>{J.stopPropagation(),this.open=!this.open};#$=(J)=>{if(J.key!=="Enter"&&J.key!==" ")return;J.preventDefault(),J.stopPropagation(),this.open=!this.open};#j(){let J=this.hasAttribute("collapsible"),Z=this.getAttribute("name")||(J?"Group":null),$=this.querySelector(":scope > fig-header");if(!Z&&!J&&!$){if(this.#Q&&this.#Q.dataset.generated)this.#Q.remove(),this.#Q=null,this.#J=null;return}if($)this.#Q=$;else if(!this.#Q||!this.#Q.dataset.generated)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let j=this.#Q.querySelector("h3");if(!j)j=document.createElement("h3"),this.#Q.prepend(j);if(!j.id)j.id=u();if(this.#Q.dataset.generated)j.textContent=Z;if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",j.id);if(J){if(!j.querySelector(".fig-group-chevron")){let _=d("chevron",{size:"small",className:"fig-group-chevron"});j.prepend(_)}if(this.#J=j.querySelector(".fig-group-chevron"),j.removeEventListener("click",this.#Z),this.#Q.removeEventListener("click",this.#Z),this.#Q.addEventListener("click",this.#Z),this.#Q.setAttribute("role","button"),this.#Q.setAttribute("tabindex","0"),this.#Q.setAttribute("aria-expanded",String(this.open)),this.#Q.removeEventListener("keydown",this.#$),this.#Q.addEventListener("keydown",this.#$),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Q.setAttribute("aria-expanded","false")}else{if(j.removeEventListener("click",this.#Z),this.#Q.removeEventListener("click",this.#Z),this.#Q.removeAttribute("role"),this.#Q.removeAttribute("tabindex"),this.#Q.removeAttribute("aria-expanded"),this.#Q.removeEventListener("keydown",this.#$),this.#J)this.#J.remove(),this.#J=null;this.removeAttribute("open")}}}customElements.define("fig-group",E1);class k1 extends HTMLElement{}customElements.define("fig-header",k1);class S1 extends HTMLElement{}customElements.define("fig-footer",S1);class f1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","status");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Loading")}}customElements.define("fig-spinner",f1);class I1 extends HTMLElement{static get observedAttributes(){return["fit"]}connectedCallback(){this.#Q()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="fit")this.#Q()}#Q(){let J=this.getAttribute("fit");if(J)this.style.setProperty("--fig-preview-fit",J);else this.style.removeProperty("--fig-preview-fit")}}customElements.define("fig-preview",I1);class f extends HTMLElement{static#Q=new Set(["oklch","hsl"]);static#J=10;static#Z=10;static#$=8;static#j=3;static#X=210;static#_={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#Y=!1;#q=null;#K=null;#G={...f.#_};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#G}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#N(),this.#U(),this.#C(),this.#S()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J!=="value")return;if(this.#U(),this.#Y)this.#S()}#N(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#U(){let J=this.getAttribute("value");if(!J){this.#G={...f.#_,stops:f.#_.stops.map((Q)=>({...Q}))};return}try{let Q=JSON.parse(J),Z=Q?.type==="gradient"&&Q.gradient?Q.gradient:Q?.gradient?Q.gradient:Q;if(!Z||typeof Z!=="object")return;this.#G=this.#L({...f.#_,...Z})}catch{}}#L(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase(),$=String(Q.hueInterpolation??"shorter").toLowerCase(),j=Array.isArray(Q.stops)?Q.stops.map((_)=>({color:String(_?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:_?.position??0,opacity:_?.opacity??100})):f.#_.stops.map((_)=>({..._}));if(j.length<2)return{...f.#_,stops:f.#_.stops.map((_)=>({..._}))};return{type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):135,interpolationSpace:Z,hueInterpolation:$,stops:j}}#W(){return f.#Q.has(this.#G.interpolationSpace||"srgb")}#M(J){let{r:Q,g:Z,b:$}=n(J);if(this.#G.interpolationSpace==="hsl")return P0(Q,Z,$).h;let j=j0(Q,Z,$);return(T0(j.l,j.a,j.b).h%360+360)%360}#B(){let J=this.#H(),Q=this.#M(J[0]?.color||"#FF0000"),Z=this.#M(J[J.length-1]?.color||"#4F9EFF"),$=f.#X-Q,_=((f.#X-Z-$)%360+360)%360,q=_===0?0:_-360,X=this.#G.hueInterpolation||"shorter",Y;if(X==="increasing")Y=q;else if(X==="decreasing")Y=_;else if(X==="longer")Y=_<180?q:_;else Y=_<=180?_:q;let K=Math.sign(Y),N=Math.asin(f.#j/2/f.#$)*180/Math.PI,G=Math.min(N,Math.max(0,(Math.abs(Y)-0.01)/2));return{startDeg:$+K*G,sweepDeg:Y-K*G*2}}#O(J){let Q=J*Math.PI/180;return{x:f.#J+f.#$*Math.cos(Q),y:f.#Z+f.#$*Math.sin(Q)}}#z(J,Q){let Z=J+Q,$=this.#O(J),j=this.#O(Z),_=Math.abs(Q)>180?1:0,q=Q>=0?1:0;return`M ${$.x} ${$.y} A ${f.#$} ${f.#$} 0 ${_} ${q} ${j.x} ${j.y}`}#F(){let J=this.#O(180),Q=this.#O(0);return`M ${J.x} ${J.y} L ${Q.x} ${Q.y}`}#R(J){let Q=f.#j,Z=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Q}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(Z)}")`}#H(){return[...this.#G.stops].sort((J,Q)=>(J.position??0)-(Q.position??0))}#P(){let J=this.#G.interpolationSpace||"srgb";if(J==="srgb")return"";if(f.#Q.has(J))return` in ${J} ${this.#G.hueInterpolation||"shorter"} hue`;return` in ${J}`}#D(){let J=this.#H(),Q=this.#P();if(this.#W()){let $=(f.#X+90)%360,j=this.#G.interpolationSpace,_=(X)=>j==="oklch"?`oklch(65% 0.25 ${X})`:`hsl(${X} 100% 50%)`,q=[0,300,240,180,120,60,0].map(_).join(", ");return`conic-gradient(from ${$}deg in ${j} decreasing hue, ${q})`}let Z=J.map(($)=>`${$.color} ${$.position??0}%`).join(", ");return`linear-gradient(90deg${Q}, ${Z})`}#C(){if(this.#Y)return;let J=f.#j;this.innerHTML=`
|
|
269
|
+
<svg class="fig-interpolation-swatch-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
270
|
+
<circle class="fig-interpolation-swatch-rim" cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="${J}"/>
|
|
271
|
+
</svg>
|
|
272
|
+
<div class="fig-interpolation-swatch-fill" aria-hidden="true"></div>
|
|
273
|
+
`,this.#q=this.querySelector(".fig-interpolation-swatch-svg"),this.#K=this.querySelector(".fig-interpolation-swatch-fill"),this.#Y=!0}#S(){if(!this.#K)return;let J=this.#W();if(this.#q)this.#q.style.display=J?"":"none";let Q=J?(()=>{let{startDeg:$,sweepDeg:j}=this.#B();return this.#z($,j)})():this.#F(),Z=this.#R(Q);this.#K.style.setProperty("-webkit-mask-image",Z),this.#K.style.maskImage=Z,this.#K.style.background=this.#D()}}customElements.define("fig-interpolation-swatch",f);var C5={chevron:"--icon-16-chevron",checkmark:"--icon-16-checkmark",reset:{medium:"--icon-24-reset",small:"--icon-16-reset"},"arrow-left":{medium:"--icon-24-arrow-left",small:"--icon-16-arrow-left"},steppers:"--icon-24-steppers",eyedropper:"--icon-24-eyedropper",add:"--icon-24-add",adjust:{medium:"--icon-24-adjust",small:"--icon-16-adjust"},minus:"--icon-24-minus",back:"--icon-24-back",forward:"--icon-24-forward",close:{medium:"--icon-24-close",small:"--icon-16-close"},rotate:"--icon-24-rotate",swap:"--icon-24-swap",play:"--icon-24-play",pause:"--icon-24-pause",search:"--icon-24-search",download:"--icon-24-download",upload:"--icon-24-upload",sun:"--icon-24-sun",moon:"--icon-24-moon",edit:{medium:"--icon-24-edit",small:"--icon-16-edit"},settings:{medium:"--icon-24-settings",small:"--icon-16-settings"},more:{medium:"--icon-24-more",small:"--icon-16-more"},visible:{medium:"--icon-24-visible",small:"--icon-16-visible"},hidden:{medium:"--icon-24-hidden",small:"--icon-16-hidden"}};function E5(J,Q="medium"){let Z=J&&C5[J];if(!Z)return"";let $=typeof Z==="string"?Z:Z[Q==="small"?"small":"medium"];return $?`var(${$})`:""}class V1 extends HTMLElement{static get observedAttributes(){return["name","size","color"]}connectedCallback(){this.#Q()}attributeChangedCallback(J,Q,Z){if(Q!==Z)this.#Q()}#Q(){let J=this.getAttribute("name"),Q=this.getAttribute("size")||"medium",Z=E5(J,Q);if(Z)this.style.setProperty("--icon",Z);else this.style.removeProperty("--icon");if(Q==="small")this.style.setProperty("--size","var(--spacer-3)");else this.style.removeProperty("--size");let $=this.getAttribute("color");if($)this.style.backgroundColor=$;else this.style.removeProperty("background-color");if(!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}}customElements.define("fig-icon",V1);class y1 extends HTMLElement{}customElements.define("fig-content",y1);class x1 extends HTMLElement{}customElements.define("fig-tab-content",x1);class w1 extends HTMLElement{}customElements.define("fig-button-combo",w1);class b1 extends HTMLElement{}customElements.define("fig-input-combo",b1);class g1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=this.#O.bind(this);#j=this.#z.bind(this);static get observedAttributes(){return["value","selected","disabled","alpha","control","aria-label","aria-labelledby","aria-describedby"]}get#X(){return this.getAttribute("control")||"color"}connectedCallback(){this.#K(),this.#W()}disconnectedCallback(){this.#_(),this.removeEventListener("click",this.#G)}#_(){if(this.#Q)this.#Q.removeEventListener("input",this.#$),this.#Q.removeEventListener("change",this.#j);if(this.#J)this.#J.removeEventListener("input",this.#$),this.#J.removeEventListener("change",this.#j);if(this.#Z)this.#Z.disconnect(),this.#Z=null}#Y(){if(this.#Z)this.#Z.disconnect(),this.#Z=null;if(!this.#J)return;this.#Z=new MutationObserver(()=>{if(this.#J?.hasAttribute("selected")&&this.#J.getAttribute("selected")!=="false"){if(!this.hasAttribute("selected"))this.setAttribute("selected","")}else if(this.hasAttribute("selected"))this.removeAttribute("selected")}),this.#Z.observe(this.#J,{attributes:!0,attributeFilter:["selected"]})}get#q(){let J=this.getAttribute("alpha");return J===null||J!=="false"}#K(){let J=this.#X;if(J==="add"||J==="remove"){let X=J==="add"?"add":"minus",Y=this.getAttribute("aria-label")||(J==="add"?"Add color stop":"Remove color stop");this.innerHTML=`<fig-button icon variant="ghost" aria-label="${b(Y)}"><fig-icon name="${X}"></fig-icon></fig-button>`,this.#Q=null,this.#J=null,this.addEventListener("click",this.#G),this.#M();return}this.removeEventListener("click",this.#G);let Q=(this.getAttribute("value")||"").trim(),Z=this.#L(Q),$=this.#U(Q),j=this.#q?"":'alpha="false"',_=$<1?JSON.stringify({type:"solid",color:Z,opacity:Math.round($*100)}):JSON.stringify({type:"solid",color:Z}),q=$<1?` alpha="${$}"`:"";if(this.innerHTML=t()?`<fig-fill-picker mode="solid" ${j} value='${_}'>
|
|
274
|
+
<fig-swatch background="${Z}"${q}></fig-swatch>
|
|
275
|
+
</fig-fill-picker>`:`<fig-swatch background="${Z}"${q}></fig-swatch>`,this.#Q=this.querySelector("fig-fill-picker"),this.#J=this.querySelector("fig-swatch"),this.#_(),this.#Q?.addEventListener("input",this.#$),this.#Q?.addEventListener("change",this.#j),!this.#Q)this.#J?.addEventListener("input",this.#$),this.#J?.addEventListener("change",this.#j);this.#Y(),this.#M()}#G=()=>{let J=this.#X;this.dispatchEvent(new CustomEvent(J,{bubbles:!0,composed:!0}))};#N(J){if(!J)return"#D9D9D9";let Q=J.replace("#","").trim();if(Q.length===3||Q.length===4){let[Z,$,j]=Q;return`#${Z}${Z}${$}${$}${j}${j}`.toUpperCase()}if(Q.length===6||Q.length===8)return`#${Q.slice(0,6)}`.toUpperCase();return"#D9D9D9"}#U(J){if(!J)return 1;let Q=String(J).trim(),Z=Q.replace(/^#/,"");if(/^[0-9a-f]{4}$/i.test(Z)){let j=Z[3];return parseInt(`${j}${j}`,16)/255}if(/^[0-9a-f]{8}$/i.test(Z))return parseInt(Z.slice(6,8),16)/255;let $=Q.match(/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/i);if($)return parseFloat($[1]);return 1}#L(J){if(!J)return"#D9D9D9";let Q=String(J).trim();if(Q.startsWith("{"))try{let Z=JSON.parse(Q);if(Z?.color)return this.#L(Z.color)}catch{}if(Q.startsWith("#"))return this.#N(Q);if(/^[0-9a-f]{3,4}$|^[0-9a-f]{6}$|^[0-9a-f]{8}$/i.test(Q))return this.#N(Q);try{let{ctx:Z}=E0(1,1);Z.fillStyle="#000000",Z.fillStyle=Q;let $=Z.fillStyle;if($.startsWith("#"))return this.#N($);let j=$.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(j){let _=(q)=>Math.max(0,Math.min(255,Number(q))).toString(16).padStart(2,"0");return`#${_(j[1])}${_(j[2])}${_(j[3])}`.toUpperCase()}}catch{}return"#D9D9D9"}#W(){let J=this.getAttribute("value"),Q=this.#L(J),Z=this.#U(J);if(J!==Q&&Z>=1){this.setAttribute("value",Q);return}if(this.#Q){this.#M();let $=Z<1?{type:"solid",color:Q,opacity:Math.round(Z*100)}:{type:"solid",color:Q};if(this.#Q.setAttribute("value",JSON.stringify($)),this.#q)this.#Q.removeAttribute("alpha");else this.#Q.setAttribute("alpha","false");if(A(this,"disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}if(this.#J){if(this.#M(),this.#J.setAttribute("background",Q),Z<1)this.#J.setAttribute("alpha",String(Z));else this.#J.removeAttribute("alpha");if(A(this,"disabled"))this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled")}}#M(){let J=this.#X,Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Z=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";if(this.setAttribute("aria-disabled",Q?"true":"false"),this.setAttribute("aria-pressed",Z?"true":"false"),J==="add"||J==="remove"){let X=this.querySelector("fig-button"),Y=this.getAttribute("aria-label")||(J==="add"?"Add color stop":"Remove color stop");if(X?.setAttribute("aria-label",Y),Q)X?.setAttribute("disabled","");else X?.removeAttribute("disabled");return}let $=this.#Q||this.#J;if(!$)return;let j=this.getAttribute("aria-label")||"Color stop",_=this.getAttribute("aria-labelledby"),q=this.getAttribute("aria-describedby");if(_)$.setAttribute("aria-labelledby",_),$.removeAttribute("aria-label");else $.setAttribute("aria-label",j),$.removeAttribute("aria-labelledby");if(q)$.setAttribute("aria-describedby",q);else $.removeAttribute("aria-describedby")}#B(J,Q){let Z=this.#L(J?.color),$=this.#L(this.getAttribute("value"));if(Z!==$)this.setAttribute("value",Z);else this.#W();let j={color:this.value};if(this.#q){if(J?.opacity!==void 0)j.opacity=J.opacity;else if(J?.alpha!==void 0)j.opacity=Math.round(J.alpha*100)}this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,cancelable:!0,composed:!0,detail:j}))}#O(J){J.stopPropagation(),this.#B(J.detail||{color:J.target?.value},"input")}#z(J){J.stopPropagation(),this.#B(J.detail||{color:J.target?.value},"change")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(!this.isConnected)return;switch(J){case"control":this.#K();break;case"value":case"selected":case"disabled":case"aria-label":case"aria-labelledby":case"aria-describedby":this.#W(),this.#M();break}}get value(){return this.#L(this.getAttribute("value"))}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value");return}this.setAttribute("value",this.#L(J))}get selected(){return A(this,"selected")}set selected(J){this.toggleAttribute("selected",Boolean(J))}get disabled(){return A(this,"disabled")}set disabled(J){this.toggleAttribute("disabled",Boolean(J))}}customElements.define("fig-color-tip",g1);class h1 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",A(this,"selected")?"true":"false"),A(this,"disabled"))this.setAttribute("aria-disabled","true")}attributeChangedCallback(J){if(J==="selected")this.setAttribute("aria-selected",A(this,"selected")?"true":"false");if(J==="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",h1);class v1 extends HTMLElement{#Q=null;#J=this.#z.bind(this);#Z=this.#F.bind(this);#$=this.#H.bind(this);#j=null;#X=null;#_=null;#Y=null;#q=null;#K=!1;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","columns","drag","layout","overflow","loop"]}get#G(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#N(){let J=this.getAttribute("drag");return J===null||J!=="false"}get#U(){return this.getAttribute("choice-element")||"fig-choice"}#L(){let J=this.getAttribute("columns"),Q=J===null?NaN:Number(J);if(Number.isInteger(Q)&&Q>0)this.style.setProperty("--fig-chooser-grid-columns",String(Q));else this.style.removeProperty("--fig-chooser-grid-columns")}get choices(){return Array.from(this.querySelectorAll(`:scope > ${this.#U}`))}get selectedChoice(){return this.#Q}set selectedChoice(J){if(J&&!this.contains(J))return;let Q=this.choices;for(let $ of Q){let j=$===J,_=A($,"selected");if(j&&!_)$.setAttribute("selected","");else if(!j&&_)$.removeAttribute("selected")}this.#Q=J;let Z=J?.getAttribute("value")??"";if(this.getAttribute("value")!==Z){if(Z)this.setAttribute("value",Z)}this.#I(J)}get value(){return this.#Q?.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J==="")return;this.setAttribute("value",String(J))}connectedCallback(){if(this.setAttribute("role","listbox"),this.shadowRoot)this.shadowRoot.replaceChildren();this.#L(),this.#S(),this.addEventListener("click",this.#J),this.addEventListener("keydown",this.#Z),this.addEventListener("scroll",this.#$),this.#T(),this.#D(),this.#x(),this.#P(),p(this,()=>{this.#M(),this.#H(),this.#W()})}#W(){let J=()=>{if(!this.isConnected)return;if(this.#Q)this.#I(this.#Q,"auto")},Q=()=>{let Z=this.querySelectorAll("img, video");for(let $ of Z){if($.tagName==="IMG"?$.complete:$.readyState>=1)continue;let j=()=>{$.removeEventListener("load",j),$.removeEventListener("loadedmetadata",j),$.removeEventListener("error",j),J()};$.addEventListener("load",j),$.addEventListener("loadedmetadata",j),$.addEventListener("error",j)}};requestAnimationFrame(()=>{Q(),J()})}disconnectedCallback(){this.removeEventListener("click",this.#J),this.removeEventListener("keydown",this.#Z),this.removeEventListener("scroll",this.#$),this.#C(),this.#j?.disconnect(),this.#j=null,this.#X?.disconnect(),this.#X=null,this.#f()}attributeChangedCallback(J,Q,Z){if(J==="value"&&Z!==Q&&Z)this.#B(Z);if(J==="disabled"){let $=Z!==null&&Z!=="false",j=this.choices;for(let _ of j)if($)_.setAttribute("aria-disabled","true"),_.setAttribute("tabindex","-1");else _.removeAttribute("aria-disabled"),_.setAttribute("tabindex","0")}if(J==="choice-element")requestAnimationFrame(()=>this.#M());if(J==="columns")this.#L(),this.#E();if(J==="drag")if(this.#N)this.#D();else this.#C();if(J==="overflow")this.#T(),requestAnimationFrame(()=>this.#H());if(J==="layout"){if(this.#T(),Z==="horizontal")this.scrollTop=0;else this.scrollLeft=0;this.#E()}}#M(){let J=this.choices;if(!J.length){this.#Q=null;return}let Q=this.getAttribute("value");if(Q&&this.#B(Q))return;let Z=J.find(($)=>A($,"selected"));if(Z){this.selectedChoice=Z;return}this.selectedChoice=J[0]}#B(J){let Q=this.choices;for(let Z of Q)if(Z.getAttribute("value")===J)return this.selectedChoice=Z,!0;return!1}#O(J){let Q=this.#U,Z=J;while(Z&&Z!==this){if(Z.matches(Q))return Z;Z=Z.parentElement}return null}#z(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=this.#O(J.target);if(!Q)return;if(Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.selectedChoice=Q,this.#R()}#F(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=this.choices.filter((_)=>!_.hasAttribute("disabled")||_.getAttribute("disabled")==="false");if(!Q.length)return;let Z=Q.indexOf(this.#Q),$=Z,j=this.hasAttribute("loop");switch(J.key){case"ArrowDown":case"ArrowRight":if(J.preventDefault(),Z<Q.length-1)$=Z+1;else if(j)$=0;break;case"ArrowUp":case"ArrowLeft":if(J.preventDefault(),Z>0)$=Z-1;else if(j)$=Q.length-1;break;case"Home":J.preventDefault(),$=0;break;case"End":J.preventDefault(),$=Q.length-1;break;case"Enter":case" ":if(J.preventDefault(),document.activeElement?.matches(this.#U)){let _=this.#O(document.activeElement);if(_&&_!==this.#Q)this.selectedChoice=_,this.#R()}return;default:return}if($!==Z&&Q[$])this.selectedChoice=Q[$],Q[$].focus(),this.#R()}#R(){let J=this.value;this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0}))}#H(){if(this.#G==="scrollbar")return;let J=this.getAttribute("layout")==="horizontal";s0(this,this,J?"x":"y")}#P(){this.#X?.disconnect(),this.#X=new ResizeObserver(()=>{this.#H(),this.#E()}),this.#X.observe(this)}#D(){if(this.#q?.bound)return;if(!this.#N)return;let J=(_)=>{if(_.button!==0)return;if(_.target.closest("[data-fig-chooser-nav]"))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=_.clientX,this.#q.startY=_.clientY,this.#q.scrollLeft=this.scrollLeft,this.#q.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},Q=(_)=>{if(!this.#q.active)return;let q=this.getAttribute("layout")==="horizontal",X=_.clientX-this.#q.startX,Y=_.clientY-this.#q.startY;if(!this.#q.didDrag&&Math.abs(q?X:Y)>3)this.#q.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(_.pointerId);if(!this.#q.didDrag)return;if(q)this.scrollLeft=this.#q.scrollLeft-X;else this.scrollTop=this.#q.scrollTop-Y},Z=(_)=>{if(!this.#q.active)return;let q=this.#q.didDrag;if(this.#q.active=!1,this.#q.didDrag=!1,this.style.cursor="",this.style.userSelect="",_.pointerId!==void 0)try{this.releasePointerCapture(_.pointerId)}catch{}if(q)_.preventDefault(),_.stopPropagation()},$=(_)=>{if(this.#q?.suppressClick)_.stopPropagation(),_.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:J,onPointerMove:Q,onPointerUp:Z,onClick:$,onPointerUpCapture:j},this.addEventListener("pointerdown",J),window.addEventListener("pointermove",Q),window.addEventListener("pointerup",Z),this.addEventListener("pointerup",j,!0),this.addEventListener("click",$,!0)}#C(){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}#S(){if(this.#K)return;let J=this.querySelector(":scope > [data-fig-chooser-scroll]");if(!J)return;this.#K=!0;try{let Q=Array.from(J.childNodes);J.replaceWith(...Q)}finally{this.#K=!1}}#T(){if(this.#G==="scrollbar")this.#f();else this.#A()}#f(){this.#_?.remove(),this.#Y?.remove(),this.#_=null,this.#Y=null,this.classList.remove("overflow-start","overflow-end")}#A(){if(this.#_&&this.#Y&&this.contains(this.#_)&&this.contains(this.#Y))return;this.#_?.remove(),this.#Y?.remove(),this.#_=null,this.#Y=null;let J=d0({owner:"chooser",startClass:"fig-chooser-nav-start",endClass:"fig-chooser-nav-end",chevronClass:"fig-chooser-nav-chevron",onStart:()=>this.#k(-1),onEnd:()=>this.#k(1)});this.#_=J.start,this.#Y=J.end,this.prepend(this.#_),this.append(this.#Y)}#k(J){let Q=this.getAttribute("layout")==="horizontal";A0(this,Q?"x":"y",J)}#E(){if(!this.#Q)return;this.#I(this.#Q,"auto")}#I(J,Q="smooth"){if(!J)return;requestAnimationFrame(()=>{if(!J.isConnected)return;let Z=this.scrollHeight>this.clientHeight,$=this.scrollWidth>this.clientWidth;if(!$&&!Z)return;let j=J.getBoundingClientRect(),_=this.getBoundingClientRect(),q={behavior:Q},X=!1;if(Z){let Y=j.top-_.top+this.scrollTop,K=this.scrollHeight-this.clientHeight;q.top=Math.max(0,Math.min(Y+j.height/2-this.clientHeight/2,K)),X=!0}if($){let Y=j.left-_.left+this.scrollLeft,K=this.scrollWidth-this.clientWidth;q.left=Math.max(0,Math.min(Y+j.width/2-this.clientWidth/2,K)),X=!0}if(X)this.scrollTo(q);this.#H()})}#x(){this.#j?.disconnect(),this.#j=new MutationObserver(()=>{if(this.#K)return;this.#S(),this.#T();let J=this.choices;if(this.#Q&&!J.includes(this.#Q))this.#Q=null,this.#M();else if(!this.#Q&&J.length)this.#M();requestAnimationFrame(()=>this.#H())}),this.#j.observe(this,{childList:!0,subtree:!1})}}customElements.define("fig-chooser",v1);class m1 extends HTMLElement{static observedAttributes=["color","selected","disabled","drag","drag-surface","drag-axes","drag-snapping","value","type","tip","hit-area","hit-area-mode","aria-label","aria-labelledby"];#Q=!1;#J=!1;#Z=null;#$=!1;#j=null;#X=null;#_=null;#Y=null;get#q(){let J=(this.getAttribute("tip")||"").trim().toLowerCase();return J==="color"||J==="add"||J==="remove"?J:null}get#K(){return!this.hasAttribute("data-no-color-picker")}get#G(){let J=this.getAttribute("drag");return J!==null&&J!=="false"}get#N(){let J=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:J.includes("x"),y:J.includes("y")}}get#U(){let J=this.getAttribute("drag-snapping");if(J===null)return"false";let Q=J.trim().toLowerCase();if(Q==="modifier")return"modifier";if(Q===""||Q==="true")return"true";return"false"}#L(J){let Q=this.#U;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}#W(J){if(J<0.1)return 0;if(J>0.9)return 1;if(J>0.4&&J<0.6)return 0.5;return J}#M(J,Q){if(Math.abs(J-Q)<0.1){let $=(J+Q)/2;return{x:$,y:$}}if(Math.abs(1-J-Q)<0.1)return{x:J,y:1-J};return{x:J,y:Q}}#B(){let J=this.getAttribute("drag-surface");if(!J||J==="parent")return this.parentElement;return this.closest(J)}get value(){let J=this.#B();if(!J)return"0% 0%";let{px:Q,py:Z}=this.#j0(J.getBoundingClientRect());return`${Math.round(Q*100)}% ${Math.round(Z*100)}%`}set value(J){this.setAttribute("value",J??"0% 0%")}#O(J){let Q=J==null?"":String(J).trim();if(!Q)return{xPct:0,yPct:0};let Z=Q.split(/[\s,]+/).filter(Boolean),$=(q)=>{if(!q)return 0;let X=q.includes("px"),Y=q.includes("%"),K=parseFloat(q.replace(/[%px]/g,""));if(!Number.isFinite(K))return 0;if(X)return{px:K};if(Y||Math.abs(K)>1)return Math.max(0,Math.min(100,K));return Math.max(0,Math.min(100,K*100))},j=$(Z[0]),_=$(Z[1]??Z[0]);return{xToken:j,yToken:_}}#z(J){let Q=this.#B();if(!Q)return;let{xToken:Z,yToken:$}=this.#O(J),j=Q.getBoundingClientRect(),_=(Y,K)=>{if(Y&&typeof Y==="object"&&"px"in Y)return Math.max(0,Math.min(K,Y.px));return null},q=(Y)=>{return`${typeof Y==="number"?Y:0}%`},X=this.#N;if(this.#F(X),X.x){let Y=_(Z,j.width);this.style.left=Y===null?q(Z):`${Math.round(Y)}px`}if(X.y){let Y=_($,j.height);this.style.top=Y===null?q($):`${Math.round(Y)}px`}}#F(J=this.#N){this.style.setProperty("--fig-handle-position-translate",`${J.x?"-50%":"0"} ${J.y?"-50%":"0"}`)}#R(){this.#$=!0,this.setAttribute("value",this.value),this.#$=!1}get#H(){return this.getAttribute("hit-area-mode")||"handle"}#P(){let J=this.getAttribute("hit-area");if(!J)return null;let Q=J.trim().split(/\s+/),Z=0,$=0,j=!1,_=[];for(let q of Q){if(q==="circle"){j=!0;continue}let X=parseFloat(q);if(Number.isFinite(X))_.push(X)}if(_.length>=2)Z=_[0],$=_[1];else if(_.length===1)Z=_[0],$=_[0];else return null;return{vPad:Z,hPad:$,circle:j}}#D(){let J=this.#P();if(!J){if(this.#Y)this.#Y.remove(),this.#Y=null;this.style.removeProperty("--fig-handle-hit-area-size");return}if(!this.#Y){let Q=document.createElement("div");Q.classList.add("fig-handle-hit-area"),Q.addEventListener("pointerdown",(Z)=>this.#C(Z)),this.prepend(Q),this.#Y=Q}if(this.style.setProperty("--fig-handle-hit-area-size",String(J.hPad*2)),J.circle)this.#Y.style.borderRadius="50%";else this.#Y.style.borderRadius="inherit"}#C(J){if(A(this,"disabled"))return;if(J.target!==this.#Y)return;if(this.#H==="delegate")J.preventDefault(),J.stopPropagation(),this.dispatchEvent(new CustomEvent("hitareadown",{bubbles:!0,detail:{originalEvent:J}}));else this.#x(J)}connectedCallback(){this.#E(),this.#k(),this.#D(),this.addEventListener("click",this.#S),document.addEventListener("pointerdown",this.#T),document.addEventListener("keydown",this.#f);let J=this.getAttribute("value");if(J)this.#z(J);if(this.#q)this.#m()}disconnectedCallback(){if(this.#I(),this.#u(),this.#y(),this.#c(),this.#Y)this.#Y.remove(),this.#Y=null;this.removeEventListener("click",this.#S),document.removeEventListener("pointerdown",this.#T),document.removeEventListener("keydown",this.#f)}select(){if(A(this,"disabled"))return;this.setAttribute("selected","")}deselect(){this.removeAttribute("selected")}#S=(J)=>{if(this.#J){this.#J=!1;return}if(this.getAttribute("type")==="color"&&this.#K&&!this.#q){this.#b();return}this.select()};#T=(J)=>{if(this.contains(J.target))return;if((this.#j||this.#X)&&J.target.closest?.("dialog, [popover]"))return;this.deselect()};#f=(J)=>{if(J.defaultPrevented)return;if(J.target===this&&this.#G&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(J.key)){if(this.#A(J)){if(J.preventDefault(),!A(this,"selected"))this.select()}return}if(J.key!=="Enter"&&J.key!==" ")return;if(J.target===this&&!A(this,"selected")){if(J.preventDefault(),this.getAttribute("type")==="color"&&this.#K&&!this.#q)this.#b();else this.select();return}if(!A(this,"selected"))return;if(this.getAttribute("type")!=="color")return;if(!this.#K)return;if(J.preventDefault(),!this.#q)this.#b()};#A(J){if(A(this,"disabled"))return!1;let Q=this.#B();if(!Q)return!1;let Z=Q.getBoundingClientRect();if(Z.width<=0||Z.height<=0)return!1;let $=this.#N,j=this.#j0(Z),_=J.shiftKey?0.1:0.01,q=j.px,X=j.py;switch(J.key){case"ArrowLeft":if(!$.x)return!1;q-=_;break;case"ArrowRight":if(!$.x)return!1;q+=_;break;case"ArrowUp":if(!$.y)return!1;X-=_;break;case"ArrowDown":if(!$.y)return!1;X+=_;break;case"Home":if($.x)q=0;if($.y)X=0;break;case"End":if($.x)q=1;if($.y)X=1;break;default:return!1}if(q=Math.max(0,Math.min(1,q)),X=Math.max(0,Math.min(1,X)),this.#F($),$.x)this.style.left=`${Math.round(q*Z.width)}px`;if($.y)this.style.top=`${Math.round(X*Z.height)}px`;this.#R();let Y={...this.#j0(Z),shiftKey:J.shiftKey,keyboard:!0};return this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Y})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Y})),!0}attributeChangedCallback(J,Q,Z){if(J==="color"){if(!Z||Z==="false"||Z==="true")this.style.removeProperty("--fill");else this.style.setProperty("--fill",Z);if(this.#j&&this.#q==="color"&&Z)this.#j.setAttribute("value",Z);this.#h()}if(J==="drag")this.#k();if(J==="hit-area")this.#D();if(J==="selected")this.#a();if(J==="selected"||J==="disabled"||J==="type"||J==="tip"||J==="aria-label"||J==="aria-labelledby")this.#E();if(J==="value"&&!this.#$&&!this.#Q)this.#z(Z);if(J==="tip"){if(this.#u(),this.#q)this.#y(),this.#m()}}#k(){if(this.#G&&!this.#Z)this.#Z=(J)=>this.#x(J),this.addEventListener("pointerdown",this.#Z);else if(!this.#G&&this.#Z)this.#I()}#E(){let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";if(!this.hasAttribute("role"))this.setAttribute("role","button");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex",J?"-1":"0");else if(J)this.setAttribute("tabindex","-1");if(this.setAttribute("aria-disabled",J?"true":"false"),this.setAttribute("aria-pressed",Q?"true":"false"),!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby")){let Z=this.#q||this.getAttribute("type")||"handle";this.setAttribute("aria-label",Z==="color"?"Color handle":Z==="add"?"Add handle":Z==="remove"?"Remove handle":"Handle")}}#I(){if(this.#Z)this.removeEventListener("pointerdown",this.#Z),this.#Z=null;this.#Q=!1}#x(J){if(!this.#G||A(this,"disabled"))return;J.preventDefault();let Q=this.#B();if(!Q)return;this.#Q=!0;let Z=this.#N,$=null,j=this.getBoundingClientRect(),_=j.left+j.width/2,q=j.top+j.height/2,X=J.clientX-_,Y=J.clientY-q,K=J.clientX,N=J.clientY,G=3,U=(L,H,F=!1)=>{let z=Q.getBoundingClientRect();$=z;let O=this.#j0(z),T=L-X-z.left,P=H-Y-z.top,C=Math.max(0,Math.min(z.width,T)),I=Math.max(0,Math.min(z.height,P)),E=z.width>0?Z.x?C/z.width:O.px:0.5,h=z.height>0?Z.y?I/z.height:O.py:0.5;if(this.#L(F)){if(Z.x)E=this.#W(E);if(Z.y)h=this.#W(h);if(Z.x&&Z.y){let a=this.#M(E,h);E=a.x,h=a.y}}if(this.#F(Z),Z.x)this.style.left=`${Math.round(Math.max(0,Math.min(z.width,E*z.width)))}px`;if(Z.y)this.style.top=`${Math.round(Math.max(0,Math.min(z.height,h*z.height)))}px`},W=(L)=>{if(!this.#Q)return;if(!this.#J){let H=L.clientX-K,F=L.clientY-N;if(H*H+F*F<G*G)return;if(this.#_0(),this.classList.add("dragging"),this.style.cursor="grabbing",!A(this,"selected"))this.select()}this.#J=!0,U(L.clientX,L.clientY,L.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#j0($),shiftKey:L.shiftKey}}))},B=(L)=>{if(this.#Q=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",W),window.removeEventListener("pointerup",B),this.#J){U(L.clientX,L.clientY,L.shiftKey),this.#R(),this.#z(this.getAttribute("value")),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#j0($)}));let H=(F)=>{F.stopPropagation(),F.preventDefault()};this.addEventListener("click",H,{capture:!0,once:!0})}else this.#R();this.#J=!1};window.addEventListener("pointermove",W),window.addEventListener("pointerup",B)}showColorTip(){if(!this.#q)return;if(this.#j){this.#j.style.display="";return}this.#m()}hideColorTip(){if(!this.#j)return;this.#j.style.display="none"}#V(J=this.getAttribute("color")){let Q={color:"#D9D9D9",opacity:100},Z=String(J||"").trim();if(!Z)return Q;let $=(_)=>{let q=_.replace("#","").trim();if(q.length===3||q.length===4){let[X,Y,K,N]=q;return{color:`#${X}${X}${Y}${Y}${K}${K}`.toUpperCase(),opacity:N?Math.round(parseInt(`${N}${N}`,16)/255*100):100}}if(q.length===6||q.length===8)return{color:`#${q.slice(0,6)}`.toUpperCase(),opacity:q.length===8?Math.round(parseInt(q.slice(6,8),16)/255*100):100};return Q},j=(_,q,X)=>{let Y=(K)=>Math.max(0,Math.min(255,Math.round(Number(K)))).toString(16).padStart(2,"0");return`#${Y(_)}${Y(q)}${Y(X)}`.toUpperCase()};if(Z.startsWith("#"))return $(Z);try{let{ctx:_}=E0(1,1);_.fillStyle="#000000",_.fillStyle=Z;let q=_.fillStyle;if(q.startsWith("#"))return $(q);let X=q.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?/i);if(X)return{color:j(X[1],X[2],X[3]),opacity:X[4]!==void 0?Math.round(parseFloat(X[4])*100):100}}catch{}return Q}#g(){let{color:J,opacity:Q}=this.#V();return JSON.stringify(Q<100?{type:"solid",color:J,opacity:Q}:{type:"solid",color:J})}#h(){if(!this.#X)return;this.#X.setAttribute("value",this.#g())}#w(){if(!t())return null;if(this.#X)return this.#X;let J=document.createElement("fig-fill-picker");J.setAttribute("mode","solid"),J.setAttribute("alpha","true"),J.setAttribute("dialog-offset","8 8"),J.setAttribute("value",this.#g()),J.anchorElement=this;let Q=document.createElement("span");return Q.hidden=!0,J.appendChild(Q),J.addEventListener("input",this.#d),J.addEventListener("change",this.#q0),J.addEventListener("close",this.#Z0),this.appendChild(J),this.#X=J,J}#b(){if(A(this,"disabled"))return;let J=this.#w();if(!J){this.#v();return}this.setAttribute("selected",""),this.#h(),J.open()}#y(){if(!this.#X)return;this.#X.removeEventListener("input",this.#d),this.#X.removeEventListener("change",this.#q0),this.#X.removeEventListener("close",this.#Z0),this.#X.close(),this.#X.remove(),this.#X=null,this.removeAttribute("selected")}#o(){if(this.#_)return this.#_;let J=document.createElement("input");return J.type="color",J.tabIndex=-1,J.setAttribute("aria-hidden","true"),J.style.position="fixed",J.style.inlineSize="1px",J.style.blockSize="1px",J.style.opacity="0",J.style.pointerEvents="none",J.addEventListener("input",this.#t),J.addEventListener("change",this.#e),this.appendChild(J),this.#_=J,J}#v(){let J=this.#o(),{color:Q}=this.#V();J.value=Q,this.setAttribute("selected",""),J.click()}#c(){if(!this.#_)return;this.#_.removeEventListener("input",this.#t),this.#_.removeEventListener("change",this.#e),this.#_.remove(),this.#_=null}#_0(){if(this.getAttribute("type")!=="color")return;this.#X?.close()}#m(){let J=this.#q;if(!J)return;if(this.#j)return;let Q=document.createElement("fig-color-tip");if(J==="add"||J==="remove")Q.setAttribute("control",J);else Q.setAttribute("value",this.getAttribute("color")||"#D9D9D9"),Q.setAttribute("alpha","true");Q.addEventListener("input",this.#J0),Q.addEventListener("change",this.#s),Q.addEventListener("add",this.#$0),Q.addEventListener("remove",this.#$0),this.appendChild(Q),this.#j=Q,this.#a()}#u(){if(!this.#j)return;this.#j.removeEventListener("input",this.#J0),this.#j.removeEventListener("change",this.#s),this.#j.removeEventListener("add",this.#$0),this.#j.removeEventListener("remove",this.#$0),this.#j.remove(),this.#j=null}#a(){if(!this.#j||this.#q!=="color")return;let J=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false";this.#j.toggleAttribute("selected",J)}#l(J,Q){if(Q===void 0||Q>=100)return J;let{r:Z,g:$,b:j}=n(J);return`rgba(${Z}, ${$}, ${j}, ${Q/100})`}#p(J){if(!J?.color)return null;let Q=J.opacity!==void 0?J.opacity:J.alpha!==void 0?Math.round(J.alpha*100):void 0;return{color:J.color,opacity:Q}}#d=(J)=>{J.stopPropagation();let Q=this.#p(J.detail);if(!Q)return;this.setAttribute("color",this.#l(Q.color,Q.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Q}))};#q0=(J)=>{J.stopPropagation();let Q=this.#p(J.detail);if(!Q)return;this.setAttribute("color",this.#l(Q.color,Q.opacity)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Q}))};#n(J){let{opacity:Q}=this.#V();return Q<100?{color:J,opacity:Q}:{color:J}}#t=(J)=>{J.stopPropagation();let Q=this.#n(J.target.value);this.setAttribute("color",this.#l(Q.color,Q.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:Q}))};#e=(J)=>{J.stopPropagation();let Q=this.#n(J.target.value);this.setAttribute("color",this.#l(Q.color,Q.opacity)),this.removeAttribute("selected"),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:Q}))};#Z0=()=>{this.removeAttribute("selected")};#J0=(J)=>{if(J.stopPropagation(),J.detail?.color)this.setAttribute("color",this.#l(J.detail.color,J.detail.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{color:J.detail.color,opacity:J.detail.opacity}}))};#s=(J)=>{if(J.stopPropagation(),J.detail?.color)this.setAttribute("color",this.#l(J.detail.color,J.detail.opacity)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{color:J.detail.color,opacity:J.detail.opacity}}))};#$0=(J)=>{J.stopPropagation(),this.dispatchEvent(new CustomEvent(J.type,{bubbles:!0,composed:!0}))};#j0(J){let Q=J||this.#B()?.getBoundingClientRect();if(!Q)return{x:0,y:0,px:0,py:0};let Z=this.getBoundingClientRect(),$=this.offsetWidth/2,j=this.offsetHeight/2,_=Z.left-Q.left,q=Z.top-Q.top,X=_+$,Y=q+j,K=Q.width>0?X/Q.width:0,N=Q.height>0?Y/Q.height:0;return{x:_,y:q,px:K,py:N}}}customElements.define("fig-handle",m1);class u1 extends HTMLElement{static get observedAttributes(){return["value","disabled"]}get value(){return this.getAttribute("value")||""}set value(J){this.setAttribute("value",J??"")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","menuitem");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#Q()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="disabled")this.#Q()}#Q(){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}customElements.define("fig-menu-item",u1);class c1 extends HTMLElement{static get observedAttributes(){return["label"]}get label(){return this.getAttribute("label")??""}set label(J){if(J==null||J==="")this.removeAttribute("label");else this.setAttribute("label",String(J))}connectedCallback(){this.#Q()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;this.#Q()}#Q(){if(!this.hasAttribute("role"))this.setAttribute("role","separator");let J=this.label.trim();if(J)this.setAttribute("aria-label",J);else this.removeAttribute("aria-label")}}customElements.define("fig-menu-separator",c1);class p1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=null;#j;#X;#_;#Y;#q;#K=-1;static get observedAttributes(){return["position","offset","closedby","disabled","open","trigger"]}constructor(){super();this.#j=this.#H.bind(this),this.#X=this.#P.bind(this),this.#_=this.#C.bind(this),this.#Y=this.#S.bind(this),this.#q=this.#T.bind(this)}get value(){return this.getAttribute("value")||""}set value(J){this.setAttribute("value",J??"")}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(this.#G(),this.#U(),this.#L(),this.#W(),this.#B(),this.#R(),this.open)this.#A()}disconnectedCallback(){if(this.#M(),document.removeEventListener("keydown",this.#Y,!0),this.#$)this.#$.disconnect(),this.#$=null;if(this.#Q){this.#Q.removeEventListener("close",this.#q);let J=Array.from(this.#Q.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let Q of J)this.insertBefore(Q,this.#Q);this.#Q.remove(),this.#Q=null}}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){if(Z===null||Z==="false")this.#k();else this.#A();return}if(J==="disabled"){if(this.#J)if(Z!==null&&Z!=="false")this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled");return}if(this.#Q&&(J==="position"||J==="offset"||J==="closedby"))if(Z!==null)this.#Q.setAttribute(J,Z);else this.#Q.removeAttribute(J)}#G(){this.#J=this.querySelector("[fig-menu-trigger]")||this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)")}#N(){return(this.getAttribute("trigger")||"").toLowerCase()==="contextmenu"||this.hasAttribute("contextmenu")}#U(){this.#Q=document.createElement("dialog",{is:"fig-popup"}),this.#Q.setAttribute("is","fig-popup"),this.#Q.setAttribute("theme","menu"),this.#Q.setAttribute("role","menu"),this.#Q.setAttribute("id",this.#Q.getAttribute("id")||u());let J=this.getAttribute("position")||"bottom left";this.#Q.setAttribute("position",J);let Q=this.getAttribute("offset");if(Q)this.#Q.setAttribute("offset",Q);let Z=this.getAttribute("closedby");if(Z)this.#Q.setAttribute("closedby",Z);if(this.#J)this.#Q.anchor=this.#J;this.#Q.addEventListener("close",this.#q),this.appendChild(this.#Q)}#L(){let J=Array.from(this.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let Q of J)this.#Q.appendChild(Q)}#W(){if(this.addEventListener("keydown",this.#Y),this.#J)this.#J.addEventListener("click",this.#j),this.#J.addEventListener("contextmenu",this.#X),this.#J.setAttribute("aria-haspopup","menu"),this.#J.setAttribute("aria-expanded","false"),this.#J.setAttribute("aria-controls",this.#Q.getAttribute("id"));if(this.#Q)this.#Q.addEventListener("click",this.#_),this.#Q.addEventListener("keydown",this.#Y)}#M(){if(this.removeEventListener("keydown",this.#Y),this.#J)this.#J.removeEventListener("click",this.#j),this.#J.removeEventListener("contextmenu",this.#X);if(this.#Q)this.#Q.removeEventListener("click",this.#_),this.#Q.removeEventListener("keydown",this.#Y)}#B(){this.#$=new MutationObserver((J)=>{for(let Q of J)for(let Z of Q.addedNodes){if(Z.nodeType!==1||Z===this.#Q)continue;if((Z.tagName==="FIG-MENU-ITEM"||Z.tagName==="FIG-MENU-SEPARATOR")&&Z.parentElement===this)this.#Q.appendChild(Z);else if(!this.#J&&Z.parentElement===this){if(this.#G(),this.#J)this.#J.addEventListener("click",this.#j),this.#J.addEventListener("contextmenu",this.#X),this.#J.setAttribute("aria-haspopup","menu"),this.#J.setAttribute("aria-expanded","false"),this.#J.setAttribute("aria-controls",this.#Q.getAttribute("id")),this.#Q.anchor=this.#J,this.#R()}}}),this.#$.observe(this,{childList:!0})}#O(){if(!this.#Q)return[];return Array.from(this.#Q.querySelectorAll("fig-menu-item")).filter((J)=>!J.hasAttribute("disabled")||J.getAttribute("disabled")==="false")}#z(){let J=this.#O();if(!J.length){this.#K=-1;return}let Q=document.activeElement,Z=J.findIndex(($)=>$===Q||$.contains(Q));this.#K=Z>=0?Z:-1}#F(J){let Q=this.#O();if(!Q.length)return;let Z=(J+Q.length)%Q.length;this.#K=Z,Q[Z].focus()}#R(){if(!this.#J)return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.#J.setAttribute("disabled",""),this.#J.setAttribute("aria-disabled","true"),this.#J.setAttribute("aria-expanded","false");else this.#J.removeAttribute("disabled"),this.#J.removeAttribute("aria-disabled")}#H(J){if(this.#N())return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;J.stopPropagation();let Q=this.#Q?.matches?.(":open")??!1;if(this.open&&!Q)this.removeAttribute("open");if(this.open&&Q)this.open=!1;else{if(this.#Q&&this.#J)this.#Q.anchor=this.#J;this.open=!0}}#P(J){if(!this.#N())return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;J.preventDefault(),J.stopPropagation(),this.#D(J.clientX,J.clientY)}#D(J,Q){let Z=!1,$=0,j=()=>{window.clearTimeout($),window.removeEventListener("pointerup",_,!0),window.removeEventListener("pointercancel",q,!0)},_=()=>{if(Z)return;Z=!0,j(),requestAnimationFrame(()=>this.showAt(J,Q))},q=()=>{if(Z)return;Z=!0,j()};window.addEventListener("pointerup",_,{once:!0,capture:!0}),window.addEventListener("pointercancel",q,{once:!0,capture:!0}),$=window.setTimeout(_,180)}#C(J){let Q=J.target.closest("fig-menu-item");if(!Q)return;if(Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.#f(Q)}#S(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(J.currentTarget===this&&this.#Q?.contains(J.target))return;if(!this.open||!this.#Q?.matches?.(":open")){if(this.#J?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" ")){if(J.preventDefault(),this.#Q&&this.#J)this.#Q.anchor=this.#J;this.open=!0,requestAnimationFrame(()=>this.#F(0))}return}let Q=this.#O();if(!Q.length)return;switch(J.key){case"ArrowDown":{J.preventDefault(),this.#z(),this.#F(this.#K+1);break}case"ArrowUp":{J.preventDefault(),this.#z(),this.#F(this.#K-1);break}case"Home":{J.preventDefault(),this.#F(0);break}case"End":{J.preventDefault(),this.#F(Q.length-1);break}case"Escape":{J.preventDefault(),this.open=!1,this.#J?.focus();break}case"Enter":case" ":{this.#z();let Z=Q[this.#K];if(!Z)return;J.preventDefault(),this.#f(Z);break}}}#T(){if(this.hasAttribute("open"))this.removeAttribute("open");if(this.#J)this.#J.setAttribute("aria-expanded","false"),this.#J.focus();this.#K=-1}#f(J){let Q=J.getAttribute("value")||J.textContent.trim();this.setAttribute("value",Q),this.dispatchEvent(new CustomEvent("change",{detail:{value:Q,item:J},bubbles:!0})),this.open=!1}showAt(J,Q){if(this.#Z={getBoundingClientRect:()=>({width:0,height:0,top:Q,right:J,bottom:Q,left:J,x:J,y:Q})},this.#Q)this.#Q.anchor=this.#Z;if(this.open)this.open=!1;requestAnimationFrame(()=>{this.open=!0})}#A(){if(!this.#Q)return;if(this.#Q.open=!0,document.addEventListener("keydown",this.#Y,!0),this.#J)this.#J.setAttribute("aria-expanded","true");this.#K=-1,requestAnimationFrame(()=>{if(!this.#J?.matches?.(":focus-visible"))return;this.#F(0)})}#k(){if(!this.#Q)return;document.removeEventListener("keydown",this.#Y,!0),this.#Q.open=!1,this.#J?.setAttribute("aria-expanded","false")}}customElements.define("fig-menu",p1);function S(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}class i1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=!1;#j=null;#X=new Set;#_=null;#Y=null;#q=this.#B.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#K();if(this.#G(),this.#U(),this.#L(),this.removeEventListener("click",this.#q),this.addEventListener("click",this.#q),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#G();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#W(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#G()}#K(){let Q=Array.from(this.childNodes).filter((X)=>X.nodeType!==Node.TEXT_NODE||Boolean(X.textContent?.trim())).find((X)=>X.nodeType===Node.ELEMENT_NODE&&X.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-segmented-control"),_=document.createElement("fig-segment"),q=document.createElement("fig-segment");j.setAttribute("sizing","equal"),_.setAttribute("value","off"),_.textContent="Off",q.setAttribute("value","on"),q.textContent="On",j.append(_,q),Z.append($,j),this.#Q=Z,this.#J=$,this.#Z=j,this.#$=Boolean(Q),this.replaceChildren(Z)}#G(){if(!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#J.remove();else{if(!this.#$)this.#J.textContent=J?Q??"":"Label";if(this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#N(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","checked","value"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#Z)return;let J=this.#N(),Q=new Set(J);for(let Z of this.#X)if(!Q.has(Z))this.#Z.removeAttribute(Z);for(let Z of J)this.#Z.setAttribute(Z,this.getAttribute(Z)??"");this.#Z.setAttribute("value",S(this,"checked")?"on":"off"),this.#X=Q}#L(){if(!this.#Z)return;this.#_??=this.#M.bind(this,"input"),this.#Y??=this.#M.bind(this,"change"),this.#Z.addEventListener("input",this.#_),this.#Z.addEventListener("change",this.#Y)}#W(){if(!this.#Z)return;if(this.#_)this.#Z.removeEventListener("input",this.#_);if(this.#Y)this.#Z.removeEventListener("change",this.#Y)}#M(J,Q){Q.stopImmediatePropagation();let Z=this.#Z?.value==="on";this.toggleAttribute("checked",Z);let $={checked:Z,value:this.getAttribute("value")??""};this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#B(J){if(J.target instanceof Element&&J.target.closest("fig-segmented-control"))return;let Q=this.#Z?.value==="on"?"off":"on";this.#Z?.querySelector(`fig-segment[value="${Q}"]`)?.click()}get checked(){return this.#Z?this.#Z.value==="on":S(this,"checked")}set checked(J){this.toggleAttribute("checked",Boolean(J))}get value(){return this.#Z?.value??this.getAttribute("value")??""}set value(J){this.setAttribute("value",J??"")}focus(J){(this.#Z?.querySelector("fig-segment[selected]")||this.#Z?.querySelector("fig-segment"))?.focus(J)}}customElements.define("propskit-switch",i1);class r1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=!1;#j=null;#X=new Set;#_=null;#Y=null;#q=this.#z.bind(this);#K=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Q)this.#G();if(this.#N(),this.#L(),this.#W(),this.#K===null)this.#K=this.getAttribute("default")??this.getAttribute("value")??"";if(this.removeEventListener("click",this.#q),this.addEventListener("click",this.#q),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#N();if(Z)this.#L()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#M(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label")this.#N()}#G(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-color");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Q=Z,this.#J=$,this.#Z=j,this.#$=Boolean(Q),this.replaceChildren(Z)}#N(){if(!this.#Q||!this.#J||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#J.remove();else{if(!this.#$)this.#J.textContent=J?Q??"":"Label";if(this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#Z.setAttribute("aria-label",this.getAttribute("aria-label")||this.#J.textContent?.trim()||"Color")}#U(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#L(){if(!this.#Z)return;let J=this.#U(),Q=new Set(J);for(let Z of this.#X)if(!Q.has(Z))this.#Z.removeAttribute(Z);for(let Z of J){let $=this.getAttribute(Z)??"";if(Z==="value"&&this.#Z.getAttribute("value")===$)continue;this.#Z.setAttribute(Z,$)}this.#Z.setAttribute("text","true"),this.#X=Q}#W(){if(!this.#Z)return;this.#_??=this.#O.bind(this,"input"),this.#Y??=this.#O.bind(this,"change"),this.#Z.addEventListener("input",this.#_),this.#Z.addEventListener("change",this.#Y)}#M(){if(!this.#Z)return;if(this.#_)this.#Z.removeEventListener("input",this.#_);if(this.#Y)this.#Z.removeEventListener("change",this.#Y)}#B(J){let Q=J instanceof CustomEvent&&J.detail!==void 0?J.detail:void 0;if(typeof Q==="string"&&Q)return Q;if(Q&&typeof Q==="object"){if(typeof Q.value==="string"&&Q.value)return Q.value;if(typeof Q.hex==="string"&&Q.hex)return Q.hex;if(typeof Q.color==="string"&&Q.color)return Q.color}if(typeof this.#Z?.value==="string"&&this.#Z.value)return this.#Z.value;return this.#Z?.getAttribute("value")??""}#O(J,Q){Q.stopImmediatePropagation();let Z=this.#B(Q);if(this.setAttribute("value",Z),this.#Z&&this.#Z.getAttribute("value")!==Z)this.#Z.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#z(J){if(J.target instanceof Element&&J.target.closest("fig-input-color"))return;this.focus()}get value(){return this.getAttribute("value")??this.#Z?.value??this.#Z?.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#Z?.removeAttribute("value");return}let Q=String(J);if(this.setAttribute("value",Q),this.#Z&&this.#Z.getAttribute("value")!==Q)this.#Z.setAttribute("value",Q)}#F(J){if(!this.#Z)return;if(this.#Z.getAttribute("value")===J)this.#Z.removeAttribute("value");this.#Z.setAttribute("value",J)}#R(){return this.getAttribute("default")??this.#K??""}resetToDefault(){let J=String(this.#R());this.setAttribute("value",J),this.#F(J),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#Z?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}customElements.define("propskit-color",r1);class o1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=!1;#j=null;#X=new Set;#_=null;#Y=null;#q=this.#R.bind(this);#K=this.#F.bind(this);#G=!1;static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Q)this.#N();if(this.#U(),this.#W(),this.#M(),this.removeEventListener("click",this.#q),this.addEventListener("click",this.#q),this.removeEventListener("pointerdown",this.#K,!0),this.addEventListener("pointerdown",this.#K,!0),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;let j=$.attributeName;if(j==="label"||j==="direction"||j==="aria-label")Q=!0;else Z=!0}if(Q)this.#U();if(Z)this.#W()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#B(),this.removeEventListener("click",this.#q),this.removeEventListener("pointerdown",this.#K,!0)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label"){this.#U();return}if(J==="options"||J==="value")this.#W()}#N(){let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");$.setAttribute("full",""),Q.append(Z,$),this.#Q=Q,this.#J=Z,this.#Z=$,this.#$=Boolean(J),this.replaceChildren(Q)}#U(){if(!this.#Q||!this.#J||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#J.remove();else{if(!this.#$)this.#J.textContent=J?Q??"":"Label";if(this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#Z.setAttribute("label",this.getAttribute("aria-label")||this.#J.textContent?.trim()||"Select"),this.#Z.setAttribute("full","")}#L(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","full"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#W(){if(!this.#Z)return;let J=this.#L().sort((Z,$)=>{if(Z==="options")return-1;if($==="options")return 1;if(Z==="value")return 1;if($==="value")return-1;return 0}),Q=new Set(J);for(let Z of this.#X)if(!Q.has(Z))this.#Z.removeAttribute(Z);for(let Z of J)this.#Z.setAttribute(Z,this.getAttribute(Z)??"");this.#X=Q}#M(){if(!this.#Z)return;this.#_??=this.#O.bind(this,"input"),this.#Y??=this.#O.bind(this,"change"),this.#Z.addEventListener("input",this.#_),this.#Z.addEventListener("change",this.#Y)}#B(){if(!this.#Z)return;if(this.#_)this.#Z.removeEventListener("input",this.#_);if(this.#Y)this.#Z.removeEventListener("change",this.#Y)}#O(J,Q){if(Q.target!==this.#Z)return;Q.stopImmediatePropagation();let Z=this.#Z?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#z(){if(!this.#Z)return!1;if(this.#Z.open)return!0;let J=this.#Z.shadowRoot?.querySelector('dialog[is="fig-popup"]');return Boolean(J?.open||J?.matches?.(":open"))}#F(J){if(!(J.target instanceof Element))return;if(J.target.closest("fig-select")){this.#G=!1;return}this.#G=this.#z()}#R(J){if(J.target instanceof Element&&J.target.closest("fig-select")){this.#G=!1;return}if(!this.#Z||S(this.#Z,"disabled")){this.#G=!1;return}if(this.#Z.focus(),this.#G||this.#z()){this.#G=!1,this.#Z.open=!1;return}this.#Z.open=!0}get value(){return this.#Z?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}focus(J){this.#Z?.focus(J)}}customElements.define("propskit-select",o1);class l1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=!1;#j=null;#X=new Set;#_=null;#Y=null;#q=this.#B.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Q)this.#K();if(this.#G(),this.#U(),this.#L(),this.removeEventListener("click",this.#q),this.addEventListener("click",this.#q),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#G();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#W(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label")this.#G()}#K(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-text");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Q=Z,this.#J=$,this.#Z=j,this.#$=Boolean(Q),this.replaceChildren(Z)}#G(){if(!this.#Q||!this.#J||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#J.remove();else{if(!this.#$)this.#J.textContent=J?Q??"":"Label";if(this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#Z.setAttribute("aria-label",this.getAttribute("aria-label")||this.#J.textContent?.trim()||"Text")}#N(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","multiline","resizable"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#Z)return;let J=this.#N(),Q=new Set(J);for(let Z of this.#X)if(!Q.has(Z))this.#Z.removeAttribute(Z);for(let Z of J)this.#Z.setAttribute(Z,this.getAttribute(Z)??"");this.#X=Q}#L(){if(!this.#Z)return;this.#_??=this.#M.bind(this,"input"),this.#Y??=this.#M.bind(this,"change"),this.#Z.addEventListener("input",this.#_),this.#Z.addEventListener("change",this.#Y)}#W(){if(!this.#Z)return;if(this.#_)this.#Z.removeEventListener("input",this.#_);if(this.#Y)this.#Z.removeEventListener("change",this.#Y)}#M(J,Q){Q.stopImmediatePropagation();let Z=this.#Z?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#B(J){if(J.target instanceof Element&&J.target.closest("fig-input-text"))return;this.focus()}get value(){return this.#Z?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}focus(J){this.#Z?.focus(J)}}customElements.define("propskit-text",l1);class a1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=!1;#j=null;#X=new Set;#_=null;#Y=null;#q=this.#B.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#K();if(this.#G(),this.#U(),this.#L(),this.removeEventListener("click",this.#q),this.addEventListener("click",this.#q),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#G();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#W(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#G()}#K(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-number");Z.append($,j),this.#Q=Z,this.#J=$,this.#Z=j,this.#$=Boolean(Q),this.replaceChildren(Z);for(let _ of J)if(_!==Q)j.appendChild(_)}#G(){if(!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#J.remove();else{if(!this.#$)this.#J.textContent=J?Q??"":"Label";if(this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#N(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#Z)return;let J=this.#N(),Q=new Set(J);for(let Z of this.#X)if(!Q.has(Z))this.#Z.removeAttribute(Z);for(let Z of J)this.#Z.setAttribute(Z,this.getAttribute(Z)??"");this.#X=Q}#L(){if(!this.#Z)return;this.#_??=this.#M.bind(this,"input"),this.#Y??=this.#M.bind(this,"change"),this.#Z.addEventListener("input",this.#_),this.#Z.addEventListener("change",this.#Y)}#W(){if(!this.#Z)return;if(this.#_)this.#Z.removeEventListener("input",this.#_);if(this.#Y)this.#Z.removeEventListener("change",this.#Y)}#M(J,Q){Q.stopImmediatePropagation();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#Z?.value;if(this.#Z?.value!==void 0)this.setAttribute("value",String(this.#Z.value));this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#B(J){if(J.target instanceof Element&&J.target.closest("fig-input-number"))return;this.focus()}get value(){return this.#Z?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J==="")this.removeAttribute("value");else this.setAttribute("value",String(J))}focus(J){this.#Z?.focus(J)}}customElements.define("propskit-number",a1);class f0 extends HTMLElement{static observedAttributes=["name","open","show-reset"];static#Q=["propskit-color","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text"].join(",");#J=null;#Z=null;#$=null;#j=new WeakMap;#X=null;#_=0;#Y=()=>this.#G();connectedCallback(){this.#S(),this.#q(),requestAnimationFrame(()=>{this.#O(),this.#R()})}disconnectedCallback(){if(this.#K(),this.#_)cancelAnimationFrame(this.#_),this.#_=0;if(this.#J)this.#J.removeEventListener("click",this.#U),this.#J.removeEventListener("keydown",this.#L);this.#$?.querySelector("fig-button")?.removeEventListener("click",this.#W)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){this.#J?.setAttribute("aria-expanded",String(this.open));return}if(J==="show-reset"){this.#D(),this.#R();return}this.#S()}get open(){let J=this.getAttribute("open");return J!==null&&J!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#J?.setAttribute("aria-expanded",String(!!J)),Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}get showReset(){let J=this.getAttribute("show-reset");if(J===null)return!0;return J!=="false"}set showReset(J){if(J)this.setAttribute("show-reset","true");else this.setAttribute("show-reset","false")}get dirty(){return this.hasAttribute("data-dirty")&&this.getAttribute("data-dirty")!=="false"}resetProperties(){this.#P()}#q(){if(this.removeEventListener("input",this.#Y,!0),this.removeEventListener("change",this.#Y,!0),this.addEventListener("input",this.#Y,!0),this.addEventListener("change",this.#Y,!0),!this.#X)this.#X=new MutationObserver(()=>{this.#O(),this.#G()});this.#X.disconnect(),this.#X.observe(this,{childList:!0,subtree:!0})}#K(){this.removeEventListener("input",this.#Y,!0),this.removeEventListener("change",this.#Y,!0),this.#X?.disconnect()}#G(){if(this.#_)return;this.#_=requestAnimationFrame(()=>{this.#_=0,this.#O(),this.#R()})}#N(J){return J instanceof Element&&Boolean(J.closest(".propskit-group-reset, .propskit-group-reset-tooltip"))}#U=(J)=>{if(this.#N(J.target))return;J.stopPropagation(),this.open=!this.open};#L=(J)=>{if(this.#N(J.target))return;if(J.key!=="Enter"&&J.key!==" ")return;J.preventDefault(),J.stopPropagation(),this.open=!this.open};#W=(J)=>{J.preventDefault(),J.stopPropagation(),this.#P()};#M(){return[...this.querySelectorAll(f0.#Q)].filter((J)=>J.closest("propskit-group")===this)}#B(J){if(J.localName==="propskit-switch")return{kind:"checked",value:Boolean(J.checked)};if("value"in J)return{kind:"value",value:J.value};return{kind:"value",value:J.getAttribute("value")??""}}#O(){for(let J of this.#M()){if(this.#j.has(J))continue;if(J.hasAttribute("default")){if(J.localName==="propskit-switch"){this.#j.set(J,{kind:"checked",value:S(J,"default")});continue}this.#j.set(J,{kind:"value",value:J.getAttribute("default")??""});continue}this.#j.set(J,this.#B(J))}}#z(J){let Q=this.#j.get(J);if(!Q)return!1;let Z=this.#B(J);if(Q.kind==="checked")return Boolean(Z.value)!==Boolean(Q.value);return String(Z.value??"")!==String(Q.value??"")}#F(){for(let J of this.#M())if(this.#z(J))return!0;return!1}#R(){if(this.#F())this.setAttribute("data-dirty","");else this.removeAttribute("data-dirty");this.#D()}#H(J){let Q=this.#j.get(J);if(!Q)return;if(Q.kind==="checked"){J.checked=Q.value;let $={checked:Boolean(Q.value),value:J.getAttribute("value")??""};J.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,cancelable:!0,composed:!0}));return}if(typeof J.resetToDefault==="function"){let $=J.getAttribute("default");if(J.setAttribute("default",String(Q.value??"")),J.resetToDefault(),$===null)J.removeAttribute("default");else J.setAttribute("default",$);return}J.value=Q.value;let Z=J.getAttribute?.("value")??("value"in J?J.value:Q.value);J.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#P(){this.#O();for(let J of this.#M())this.#H(J);this.#R(),this.dispatchEvent(new CustomEvent("reset",{bubbles:!0,composed:!0}))}#D(){if(!this.showReset){this.#$?.setAttribute("hidden","");return}this.#C(),this.#$?.removeAttribute("hidden")}#C(){if(!this.#J||!this.showReset)return;let J=this.#J.querySelector(":scope > .propskit-group-reset-tooltip");if(!J){J=document.createElement("fig-tooltip"),J.className="propskit-group-reset-tooltip",J.setAttribute("text","Reset properties");let Q=document.createElement("fig-button");Q.className="propskit-group-reset",Q.setAttribute("variant","ghost"),Q.setAttribute("icon",""),Q.setAttribute("aria-label","Reset properties");let Z=document.createElement("fig-icon");Z.setAttribute("name","reset"),Q.appendChild(Z),J.appendChild(Q),this.#J.appendChild(J),Q.addEventListener("click",this.#W)}else{let Q=J.querySelector("fig-button");Q?.removeEventListener("click",this.#W),Q?.addEventListener("click",this.#W)}this.#$=J}#S(){let Q=this.getAttribute("name")||"Group",Z=this.querySelector(":scope > fig-header");if(Z)this.#J=Z;else if(!this.#J||!this.#J.dataset.generated)this.#J=document.createElement("fig-header"),this.#J.setAttribute("borderless",""),this.#J.dataset.generated="true",this.prepend(this.#J);let $=this.#J.querySelector("h3");if(!$)$=document.createElement("h3"),this.#J.prepend($);if(!$.id)$.id=J5("propskit-group");if(this.#J.dataset.generated){let j=$.querySelector(".propskit-group-chevron");if($.textContent=Q,j)$.prepend(j)}if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",$.id);if(!$.querySelector(".propskit-group-chevron")){let j=document.createElement("fig-icon");j.setAttribute("name","chevron"),j.setAttribute("size","small"),j.className="propskit-group-chevron",$.prepend(j)}if(this.#Z=$.querySelector(".propskit-group-chevron"),this.#D(),this.#J.removeEventListener("click",this.#U),this.#J.addEventListener("click",this.#U),this.#J.setAttribute("role","button"),this.#J.setAttribute("tabindex","0"),this.#J.setAttribute("aria-expanded",String(this.open)),this.#J.removeEventListener("keydown",this.#L),this.#J.addEventListener("keydown",this.#L),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#J.setAttribute("aria-expanded","false")}}customElements.define("propskit-group",f0);class n1 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=!1;#j=null;#X=new Set;#_=0;#Y=0;#q=null;#K=null;#G=0;#N=null;#U=!1;#L=0;#W=null;#M=0;#B=null;#O=null;#z=null;#F=this.#b.bind(this);#R=this.#y.bind(this);#H=this.#o.bind(this);#P=this.#w.bind(this);#D=this.#c.bind(this);#C=this.#m.bind(this);#S=new Set(["variant","color","text","full","elastic","size","name","class","data-wave-index","data-active","data-elastic-dragging","style"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#T();if(this.#A(),this.#k(),this.#J0(),this.#x(),this.removeEventListener("pointerdown",this.#F,{capture:!0}),this.addEventListener("pointerdown",this.#F,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#D),this.addEventListener("contextmenu",this.#D),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName&&this.#S.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#A();if(Z)this.#k(),this.#x()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#_)cancelAnimationFrame(this.#_),this.#_=0;if(this.#Y)cancelAnimationFrame(this.#Y),this.#Y=0;this.#u(),this.#v(),this.#p(),this.#h(),this.#s(),this.removeEventListener("pointerdown",this.#F,{capture:!0}),this.removeEventListener("contextmenu",this.#D),this.#K?.removeEventListener("change",this.#C)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#A()}#T(){let J=Array.from(this.childNodes).filter((_)=>{return _.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())}),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-slider");j.setAttribute("text","true");for(let _ of this.#E()){let q=this.getAttribute(_);j.setAttribute(_,q??"")}Z.append($,j),this.#Q=Z,this.#J=$,this.#Z=j,this.#$=Boolean(Q),this.replaceChildren(Z),this.#f();for(let _ of J){if(_===Q)continue;this.#Z.appendChild(_)}}#f(){let J=document.createElement("fig-menu");J.setAttribute("position","bottom left"),J.setAttribute("offset","0 0");let Q=document.createElement("fig-menu-item");Q.setAttribute("value","reset-default"),Q.textContent="Reset to default",J.appendChild(Q),J.addEventListener("change",this.#C),this.#K=J,this.appendChild(J)}#A(){if(!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#J.parentElement===this.#Q)this.#J.remove()}else{if(!this.#$)this.#J.textContent=J?Q??"":"Label";if(this.#J.parentElement!==this.#Q)this.#Q.prepend(this.#J)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#k(){if(!this.#Z)return;let J=this.#E(),Q=new Set(J.filter(($)=>$!=="text"));for(let $ of this.#X)if(!Q.has($))this.#Z.removeAttribute($);for(let $ of J){if($==="text")continue;let j=this.getAttribute($);this.#Z.setAttribute($,j??"")}this.#Z.removeAttribute("variant"),this.#Z.removeAttribute("color"),this.#Z.removeAttribute("transform"),this.#Z.removeAttribute("full"),this.#Z.setAttribute("text","true");let Z=(this.getAttribute("type")||"range").toLowerCase();if(Z==="delta"||Z==="stepper")this.#Z.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#Z.removeAttribute("default");if(Z==="stepper")this.#Z.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#Z.removeAttribute("step");if(Z==="opacity")this.#Z.style.setProperty("--color","light-dark(#444444, #e6e6e6)");else this.#Z.style.removeProperty("--color");this.#X=Q,this.#I()}#E(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#S.has(Q))}#I(){if(this.#_)cancelAnimationFrame(this.#_);this.#_=requestAnimationFrame(()=>{this.#_=0,this.#Z0(),this.#V()})}#x(){if(this.#Y)cancelAnimationFrame(this.#Y);this.#Y=requestAnimationFrame(()=>{this.#Y=0,this.#V()})}#V(){let J=this.#Z?.querySelector('input[type="range"]'),Q=this.#Z?.querySelector("fig-input-number input");if(J!==this.#q)this.#g(J);J?.removeAttribute("tabindex"),Q?.setAttribute("tabindex","-1")}#g(J){if(this.#h(),this.#q=J,!this.#q)return;this.#q.addEventListener("dblclick",this.#P,{capture:!0})}#h(){if(!this.#q)return;this.#q.removeEventListener("dblclick",this.#P,{capture:!0}),this.#q=null}#w(J){J.preventDefault(),J.stopImmediatePropagation(),this.#t()}#b(J){if(J.button!==0||S(this,"disabled"))return;if(this.getAttribute("elastic")==="false")return;if(J.target?.closest?.("fig-input-number"))return;let Q=this.#Z?.querySelector('input[type="range"]')??this.#q;if(!Q)return;this.#v(),this.#p(),this.#q=Q,this.#U=!0,this.#B=J.pointerId,this.#L=this.#a();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#W={left:Z.left,right:Z.right,width:Z.width},this.#M=$.width,window.addEventListener("pointermove",this.#R,{passive:!0}),window.addEventListener("pointerup",this.#H,{once:!0}),window.addEventListener("pointercancel",this.#H,{once:!0}),window.addEventListener("blur",this.#H,{once:!0})}#y(J){if(!this.#U)return;if(J.pointerId!==this.#B)return;if(J.buttons===0){this.#o(J);return}this.#l(J.clientX)}#o(J){if(J?.pointerId!==void 0&&this.#B!==null&&J.pointerId!==this.#B)return;this.#v(),this.#p()}#v(){window.removeEventListener("pointermove",this.#R),window.removeEventListener("pointerup",this.#H),window.removeEventListener("pointercancel",this.#H),window.removeEventListener("blur",this.#H),this.#U=!1,this.#B=null}#c(J){if(S(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#u(),this.#_0(J.clientX,J.clientY)}#_0(J,Q){let Z=!1,$=0,j=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",j,!0),window.removeEventListener("pointercancel",j,!0),requestAnimationFrame(()=>{this.#K?.showAt?.(J,Q)})};window.addEventListener("pointerup",j,{once:!0,capture:!0}),window.addEventListener("pointercancel",j,{once:!0,capture:!0}),$=window.setTimeout(j,180)}#m(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#t()}#u(){if(this.#G)clearTimeout(this.#G),this.#G=0;this.#N=null}#a(){let J=getComputedStyle(this).getPropertyValue("--propskit-slider-elastic-distance").trim();if(J.includes("var(")||!J.endsWith("px")){let Z=document.createElement("div");Object.assign(Z.style,{position:"absolute",visibility:"hidden",pointerEvents:"none",width:"var(--propskit-slider-elastic-distance)"}),this.appendChild(Z),J=getComputedStyle(Z).width,Z.remove()}let Q=Number.parseFloat(J);return Number.isFinite(Q)?Math.max(0,Q):0}#l(J){let Q=this.#W;if(!Q||!this.#L){this.#p();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#d();return}let $=Math.max(-this.#L,Math.min(this.#L,Z*0.5)),j=Math.abs($),_=this.#M?(this.#M+j)/this.#M:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${j}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${_}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#p(){this.#d(),this.#L=0,this.#W=null,this.#M=0,this.#B=null}#d(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#q0(J){let Q=this.#q;if(!Q)return this.#Z?.value??"";let Z=Q.getBoundingClientRect(),$=Z.width?Math.min(1,Math.max(0,(J.clientX-Z.left)/Z.width)):0,j=Number(Q.min||0),_=Number(Q.max||100),q=Q.step==="any"?0:Number(Q.step||1),X=j+(_-j)*$;if(!q)return String(X);let Y=Math.round((X-j)/q)*q+j,K=Math.max(0,`${q}`.split(".")[1]?.length||0);return String(Number(Y.toFixed(K)))}#n(){return this.getAttribute("default")??this.#Z?.getAttribute("default")??this.getAttribute("value")??this.#Z?.getAttribute("value")??this.#q?.min??"0"}#t(){this.#u(),this.#e(this.#n(),"input"),this.#e(this.#n(),"change")}#e(J,Q){if(!this.#Z||J===null||J===void 0)return;this.#Z.value=J,this.dispatchEvent(new CustomEvent(Q,{detail:this.#Z.value,bubbles:!0,cancelable:!0,composed:!0}))}#Z0(){if(!this.#Z)return;let J=this.#Z.querySelector("fig-input-number");if(!J)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){J.removeAttribute("steppers");return}let Z=this.getAttribute("steppers");J.setAttribute("steppers",Z??"")}#J0(){if(!this.#Z)return;if(!this.#O)this.#O=this.#$0.bind(this,"input");if(!this.#z)this.#z=this.#$0.bind(this,"change");this.#Z.addEventListener("input",this.#O),this.#Z.addEventListener("change",this.#z)}#s(){if(!this.#Z)return;if(this.#O)this.#Z.removeEventListener("input",this.#O);if(this.#z)this.#Z.removeEventListener("change",this.#z)}#$0(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#p();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#Z?.value;this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#Z?.querySelector('input[type="range"]')?.focus(J)}resetToDefault(){this.#t()}}customElements.define("propskit-slider",n1);class t1 extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Q=50;#J=50;#Z=75;#$=75;#j=0;#X=!1;#_=0;#Y=null;#q=null;#K=null;#G=null;#N=null;#U=null;#L=null;#W=null;#M=null;#B=!1;#O=!1;#z=!1;#F=!1;#R=null;#H="";#P="";#D=null;#C=null;#S=null;#T="";#f="";#A=null;get#k(){return this.getAttribute("type")||"point"}get#E(){return this.#k==="point-radius"||this.#k==="point-radius-angle"}get#I(){return this.#k==="point-radius-angle"}get#x(){return this.#k==="point-point"}get#V(){return this.#k==="point-radius-angle"||this.#k==="point-point"}get#g(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#h(){let J=this.getAttribute("snapping");if(J===null)return"false";let Q=J.trim().toLowerCase();if(Q==="modifier")return"modifier";if(Q===""||Q==="true")return"true";return"false"}#w(J){let Q=this.#h;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#b(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Q)}%, ${Math.round(this.#J)}%`}get#y(){let J=this.getAttribute("name");if(J){let Q=J.split(",");if(Q.length>1)return Q[1].trim()}return`${Math.round(this.#Z)}%, ${Math.round(this.#$)}%`}get#o(){return this.getAttribute("drag-surface")||"parent"}get#v(){let J=this.#o;if(J==="parent")return this.parentElement;return this.closest(J)}get#c(){let J=this.#o;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#_0(J){if(this.#X)return this.#j/100*J;return this.#j}#m(){if(this.#X)return`Radius ${Math.round(this.#j)}%`;return`Radius ${Math.round(this.#j)}`}connectedCallback(){this.#u(),this.#a()}disconnectedCallback(){this.#S0(),this.#d(),this.#e(),document.body.classList.remove("fig-lab-move-active"),document.body.classList.remove("fig-lab-rotate-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#B&&!this.#O&&!this.#z&&!this.#F)if(this.#u(),this.#Y)this.#Y0();else this.#a();if(J==="type")this.#u(),this.#a();if(J==="color"&&this.#Y)if(Z)this.#Y.setAttribute("color",Z);else this.#Y.removeAttribute("color");if(J==="disabled")this.#a();if(J==="tooltips")this.#a();if(J==="snapping"&&this.#Y){if(this.#Y.setAttribute("drag-snapping",Z||"false"),this.#q)this.#q.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#U)this.#U.setAttribute("text",this.#b);if(this.#L)this.#L.setAttribute("text",this.#y)}}#u(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#Q=Q.x;if(typeof Q.y==="number")this.#J=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#X=!0,this.#j=parseFloat(Z);else this.#X=!1,this.#j=parseFloat(Z);if(!Number.isFinite(this.#j))this.#j=0}if(typeof Q.angle==="number")this.#_=Q.angle;if(typeof Q.x2==="number")this.#Z=Q.x2;if(typeof Q.y2==="number")this.#$=Q.y2}catch{}}get value(){let J={x:this.#Q,y:this.#J};if(this.#k==="color"){let Q=this.getAttribute("color")||this.#Y?.getAttribute("color");if(Q)J.color=Q}if(this.#E)J.radius=this.#X?`${this.#j}%`:this.#j;if(this.#I)J.angle=this.#_;if(this.#x)J.x2=this.#Z,J.y2=this.#$;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#a(){this.innerHTML="",this.#Y=null,this.#q=null,this.#K=null,this.#G=null,this.#N=null,this.#U=null,this.#L=null,this.#W=null,this.#M=null;let J=S(this,"disabled"),Q=this.#k,Z=this.#g,$=this.#c,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",$),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#h),j.setAttribute("value",`${this.#Q}% ${this.#J}%`),J)j.setAttribute("disabled","");if(Q==="color"){j.setAttribute("type","color");let _=this.getAttribute("color");if(_)j.setAttribute("color",_)}else j.setAttribute("type","canvas");if(this.#x)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#Y=j,this.#E)this.#B0();if(this.#V)this.#F0();if(Z){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#b),_.appendChild(j),this.appendChild(_),this.#U=_}else this.appendChild(j);if(this.#I)this.#X0(J,Z,$);if(this.#x)this.#N0(J,Z,$);this.#l(this.#Y),this.#l(this.#K),this.#l(this.#q),this.#T0(),this.#s(),requestAnimationFrame(()=>this.#Y0())}#l(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>{if(Q.target?.classList?.contains("fig-handle-hit-area")&&J.querySelector(".fig-handle-hit-area"))this.#t(Q,J);else this.#p(Q)},{capture:!0})}#p(J){if(S(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#R===null)this.#H=document.body.style.getPropertyValue("cursor"),this.#P=document.body.style.getPropertyPriority("cursor");if(this.#R=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#D)this.#D=(Q)=>{if(Q?.pointerId!==void 0&&this.#R!==null&&Q.pointerId!==this.#R)return;if(Q?.type==="blur")this.#d();else requestAnimationFrame(()=>this.#d())};window.addEventListener("pointerup",this.#D),window.addEventListener("pointercancel",this.#D),window.addEventListener("blur",this.#D)}#d(){if(this.#R===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#H)document.body.style.setProperty("cursor",this.#H,this.#P);else document.body.style.removeProperty("cursor");if(this.#R=null,this.#H="",this.#P="",this.#D)window.removeEventListener("pointerup",this.#D),window.removeEventListener("pointercancel",this.#D),window.removeEventListener("blur",this.#D)}#q0(J){if(!J)return 0;if(J===this.#K)return this.#_;if(!this.#x)return 0;let Q=this.#U0();return J===this.#Y?Q+180:Q}#n(){if(this.#C===null)return;let J=this.#Q0(this.#q0(this.#S));document.body.style.setProperty("--fig-lab-cursor-rotate",J),document.body.style.setProperty("cursor",J,"important")}#t(J,Q){if(S(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#C===null)this.#T=document.body.style.getPropertyValue("cursor"),this.#f=document.body.style.getPropertyPriority("cursor");if(this.#C=J?.pointerId??-1,this.#S=Q,document.body.classList.add("fig-lab-rotate-active"),this.#n(),!this.#A)this.#A=(Z)=>{if(Z?.pointerId!==void 0&&this.#C!==null&&Z.pointerId!==this.#C)return;if(Z?.type==="blur")this.#e();else requestAnimationFrame(()=>this.#e())};window.addEventListener("pointerup",this.#A),window.addEventListener("pointercancel",this.#A),window.addEventListener("blur",this.#A)}#e(){if(this.#C===null)return;if(document.body.classList.remove("fig-lab-rotate-active"),document.body.style.removeProperty("--fig-lab-cursor-rotate"),this.#T)document.body.style.setProperty("cursor",this.#T,this.#f);else document.body.style.removeProperty("cursor");if(this.#C=null,this.#S=null,this.#T="",this.#f="",this.#A)window.removeEventListener("pointerup",this.#A),window.removeEventListener("pointercancel",this.#A),window.removeEventListener("blur",this.#A)}#Z0(J,Q,Z,$){if(!J)return;let j=()=>!!$?.(),_=()=>{let Y=Q();if(!Y)return;Y.removeAttribute("show"),Y.hidePopup?.()},q=()=>{if(j()){_();return}let Y=Q();if(!Y)return;if(Z)Y.setAttribute("text",Z());Y.setAttribute("show","true"),Y.showPopup?.()},X=()=>{_()};J.addEventListener("pointerenter",q),J.addEventListener("pointerleave",X)}#J0(){return this.#B||this.#O||this.#z||this.#F}#s(){if(this.#Y)this.#Z0(this.#Y,()=>this.#U,()=>this.#b,()=>this.#J0()||!!this.#Y?.querySelector("fig-color-tip"));if(this.#K)this.#Z0(this.#K,()=>this.#M,()=>`Angle ${Math.round(this.#_)}°`,()=>this.#J0());if(this.#q)this.#Z0(this.#q,()=>this.#L,()=>this.#y,()=>this.#J0());if(this.#G){let J=this.#G.querySelector(".fig-canvas-control-radius-hit");this.#j0(J||this.#G)}if(this.#k==="color"&&this.#Y&&this.#U)new MutationObserver(()=>{if(this.#Y?.querySelector("fig-color-tip"))this.#U?.removeAttribute("show"),this.#U?.hidePopup?.()}).observe(this.#Y,{childList:!0,subtree:!0})}#$0(J,Q){let Z=this.#W;if(!Z?.popup)return;let $=Q-8;Z.popup.anchor={getBoundingClientRect:()=>({left:J,top:$,right:J,bottom:$,width:0,height:0,x:J,y:$})},Z.popup.queueReposition?.()}#j0(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#W;if(!Z)return;Z.setAttribute("text",this.#m()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#$0(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#z)return;this.#$0(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#z)return;let Q=this.#W;if(!Q)return;Q.removeAttribute("show")})}#B0(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");Q.classList.add("fig-canvas-control-radius"),Q.setAttribute("overflow","visible");let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");Z.classList.add("fig-canvas-control-radius-hit"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","circle");$.classList.add("fig-canvas-control-radius-halo"),Q.appendChild($);let j=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(j),this.#G=Q,this.#g){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#m()),_.appendChild(Q),this.appendChild(_),this.#W=_}else this.appendChild(Q);this.#k0(Z)}#F0(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");if(Q.classList.add("fig-canvas-control-angle-svg"),Q.setAttribute("overflow","visible"),Q.style.position="absolute",Q.style.pointerEvents="none",this.#x){let j=document.createElementNS("http://www.w3.org/2000/svg","line");j.classList.add("fig-canvas-control-angle-line-hit"),j.setAttribute("stroke","transparent"),j.setAttribute("stroke-width","12"),j.setAttribute("stroke-linecap","round"),j.style.pointerEvents="stroke",Q.appendChild(j),this.#R0(j)}let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-halo"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","line");$.classList.add("fig-canvas-control-angle-line"),Q.appendChild($),this.#N=Q,this.appendChild(Q)}#R0(J){J.addEventListener("pointerdown",(Q)=>{if(S(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#v;if(!Z)return;let $=Z.getBoundingClientRect(),j=Q.clientX,_=Q.clientY,q=this.#Q,X=this.#J,Y=this.#Z,K=this.#$;this.#B=!0,this.#O=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let N=(U)=>{let W=Z.getBoundingClientRect(),B=W.width>0?(U.clientX-j)/W.width*100:0,L=W.height>0?(U.clientY-_)/W.height*100:0,H=-Math.min(q,Y),F=100-Math.max(q,Y),z=-Math.min(X,K),O=100-Math.max(X,K),T=Math.max(H,Math.min(F,B)),P=Math.max(z,Math.min(O,L));this.#Q=q+T,this.#J=X+P,this.#Z=Y+T,this.#$=K+P,this.#Y0(),this.#W0()},G=()=>{document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#r(),this.#L0(),window.removeEventListener("pointermove",N),window.removeEventListener("pointerup",G),requestAnimationFrame(()=>{this.#B=!1,this.#O=!1})};window.addEventListener("pointermove",N),window.addEventListener("pointerup",G)})}#X0(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("size","small"),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),J)$.setAttribute("disabled","");if(this.#K=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",`${Math.round(this.#_)}°`),j.appendChild($),this.appendChild(j),this.#M=j}else this.appendChild($)}#N0(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("drag-snapping",this.#h),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#Z}% ${this.#$}%`),J)$.setAttribute("disabled","");if(this.#q=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#y),j.appendChild($),this.appendChild(j),this.#L=j}else this.appendChild($)}#K0(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#Q0(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#G0(J,Q){if(!J)return;J.style.setProperty("cursor",Q,"important")}#z0(J,Q){if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(!Z)return;if(Z.setAttribute("data-cursor","rotate"),this.#G0(Z,this.#Q0(Q)),this.#S===J)this.#n()}#D0(){if(!this.#K||!this.#I)return;this.#z0(this.#K,this.#_)}#U0(){return Math.atan2(this.#$-this.#J,this.#Z-this.#Q)*180/Math.PI}#M0(){if(!this.#x)return;let J=this.#U0();this.#Y?.style.removeProperty("cursor"),this.#q?.style.removeProperty("cursor"),this.#z0(this.#Y,J+180),this.#z0(this.#q,J)}#O0(J,Q,Z,$){J.style.setProperty("--fig-handle-position-translate","-50% -50%"),J.style.left=`${Q/100*$.width}px`,J.style.top=`${Z/100*$.height}px`}#Y0(){let J=this.#v;if(!J||!this.#Y)return;let Q=J.getBoundingClientRect();if(this.#O0(this.#Y,this.#Q,this.#J,Q),this.#G){let Z=this.#Q/100*Q.width,$=this.#J/100*Q.height,j=this.#_0(Q.width),_=this.#G,q=Math.max(j*2,1);_.style.position="absolute",_.style.width=`${q}px`,_.style.height=`${q}px`,_.style.left=`${Z-j}px`,_.style.top=`${$-j}px`,_.setAttribute("viewBox",`0 0 ${q} ${q}`);let X=_.querySelectorAll("circle");for(let Y of X)Y.setAttribute("cx",String(j)),Y.setAttribute("cy",String(j)),Y.setAttribute("r",String(Math.max(j-1,0)))}if(this.#N&&this.#V){let Z=this.#Q/100*Q.width,$=this.#J/100*Q.height,j,_;if(this.#x)j=this.#Z/100*Q.width,_=this.#$/100*Q.height;else{let Y=this.#_0(Q.width),K=this.#_*Math.PI/180;j=Z+Y*Math.cos(K),_=$+Y*Math.sin(K)}let q=this.#N;q.style.width=`${Q.width}px`,q.style.height=`${Q.height}px`,q.style.left="0",q.style.top="0",q.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let X=q.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let Y of X)Y.setAttribute("x1",String(Z)),Y.setAttribute("y1",String($)),Y.setAttribute("x2",String(j)),Y.setAttribute("y2",String(_))}if(this.#K&&this.#I){let Z=this.#Q/100*Q.width,$=this.#J/100*Q.height,j=this.#_0(Q.width),_=this.#_*Math.PI/180,q=Z+j*Math.cos(_),X=$+j*Math.sin(_),Y=Q.width>0?q/Q.width*100:0,K=Q.height>0?X/Q.height*100:0;this.#O0(this.#K,Y,K,Q)}if(this.#q&&this.#x)this.#O0(this.#q,this.#Z,this.#$,Q);this.#D0(),this.#M0()}#W0(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#L0(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#r(){this.setAttribute("value",JSON.stringify(this.value))}#T0(){if(!this.#Y)return;if(this.#Y.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#W0();return}this.#B=!0;let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#J/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#J=Math.round(Math.max(0,Math.min(100,Z*100))),this.#U)this.#U.removeAttribute("show"),this.#U.hidePopup?.();this.#Y0(),this.#W0()}),this.#Y.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#L0();return}let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#J/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#J=Math.round(Math.max(0,Math.min(100,Z*100))),this.#U)this.#U.removeAttribute("show");this.#Y0(),this.#r(),this.#L0(),requestAnimationFrame(()=>{this.#B=!1})}),this.#K)this.#K.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#v;if(!Q)return;this.#F=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Q/100*Z.width,j=this.#J/100*Z.height,_=J.detail?.x??0,q=J.detail?.y??0,X=this.#K.offsetWidth/2,Y=this.#K.offsetHeight/2,K=_+X-$,N=q+Y-j,G=Math.atan2(N,K)*180/Math.PI;if(this.#w(J.detail?.shiftKey))G=Math.round(G/15)*15;this.#_=G;let U=Math.sqrt(K*K+N*N);if(this.#w(J.detail?.shiftKey)){let W=this.#X?5:10;if(this.#X){let B=U/Z.width*100;B=Math.round(B/W)*W,U=B/100*Z.width}else U=Math.round(U/W)*W}if(this.#X)this.#j=Math.max(0,U/Z.width*100);else this.#j=Math.max(0,U);if(this.#M)this.#M.setAttribute("text",`Angle ${Math.round(this.#_)}°`),this.#M.setAttribute("show","true"),this.#M.showPopup?.();this.#Y0(),this.#W0()}),this.#K.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#M)this.#M.removeAttribute("show");this.#Y0(),this.#r(),this.#L0(),requestAnimationFrame(()=>{this.#F=!1})}),this.#K.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#v;if(!Z)return;if(this.#F=!0,this.classList.add("fig-canvas-control-ring-active"),this.#K.setAttribute("selected",""),this.#M)this.#M.setAttribute("show","true"),this.#M.showPopup?.();let $=(_)=>{let q=Z.getBoundingClientRect(),X=this.#Q/100*q.width,Y=this.#J/100*q.height,K=_.clientX-q.left-X,N=_.clientY-q.top-Y,G=Math.atan2(N,K)*180/Math.PI;if(this.#w(_.shiftKey))G=Math.round(G/15)*15;if(this.#_=G,this.#M)this.#M.setAttribute("text",`Angle ${Math.round(G)}°`);this.#Y0(),this.#W0()},j=()=>{if(this.#F=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#K.removeAttribute("selected"),this.#M)this.#M.removeAttribute("show");this.#r(),this.#L0(),window.removeEventListener("pointermove",$),window.removeEventListener("pointerup",j)};window.addEventListener("pointermove",$),window.addEventListener("pointerup",j)});if(this.#q)this.#q.addEventListener("input",(J)=>{J.stopPropagation(),this.#O=!0;let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#$/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#$=Math.round(Math.max(0,Math.min(100,Z*100))),this.#L)this.#L.removeAttribute("show"),this.#L.hidePopup?.();this.#Y0(),this.#W0()}),this.#q.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#L)this.#L.removeAttribute("show");this.#Y0(),this.#r(),this.#L0(),requestAnimationFrame(()=>{this.#O=!1})}),this.#E0(this.#Y,!0),this.#E0(this.#q,!1)}#E0(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let j=this.#v;if(!j)return;this.#B=!0;let _=j.getBoundingClientRect(),q=Q?this.#Z:this.#Q,X=Q?this.#$:this.#J,Y=Q?this.#Q:this.#Z,K=Q?this.#J:this.#$,N=q/100*_.width,G=X/100*_.height,U=Y/100*_.width,W=K/100*_.height,B=Math.sqrt((U-N)**2+(W-G)**2),L=Q?this.#U:this.#L;if(L)L.removeAttribute("show"),L.hidePopup?.();let H=(z)=>{let O=j.getBoundingClientRect(),T=q/100*O.width,P=X/100*O.height,C=z.clientX-O.left-T,I=z.clientY-O.top-P,E=Math.atan2(I,C);if(this.#w(z.shiftKey))E=Math.round(E*180/Math.PI/15)*15*Math.PI/180;let h=T+B*Math.cos(E),a=P+B*Math.sin(E),Q0=Math.max(0,Math.min(100,h/O.width*100)),Z0=Math.max(0,Math.min(100,a/O.height*100));if(Q)this.#Q=Q0,this.#J=Z0;else this.#Z=Q0,this.#$=Z0;this.#Y0(),this.#W0()},F=()=>{if(this.#B=!1,L)L.removeAttribute("show");this.#r(),this.#L0(),window.removeEventListener("pointermove",H),window.removeEventListener("pointerup",F)};window.addEventListener("pointermove",H),window.addEventListener("pointerup",F)})}#k0(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#z)return;let $=this.#v;if(!$)return;let j=$.getBoundingClientRect(),_=this.#Q/100*j.width,q=this.#J/100*j.height,X=Math.atan2(Z.clientY-j.top-q,Z.clientX-j.left-_)*180/Math.PI;this.#G0(J,this.#K0(X))});let Q=(Z)=>{if(S(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#v;if(!$)return;if(this.#W)this.#W.setAttribute("show","true"),this.#W.showPopup?.(),this.#$0(Z.clientX,Z.clientY);if(this.#M)this.#M.removeAttribute("show"),this.#M.hidePopup?.();let j=this.#K?.style.pointerEvents,_=this.#K?.querySelector(".fig-handle-hit-area"),q=_?.style.pointerEvents;if(this.#K)this.#K.style.pointerEvents="none";if(_)_.style.pointerEvents="none";let X=document.body.style.cursor;J.style.pointerEvents="none";let Y=$.getBoundingClientRect(),K=this.#Q/100*Y.width,N=this.#J/100*Y.height,G=Math.atan2(Z.clientY-Y.top-N,Z.clientX-Y.left-K)*180/Math.PI,U=Math.round(G);document.body.style.cursor=this.#K0(U);let W=(L)=>{let H=$.getBoundingClientRect(),F=this.#Q/100*H.width,z=this.#J/100*H.height,O=L.clientX-H.left-F,T=L.clientY-H.top-z,P=Math.round(Math.atan2(T,O)*180/Math.PI);if(P!==U)U=P,document.body.style.cursor=this.#K0(P);let C=Math.sqrt(O*O+T*T);if(this.#w(L.shiftKey)){let I=this.#X?5:10;if(this.#X){let E=C/H.width*100;E=Math.round(E/I)*I,C=E/100*H.width}else C=Math.round(C/I)*I}if(this.#X)this.#j=Math.max(0,C/H.width*100);else this.#j=Math.max(0,C);if(this.#W)this.#W.setAttribute("text",this.#m()),this.#$0(L.clientX,L.clientY);this.#Y0(),this.#W0()},B=()=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#K)this.#K.style.pointerEvents=j??"";if(_)_.style.pointerEvents=q??"";if(document.body.style.cursor=X,this.#W)this.#W.removeAttribute("show");this.#r(),this.#L0(),window.removeEventListener("pointermove",W),window.removeEventListener("pointerup",B)};window.addEventListener("pointermove",W),window.addEventListener("pointerup",B)};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#S0(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",t1);class y extends HTMLElement{#Q=[y.#P()];#J=0;#Z=2;#$=240;#j=120;#X={min:-1,max:1};#_=null;#Y=null;#q=null;#K=null;#G=0;#N=null;#U=null;#L=null;#W=null;#M=[];#B=[];#O=[];#z=[];#F=new Set;#R=null;#H=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#P(J="sine"){return{type:J,frequency:1,amplitude:1,phase:0,offset:0}}static get observedAttributes(){return["value","precision","aspect-ratio","edit","disabled"]}connectedCallback(){this.#Z=this.#D("precision",2),this.#A(this.getAttribute("value")),this.#f(),this.#y(),this.#p()}disconnectedCallback(){if(this.#_=null,this.#s(),this.#R)this.#R.disconnect(),this.#R=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#A(Z),this.isConnected)this.#y();return}if(J==="precision"){if(this.#Z=this.#D("precision",2),this.isConnected)this.#O0();return}if(J==="aspect-ratio"){if(this.#f(),this.#Y)this.#Z0();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#y()}}get value(){return JSON.stringify(this.data)}set value(J){this.setAttribute("value",typeof J==="object"&&J!==null?JSON.stringify(J):J)}get data(){return{waves:this.#Q.map((J)=>this.#E(J))}}get preset(){let J=this.#I;return y.TYPES.find((Q)=>Q.value===J.type)?.name}#D(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Math.max(0,Math.min(100,Z)):Q}#C(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let $=Z.trim().toLowerCase();if($===""||$==="true")return!0;if($==="false")return!1;return!0}#S(){return this.getAttribute("edit")!=="false"}#T(){return this.#C("disabled",!1)}#f(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#A(J){if(!J)return!1;let Q=null;if(typeof J==="string")try{Q=JSON.parse(J)}catch{Q=null}else if(typeof J==="object")Q=J;if(!Q)return!1;let Z=Array.isArray(Q)?Q:Array.isArray(Q.waves)?Q.waves:[Q];if(this.#Q=Z.map(($)=>this.#k($)),!this.#Q.length)this.#Q=[y.#P()];return this.#J=Math.min(this.#J,this.#Q.length-1),!0}#k(J={}){return{type:this.#x(J.type),frequency:this.#V(J.frequency,1,0.1,16),amplitude:this.#V(J.amplitude,1,-4,4),phase:this.#V(J.phase,0,-360,360),offset:this.#V(J.offset,0,-4,4)}}#E(J){return{type:J.type,frequency:this.#g(J.frequency),amplitude:this.#g(J.amplitude),phase:this.#g(J.phase),offset:this.#g(J.offset)}}get#I(){if(!this.#Q[this.#J])this.#J=0;return this.#Q[this.#J]||y.#P()}#x(J){let Q=String(J||"").toLowerCase();return y.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#V(J,Q,Z,$){let j=Number.parseFloat(J);if(!Number.isFinite(j))return Q;return Math.min($,Math.max(Z,j))}#g(J){let Q=10**this.#Z;return Math.round(J*Q)/Q}static#h(J){return String(J).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}static#w(J){return y.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let j=Q-10,_="";for(let q=0;q<=32;q++){let X=q/32,Y=y.#b(J,X),K=5+X*j,N=5+(1-(Y+1)/2)*j;_+=`${q===0?"M":"L"}${K.toFixed(1)},${N.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${_}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#b(J,Q,Z=0){let $=Q+Z/360,j=$-Math.floor($),_=$*Math.PI*2;switch(J){case"square":return Math.sin(_)>=0?1:-1;case"sawtooth":return j*2-1;case"triangle":return 1-Math.abs(j*4-2);default:return Math.sin(_)}}#y(){this.#s(),this.innerHTML=this.#o(),this.#u(),this.#d(),this.#Z0(),this.#R0(),this.#J0()}#o(){let J=this.#T()?" disabled":"";return`<div class="propskit-oscillator-svg-container">
|
|
276
|
+
<svg viewBox="0 0 ${this.#$} ${this.#j}" class="propskit-oscillator-svg">
|
|
277
|
+
<rect class="propskit-oscillator-bounds" x="0" y="0" width="${this.#$}" height="${this.#j}"></rect>
|
|
278
|
+
<line class="propskit-oscillator-baseline"></line>
|
|
279
|
+
<path class="propskit-oscillator-path"></path>
|
|
280
|
+
<circle class="propskit-oscillator-playhead"></circle>
|
|
281
|
+
<foreignObject class="propskit-oscillator-handle propskit-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="propskit-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle size="small" aria-label="Oscillator amplitude handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
|
|
282
|
+
<foreignObject class="propskit-oscillator-handle propskit-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="propskit-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle size="small" aria-label="Oscillator frequency handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
|
|
283
|
+
</svg>
|
|
284
|
+
</div>
|
|
285
|
+
${this.#S()?this.#v(J):""}`}#v(J){return`<div class="propskit-oscillator-waves">
|
|
286
|
+
${this.#Q.map((Q,Z)=>this.#c(Q,Z,J)).join("")}
|
|
287
|
+
</div>`}#c(J,Q,Z){let $=Z||this.#Q.length<=1?" disabled":"",j=Q===this.#J?" data-active":"",_=y.#w(J.type);return`<fig-group class="propskit-oscillator-wave" collapsible borderless compact="true"${this.#F.has(Q)?' open="true"':' open="false"'} data-wave-index="${Q}">
|
|
288
|
+
<fig-header borderless>
|
|
289
|
+
<h3>${_}</h3>
|
|
290
|
+
<fig-tooltip text="Remove form">
|
|
291
|
+
<fig-button class="propskit-oscillator-remove-button" variant="ghost" icon data-wave-index="${Q}" aria-label="Remove form"${$}><fig-icon name="minus"></fig-icon></fig-button>
|
|
292
|
+
</fig-tooltip>
|
|
293
|
+
<fig-tooltip text="Add form">
|
|
294
|
+
<fig-button class="propskit-oscillator-add-type-button" type="select" variant="ghost" icon data-wave-index="${Q}" aria-label="Add form"${Z}>
|
|
295
|
+
<fig-icon name="add"></fig-icon>
|
|
296
|
+
${this.#_0("propskit-oscillator-add-type","sine",Z,Q)}
|
|
297
|
+
</fig-button>
|
|
298
|
+
</fig-tooltip>
|
|
299
|
+
</fig-header>
|
|
300
|
+
<div class="propskit-oscillator-fields" data-wave-index="${Q}"${j}>
|
|
301
|
+
${this.#m(Q,"frequency","Frequency",0.1,16,0.1,"")}
|
|
302
|
+
${this.#m(Q,"amplitude","Amplitude",-4,4,0.1,"")}
|
|
303
|
+
${this.#m(Q,"phase","Phase",-360,360,1,"°")}
|
|
304
|
+
${this.#m(Q,"offset","Offset",-4,4,0.1,"")}
|
|
305
|
+
</div>
|
|
306
|
+
</fig-group>`}#_0(J,Q,Z,$=null){let j=y.TYPES.map((q)=>{let X=q.value===Q?" selected":"";return`<option value="${q.value}"${X}>
|
|
307
|
+
${y.waveIcon(q.value,24)}
|
|
308
|
+
<label>${q.name}</label>
|
|
309
|
+
</option>`}).join(""),_=$===null?"":` data-wave-index="${y.#h(String($))}"`;return`<fig-dropdown class="${J}" value="${Q}" experimental="modern" type="dropdown" label="Add form"${_}${Z}>${j}</fig-dropdown>`}#m(J,Q,Z,$,j,_,q){let X=this.#T()?" disabled":"",Y=q?` units="${y.#h(q)}"`:"",K=this.#Q[J]||y.#P();return`<propskit-slider class="propskit-oscillator-field" label="${Z}" direction="horizontal" name="${Q}" data-wave-index="${J}" value="${this.#g(K[Q])}" min="${$}" max="${j}" step="${_}" precision="${this.#Z}" elastic="false"${Y}${X}></propskit-slider>`}#u(){this.#Y=this.querySelector(".propskit-oscillator-svg"),this.#q=this.querySelector(".propskit-oscillator-path"),this.#K=this.querySelector(".propskit-oscillator-playhead"),this.#N=this.querySelector(".propskit-oscillator-baseline"),this.#U=this.querySelector(".propskit-oscillator-bounds"),this.#L=this.querySelector('[data-handle="amplitude"]'),this.#W=this.querySelector('[data-handle="frequency"]'),this.#B=Array.from(this.querySelectorAll(".propskit-oscillator-wave-type")),this.#M=Array.from(this.querySelectorAll("propskit-slider[name]")),this.#z=Array.from(this.querySelectorAll("fig-group.propskit-oscillator-wave")),this.#O=Array.from(this.querySelectorAll(".propskit-oscillator-fields"))}#a(J){let Q=new Set;for(let Z of this.#F)if(Z<J)Q.add(Z);else if(Z>J)Q.add(Z-1);this.#F=Q}#l(J){let Q=new Set;for(let Z of this.#F)Q.add(Z>=J?Z+1:Z);Q.add(J),this.#F=Q}#p(){if(this.#R||!window.ResizeObserver)return;this.#R=new ResizeObserver(()=>{if(this.#d())this.#Z0()}),this.#R.observe(this)}#d(){if(!this.#Y)return!1;let J=this.#Y.getBoundingClientRect(),Q=Math.max(1,Math.round(J.width||240)),Z=Math.max(1,Math.round(J.height||120)),$=Q!==this.#$||Z!==this.#j;return this.#$=Q,this.#j=Z,this.#Y.setAttribute("viewBox",`0 0 ${Q} ${Z}`),$}#q0(){let J=1,Q=256;for(let Z=0;Z<=Q;Z++)J=Math.max(J,Math.abs(this.#e(Z/Q)));return{min:-J,max:J}}#n(J){let{min:Q,max:Z}=this.#X;return this.#j-(J-Q)/(Z-Q)*this.#j}#t(J){let{min:Q,max:Z}=this.#X;return Q+(1-J/this.#j)*(Z-Q)}#e(J){return this.#Q.reduce((Q,Z)=>{let $=J*Z.frequency,j=y.#b(Z.type,$,Z.phase);return Q+Z.offset+j*Z.amplitude},0)}#Z0(){if(!this.#Y||!this.#q)return;if(this.#d(),this.#X=this.#q0(),this.#U)this.#U.setAttribute("width",this.#$),this.#U.setAttribute("height",this.#j);let J=Math.max(...this.#Q.map((_)=>_.frequency)),Z=this.#Q.some((_)=>_.type==="square"||_.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),$="";for(let _=0;_<=Z;_++){let q=_/Z,X=q*this.#$,Y=this.#n(this.#e(q));$+=`${_===0?"M":"L"}${X.toFixed(1)},${Y.toFixed(1)}`}this.#q.setAttribute("d",$);let j=this.#n(0);this.#N?.setAttribute("x1","0"),this.#N?.setAttribute("y1",j),this.#N?.setAttribute("x2",this.#$),this.#N?.setAttribute("y2",j),this.#j0()}#J0(){if(this.#G||!this.#K)return;let J=(Q)=>{if(!this.isConnected||!this.#K){this.#G=0;return}this.#$0(Q%1000/1000),this.#G=requestAnimationFrame(J)};this.#G=requestAnimationFrame(J)}#s(){if(!this.#G)return;cancelAnimationFrame(this.#G),this.#G=0}#$0(J){if(!this.#K)return;let Q=J*this.#$,Z=this.#n(this.#e(J));this.#K.setAttribute("cx",Q.toFixed(1)),this.#K.setAttribute("cy",Z.toFixed(1))}#j0(){let Q=this.#I,Z=this.#B0(),$=Math.max(8,Math.min(this.#$-8,this.#$/Q.frequency)),j=this.#n(this.#e(Z/this.#$)),_=this.#n(this.#e($/this.#$));this.#F0(this.#L,Z,j,8),this.#F0(this.#W,$,_,8)}#B0(){let J=this.#I,Q=J.phase/360,Z=Math.max(0.1,J.frequency),$=0.25;if(J.type==="triangle")$=0.5;if(J.type==="sawtooth")$=1;let j=($-Q)/Z;while(j<0)j+=1/Z;while(j>1)j-=1/Z;if(j<0||j>1||!Number.isFinite(j))j=0.25;return Math.max(8,Math.min(this.#$-8,j*this.#$))}#F0(J,Q,Z,$){if(!J)return;J.setAttribute("x",Q-$),J.setAttribute("y",Z-$),J.setAttribute("width",$*2),J.setAttribute("height",$*2)}#R0(){for(let Q of this.#B)Q.addEventListener("change",(Z)=>{if(this.#T())return;let $=this.#X0(Q);this.#K0($),this.#Q[$].type=this.#x(Z.detail??Z.target?.value),this.#O0(),this.#r("input"),this.#r("change")});for(let Q of this.#M)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#H=Q;try{this.#Q0(this.#X0(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}finally{this.#H=null}}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#Q0(this.#X0(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#z)Q.addEventListener("pointerdown",()=>{this.#K0(this.#X0(Q))}),Q.addEventListener("focusin",()=>{this.#K0(this.#X0(Q))}),Q.addEventListener("openchange",(Z)=>{let $=this.#X0(Q);if(Z.detail?.open)this.#F.add($);else this.#F.delete($)});for(let Q of this.querySelectorAll(".propskit-oscillator-add-type")){let Z=($)=>{$.stopPropagation()};Q.addEventListener("pointerdown",Z),Q.addEventListener("click",Z),Q.addEventListener("change",($)=>{if($.target!==Q)return;if(this.#T())return;let _=this.#X0(Q)+1,q=this.#x($.detail??Q.value);this.#Q.splice(_,0,y.#P(q)),this.#l(_),this.#J=_,this.#y(),this.#r("input"),this.#r("change")})}for(let Q of this.querySelectorAll(".propskit-oscillator-add-type-button")){let Z=($)=>{$.stopPropagation()};Q.addEventListener("pointerdown",Z),Q.addEventListener("click",Z),Q.closest("fig-tooltip")?.addEventListener("pointerdown",Z),Q.closest("fig-tooltip")?.addEventListener("click",Z)}for(let Q of this.querySelectorAll(".propskit-oscillator-remove-button"))Q.addEventListener("pointerdown",(Z)=>{Z.stopPropagation()}),Q.addEventListener("click",(Z)=>{if(Z.stopPropagation(),this.#T()||this.#Q.length<=1)return;let $=this.#X0(Q);this.#Q.splice($,1),this.#a($),this.#J=Math.min(this.#J,this.#Q.length-1),this.#y(),this.#r("input"),this.#r("change")});for(let Q of[this.#L,this.#W])this.#N0(Q);this.querySelector(".propskit-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#T())return;if(Q.target?.closest?.(".propskit-oscillator-handle, fig-handle"))return;this.#D0(Q,"offset")})}#X0(J){let Q=Number.parseInt(J?.getAttribute("data-wave-index")||"",10);return Number.isFinite(Q)?Math.min(this.#Q.length-1,Math.max(0,Q)):0}#N0(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",($)=>{if(this.#T())return;$.preventDefault(),$.stopImmediatePropagation(),this.#D0($,Z)},{capture:!0}),Q.addEventListener("keydown",($)=>{if(this.#T())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!this.#G0($,Z))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#K0(J){let Q=Math.min(this.#Q.length-1,Math.max(0,J));if(Q===this.#J)return;this.#J=Q,this.#L0(),this.#j0()}#Q0(J,Q,Z,$){if(this.#T())return;this.#K0(J);let j=Number.parseFloat(Z);if(!Number.isFinite(j)){if($==="change")this.#W0();return}this.#Q[J]=this.#k({...this.#Q[J],[Q]:j}),this.#O0({skipFieldSync:$=="input"}),this.#r($)}#G0(J,Q){let Z=J.shiftKey?0.5:0.1,$=this.#I;switch(Q){case"amplitude":if(J.key==="ArrowUp")$.amplitude+=Z;else if(J.key==="ArrowDown")$.amplitude-=Z;else if(J.key==="Home")$.amplitude=-4;else if(J.key==="End")$.amplitude=4;else return!1;break;case"offset":if(J.key==="ArrowUp")$.offset+=Z;else if(J.key==="ArrowDown")$.offset-=Z;else if(J.key==="Home")$.offset=-4;else if(J.key==="End")$.offset=4;else return!1;break;case"frequency":if(J.key==="ArrowLeft")$.frequency-=Z;else if(J.key==="ArrowRight")$.frequency+=Z;else if(J.key==="Home")$.frequency=0.1;else if(J.key==="End")$.frequency=16;else return!1;break;default:return!1}return this.#Q[this.#J]=this.#k($),this.#O0(),this.#r("input"),this.#r("change"),!0}#z0(J){let Q=this.#Y?.getScreenCTM();if(!Q)return{x:0,y:0};let Z=Q.inverse();return{x:Z.a*J.clientX+Z.c*J.clientY+Z.e,y:Z.b*J.clientX+Z.d*J.clientY+Z.f}}#D0(J,Q){this.#_=Q,this.#Y?.classList.add("dragging");let Z=Q==="frequency"?"ew-resize":Q==="amplitude"?"ns-resize":"",$=document.body.style.cursor;if(Z)document.body.style.cursor=Z;let j=(q)=>{if(!this.#_)return;let X=this.#z0(q),Y=this.#I;if(Q==="frequency"){let K=Math.max(1,Math.min(this.#$,X.x));Y.frequency=this.#$/K}else if(Q==="offset"){let K=this.#V(X.x/this.#$,0,0,1),N=this.#M0(Y,K);Y.offset=this.#t(X.y)-this.#U0(this.#J,K)-N*Y.amplitude}else if(Q==="amplitude"){let K=this.#V(X.x/this.#$,0,0,1),N=this.#M0(Y,K),G=this.#t(X.y)-this.#U0(this.#J,K)-Y.offset;Y.amplitude=Math.abs(N)<0.001?Y.amplitude:G/N}this.#Q[this.#J]=this.#k(Y),this.#O0(),this.#r("input")},_=()=>{if(this.#_=null,this.#Y?.classList.remove("dragging"),Z)document.body.style.cursor=$;document.removeEventListener("pointermove",j),document.removeEventListener("pointerup",_),this.#r("change")};document.addEventListener("pointermove",j),document.addEventListener("pointerup",_)}#U0(J,Q){return this.#Q.reduce((Z,$,j)=>{if(j===J)return Z;let _=Q*$.frequency,q=y.#b($.type,_,$.phase);return Z+$.offset+q*$.amplitude},0)}#M0(J,Q){return y.#b(J.type,Q*J.frequency,J.phase)}#O0({skipFieldSync:J=!1}={}){if(this.#Y0(),!J)this.#W0();this.#L0(),this.#Z0()}#Y0(){for(let J of this.#B){let Q=this.#X0(J);J.value=this.#Q[Q]?.type||"sine"}}#W0(){for(let J of this.#M){if(J===this.#H)continue;let Q=this.#X0(J),Z=J.getAttribute("name"),$=this.#g(this.#Q[Q]?.[Z]??0),j=J.querySelector("fig-slider");if(j)j.value=$;else J.setAttribute("value",String($))}}#L0(){for(let J of this.#O)if(this.#X0(J)===this.#J)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#r(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:y.#w(this.#I.type)}}))}}customElements.define("propskit-oscillator",y);class e1 extends HTMLElement{#Q;#J;#Z=null;#$;#j;#X;#_;#Y;#q;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="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#$=this.#H.bind(this),this.#j=this.#E.bind(this),this.#X=this.#I.bind(this),this.#_=this.#x.bind(this),this.#Y=this.#V.bind(this),this.#q=this.#P.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let J=this.getAttribute("units")||"°";if(J==="deg")J="°";if(this.units=J,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.dial=this.#G("dial",!0),this.showRotations=this.#N(),this.#K(),this.#F(),this.#k(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#R()}#K(){this.innerHTML=this.#U()}#G(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let $=Z.trim().toLowerCase();if($===""||$==="true")return!0;if($==="false")return!1;return!0}#N(){if(this.hasAttribute("rotations"))return this.#G("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#G("show-rotations",!1);return!1}#U(){let J=this.#M(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
|
|
310
|
+
${this.dial?`<div class="fig-input-angle-plane" tabindex="0">
|
|
311
|
+
<div class="fig-input-angle-handle"></div>
|
|
312
|
+
</div>`:""}
|
|
313
|
+
${this.text?`<fig-input-number
|
|
314
|
+
name="angle"
|
|
315
|
+
step="${J}"
|
|
316
|
+
value="${this.angle}"
|
|
317
|
+
${Q}
|
|
318
|
+
${Z}
|
|
319
|
+
units="${this.units}">
|
|
320
|
+
${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
|
|
321
|
+
</fig-input-number>`:""}
|
|
322
|
+
`}#L(){let J=Math.abs(this.#B(this.angle));return Math.floor(J/360)}#W(){if(!this.rotationSpan)return;let J=this.#L();if(J>1)this.rotationSpan.textContent=`×${J}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#M(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#B(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#O(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#z(J,Q,Z){let $;switch(Q){case"rad":$=J*180/Math.PI;break;case"turn":$=J*360;break;default:$=J}switch(Z){case"rad":return $*Math.PI/180;case"turn":return $/360;default:return $}}#F(){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.#W(),this.plane?.addEventListener("mousedown",this.#j),this.plane?.addEventListener("touchstart",this.#X),window.addEventListener("keydown",this.#_),window.addEventListener("keyup",this.#Y),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#q);this.addEventListener("change",this.#$,!0)}#R(){if(this.plane?.removeEventListener("mousedown",this.#j),this.plane?.removeEventListener("touchstart",this.#X),window.removeEventListener("keydown",this.#_),window.removeEventListener("keyup",this.#Y),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#q);this.removeEventListener("change",this.#$,!0)}#H(J){if(!J.target?.matches?.("input"))return;let Z=J.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(Z){let $=parseFloat(Z[1]),j=Z[2].toLowerCase();if(j==="deg")j="°";if(j!==this.units){let _=this.#z($,j,this.units);J.target.value=String(_)}}}#P(J){J.stopPropagation(),this.angle=Number(J.target.value),this.#D(),this.#k(),this.#W(),this.#f(),this.#A()}#D(){let Q=this.#B(this.angle)*Math.PI/180;this.#Q=Math.cos(Q),this.#J=Math.sin(Q)}#C(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#S(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,$=Q.top+Q.height/2,j=J.clientX-Z,_=J.clientY-$;return Math.atan2(_,j)*180/Math.PI}#T(J){let Z=(this.#S(J)%360+360)%360;if(Z=this.#C(Z),this.min!==null||this.max!==null)this.angle=this.#O(Z);else if(this.#Z===null){this.#Z=Z;let _=(this.#B(this.angle)%360+360)%360,q=Z-_;if(q>180)q-=360;if(q<-180)q+=360;this.angle+=this.#O(q)}else{let j=Z-this.#Z;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#O(j),this.#Z=Z}if(this.#D(),this.#k(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#W(),this.#f()}#f(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#A(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#k(){if(this.handle){let Q=this.#B(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,$=Math.cos(Q)*Z,j=Math.sin(Q)*Z;this.handle.style.transform=`translate(${$}px, ${j}px)`}}#E(J){this.isDragging=!0,this.#Z=null,this.#T(J);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#T($)},Z=()=>{this.isDragging=!1,this.#Z=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",Z),this.#A()};window.addEventListener("mousemove",Q),window.addEventListener("mouseup",Z)}#I(J){J.preventDefault(),this.isDragging=!0,this.#Z=null,this.#T(J.touches[0]);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#T($.touches[0])},Z=()=>{this.isDragging=!1,this.#Z=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",Z),this.#A()};window.addEventListener("touchmove",Q),window.addEventListener("touchend",Z)}#x(J){if(J.key==="Shift")this.isShiftHeld=!0}#V(J){if(J.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(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}if(this.angle=J,this.#D(),this.#k(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#W()}attributeChangedCallback(J,Q,Z){switch(J){case"value":if(this.isDragging)break;this.value=Number(Z);break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==Q){if(this.text=Z?.toLowerCase()==="true",this.isConnected)this.#K(),this.#F(),this.#k()}break;case"dial":if(this.dial=this.#G("dial",!0),this.isConnected)this.#K(),this.#F(),this.#k();break;case"units":{let $=Z||"°";if($==="deg")$="°";if(this.units=$,this.isConnected)this.#K(),this.#F(),this.#k();break}case"min":if(this.min=Z!==null?Number(Z):null,this.isConnected)this.#K(),this.#F(),this.#k();break;case"max":if(this.max=Z!==null?Number(Z):null,this.isConnected)this.#K(),this.#F(),this.#k();break;case"rotations":case"show-rotations":if(this.showRotations=this.#N(),this.isConnected)this.#K(),this.#F(),this.#k();break}}}customElements.define("fig-input-angle",e1);class o extends HTMLElement{static observedAttributes=["axis","handle","disabled"];static#Q=6;static#J=["input","button","select","textarea","a[href]","label","summary","fig-button","fig-dropdown","fig-slider","fig-input-number","fig-input-text","propskit-color","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text","fig-checkbox","fig-switch","fig-combo-input","fig-segmented-control","fig-input-color","fig-input-fill",'[contenteditable="true"]'];#Z=null;#$=new Map;#j=null;#X=null;connectedCallback(){this.style.display="contents",this.#G(),this.#Z=new MutationObserver(()=>this.#G()),this.#Z.observe(this,{childList:!0})}disconnectedCallback(){this.#Z?.disconnect(),this.#Z=null,this.#k(),this.#E(),this.#T()}attributeChangedCallback(){if(this.isConnected)this.#G()}get#_(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#Y(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#q(){return(this.getAttribute("handle")||"").trim()}#K(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE)}#G(){let J=this.#K(),Q=new Set(J);for(let[Z,$]of this.#$)if(!Q.has(Z))$.target.removeEventListener("pointerdown",$.onPointerDown,!0),this.#$.delete(Z);if(this.#L(J),this.#N(J),this.#_||J.length<2){this.#k();return}for(let Z of J){let $=this.#M(Z),j=this.#$.get(Z);if(j&&j.target===$)continue;if(j)j.target.removeEventListener("pointerdown",j.onPointerDown,!0),this.#$.delete(Z);if(!$)continue;this.#B(Z,$)}this.#W(J),this.#U(J)}#N(J){for(let Q of J)Q.removeAttribute("data-reorder-item")}#U(J){for(let Q of J)Q.setAttribute("data-reorder-item","")}#L(J){for(let Q of J)Q.querySelectorAll("[data-reorder-handle]").forEach((Z)=>Z.removeAttribute("data-reorder-handle"))}#W(J){if(!this.#q)return;for(let Q of J){let Z=Q.querySelector(this.#q);if(Z)Z.setAttribute("data-reorder-handle","")}}#M(J){if(this.#q)return J.querySelector(this.#q);return J}#B(J,Q){let Z=($)=>{if(this.#_||this.#K().length<2)return;if($.button!==0)return;if(!this.#q&&this.#O($.target,J))return;this.#R($,J,Q)};Q.addEventListener("pointerdown",Z,!0),this.#$.set(J,{target:Q,onPointerDown:Z})}#O(J,Q){let Z=J;while(Z&&Z!==Q){if(Z instanceof Element){for(let $ of o.#J)if(Z.matches($))return!0}Z=Z.parentElement}return!1}static#z="fig-reorder-dragging";static#F(J){document.body.classList.toggle(o.#z,J)}#R(J,Q,Z){this.#E(),o.#F(!0);let $={item:Q,target:Z,pointerId:J.pointerId,oldIndex:this.#K().indexOf(Q),targetIndex:this.#K().indexOf(Q),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};$.onMove=(j)=>{if(j.pointerId!==$.pointerId)return;let _=j.clientX-$.startX,q=j.clientY-$.startY;if(!$.active){if(_*_+q*q<o.#Q*o.#Q)return;$.active=!0,J.preventDefault(),J.stopPropagation(),Q.classList.add("dragging");try{Z.setPointerCapture($.pointerId)}catch{}}j.preventDefault();let X=this.#Y==="horizontal"?j.clientX:j.clientY,Y=this.#H(X);$.targetIndex=Y,this.#S(Y,Q)},$.onKeyDown=(j)=>{if(j.key!=="Escape"||!$.active)return;j.preventDefault(),this.#A($,!0)},$.onUp=(j)=>{if(j.pointerId!==$.pointerId)return;this.#A($,j.type==="pointercancel")},this.#j=$,window.addEventListener("pointermove",$.onMove),window.addEventListener("pointerup",$.onUp),window.addEventListener("pointercancel",$.onUp),window.addEventListener("keydown",$.onKeyDown)}#H(J){let Q=this.#K(),Z=this.#Y==="horizontal";for(let $=0;$<Q.length;$++){let j=Q[$].getBoundingClientRect(),_=Z?j.left+j.width/2:j.top+j.height/2;if(J<_)return $}return Q.length}#P(J,Q){let Z=this.#K(),$=Z.indexOf(J);if($===-1)return!1;let j=Math.max(0,Math.min(Q,Z.length));if(Q===$)return!1;if(j>=Z.length&&$===Z.length-1)return!1;return!0}#D(J){if(!J.length)return null;let Q=1/0,Z=-1/0,$=1/0,j=-1/0;for(let _ of J){let q=_.getBoundingClientRect();Q=Math.min(Q,q.left),Z=Math.max(Z,q.right),$=Math.min($,q.top),j=Math.max(j,q.bottom)}return{left:Q,top:$,width:Z-Q,height:j-$}}#C(){if(this.#X)return this.#X;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#Y),document.body.appendChild(J),this.#X=J,J}#S(J,Q){let Z=this.#K();if(!this.#P(Q,J)){this.#T();return}let $=this.#D(Z);if(!$){this.#T();return}let j=this.#C();if(j.setAttribute("data-axis",this.#Y),this.#Y==="horizontal"){let q;if(J<=0)q=Z[0].getBoundingClientRect().left;else if(J>=Z.length)q=Z[Z.length-1].getBoundingClientRect().right;else q=Z[J].getBoundingClientRect().left;j.style.left=`${q-1}px`,j.style.top=`${$.top}px`,j.style.width="2px",j.style.height=`${$.height}px`;return}let _;if(J<=0)_=Z[0].getBoundingClientRect().top;else if(J>=Z.length)_=Z[Z.length-1].getBoundingClientRect().bottom;else _=Z[J].getBoundingClientRect().top;j.style.left=`${$.left}px`,j.style.top=`${_-1}px`,j.style.width=`${$.width}px`,j.style.height="2px"}#T(){this.#X?.remove(),this.#X=null}#f(J,Q){let Z=this.#K(),$=Math.max(0,Math.min(Q,Z.length));if($>=Z.length){if(Z[Z.length-1]!==J)this.appendChild(J);return}let j=Z[$];if(j!==J)this.insertBefore(J,j)}#A(J,Q){let{item:Z,oldIndex:$,active:j,onMove:_,onUp:q,onKeyDown:X}=J;if(window.removeEventListener("pointermove",_),window.removeEventListener("pointerup",q),window.removeEventListener("pointercancel",q),window.removeEventListener("keydown",X),j){if(!Q){this.#f(Z,J.targetIndex);let Y=this.#K().indexOf(Z);if(Y!==-1&&Y!==$)this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:$,newIndex:Y,item:Z}}))}}if(Z.classList.remove("dragging"),o.#F(!1),this.#T(),this.#j===J)this.#j=null}#k(){for(let[,J]of this.#$)J.target.removeEventListener("pointerdown",J.onPointerDown,!0);this.#$.clear()}#E(){if(!this.#j)return;this.#A(this.#j,!0)}}customElements.define("fig-reorder",o);var d1=0;function J5(J="fig-select"){return d1+=1,`${J}-${d1}`}function k5(J){let Q=J||"";if(Q.startsWith("["))try{let $=JSON.parse(Q);return Array.isArray($)?$:[]}catch{}let Z=Q.includes(`
|
|
323
|
+
`)?`
|
|
324
|
+
`:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function S5(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function f5(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}class Q5 extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let J=this.getAttribute("value");if(J!==null)return J;return(this.textContent||"").trim()}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get disabled(){return S(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return S(this,"selected")}set selected(J){if(J)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#Q()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="disabled")this.#Q()}#Q(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}customElements.define("fig-select-option",Q5);function I5(J,Q,Z=2){if(!J||!Q)return!1;let $=Q.scrollHeight-Q.clientHeight>Z,j=!$||Q.scrollTop<=Z,_=!$||Q.scrollTop+Q.clientHeight>=Q.scrollHeight-Z;return J.classList.toggle("overflow-start",!j),J.classList.toggle("overflow-end",!_),$}function s1(J,Q=1){if(!J)return;J.scrollBy({top:J.clientHeight*0.8*Q,behavior:"smooth"})}function V5({onStart:J,onEnd:Q}={}){let Z=($,j)=>{let _=document.createElement("button");_.type="button",_.className=`fig-overflow fig-overflow-${$}`,_.dataset.figOverflow=$,_.setAttribute("data-fig-select-nav",$),_.setAttribute("tabindex","-1"),_.setAttribute("aria-label",$==="start"?"Scroll up":"Scroll down");let q=document.createElement("fig-icon");return q.setAttribute("name","chevron"),q.setAttribute("size","small"),q.className="fig-overflow-chevron",_.appendChild(q),_.addEventListener("click",(X)=>{X.preventDefault(),X.stopPropagation(),j?.(X)}),_};return{start:Z("start",J),end:Z("end",Q)}}class Z5 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#j(),this.#X(),this.addEventListener("scroll",this.#$,{passive:!0}),this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>this.syncOverflow()),this.#Z.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#$),this.#Z?.disconnect(),this.#Z=null,this.#_()}syncOverflow(){return I5(this,this)}scrollToOption(J,Q="auto"){if(!J||!this.contains(J))return;requestAnimationFrame(()=>{if(!J.isConnected)return;if(this.scrollHeight<=this.clientHeight+1){this.syncOverflow();return}let Z=J.getBoundingClientRect(),$=this.getBoundingClientRect(),j=Z.top-$.top+this.scrollTop,_=this.scrollHeight-this.clientHeight,q=Math.max(0,Math.min(j+Z.height/2-this.clientHeight/2,_));this.scrollTo({top:q,behavior:Q}),this.syncOverflow()})}#j(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#X(){if(this.#Q&&this.#J&&this.contains(this.#Q)&&this.contains(this.#J))return;this.#_();let J=V5({onStart:()=>s1(this,-1),onEnd:()=>s1(this,1)});this.#Q=J.start,this.#J=J.end,this.prepend(this.#Q),this.append(this.#J)}#_(){this.#Q?.remove(),this.#J?.remove(),this.#Q=null,this.#J=null,this.classList.remove("overflow-start","overflow-end")}}customElements.define("fig-select-options",Z5);class $5 extends HTMLElement{#Q=null;#J=null;#Z=null;#$=null;#j=null;#X=!1;#_=-1;#Y=!1;#q=!1;#K=null;#G=!1;#N=null;#U=null;#L=!1;#W=this.#d.bind(this);#M=this.#q0.bind(this);#B=this.#n.bind(this);#O=this.#t.bind(this);#z=this.#y.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open"]}get value(){return this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get open(){return S(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#X)this.#S();if(this.#R(),this.#C(),this.#u(),this.#m(),this.#p(),this.#o(),this.open)this.#j0()}disconnectedCallback(){this.#b(),document.removeEventListener("keydown",this.#B,!0),this.#j?.disconnect(),this.#j=null}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#X)return;if(J==="options"){this.#C(),this.#p();return}if(J==="value"||J==="label"){this.#p();return}if(J==="disabled"){this.#u();return}if(J==="open"){if(Z===null||Z==="false")this.#B0();else this.#j0();return}if(J==="position"||J==="offset"||J==="closedby")this.#m()}focus(J){this.#Q?.focus(J)}blur(){this.#Q?.blur()}#F(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-MENU-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#R(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#H(){let Q=(this.#$?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#P(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#D(){let J=this.#H();if(J){if(!J.hasAttribute("slot"))J.setAttribute("slot","panel");return J}return J=document.createElement("fig-select-options"),J.setAttribute("slot","panel"),J.setAttribute("data-fig-generated",""),this.appendChild(J),J}#C(){if(this.#P())return;let J=this.hasAttribute("options"),Q=J?this.#D():this.#H();if(!Q)return;this.#L=!0;try{for(let j of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))j.remove();if(!J)return;let Z=k5(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let j of Z){let _=document.createElement("fig-select-option");if(_.setAttribute("data-fig-generated",""),_.setAttribute("value",S5(j)),_.textContent=f5(j),$)Q.insertBefore(_,$);else Q.appendChild(_)}}finally{this.#L=!1}}#S(){this.#X=!0;let J=this.attachShadow({mode:"open"});J.innerHTML=`
|
|
325
|
+
<style>
|
|
326
|
+
:host {
|
|
327
|
+
display: inline-flex;
|
|
328
|
+
position: relative;
|
|
329
|
+
align-items: center;
|
|
330
|
+
min-width: 0;
|
|
331
|
+
}
|
|
332
|
+
:host([full]:not([full="false"])) {
|
|
333
|
+
display: flex;
|
|
334
|
+
width: 100%;
|
|
335
|
+
}
|
|
336
|
+
.fig-select-trigger {
|
|
337
|
+
display: flex;
|
|
338
|
+
align-items: center;
|
|
339
|
+
justify-content: flex-start;
|
|
340
|
+
flex: 1;
|
|
341
|
+
min-width: 0;
|
|
342
|
+
width: var(--fig-select-trigger-width, 100%);
|
|
343
|
+
height: 100%;
|
|
344
|
+
margin: 0;
|
|
345
|
+
padding: 0 var(--spacer-4, 1rem) 0 var(--spacer-2, 0.5rem);
|
|
346
|
+
border: 0;
|
|
347
|
+
border-radius: inherit;
|
|
348
|
+
background: transparent;
|
|
349
|
+
box-shadow: none;
|
|
350
|
+
color: inherit;
|
|
351
|
+
font: inherit;
|
|
352
|
+
font-weight: inherit;
|
|
353
|
+
text-align: left;
|
|
354
|
+
white-space: nowrap;
|
|
355
|
+
overflow: hidden;
|
|
356
|
+
text-overflow: ellipsis;
|
|
357
|
+
cursor: default;
|
|
358
|
+
}
|
|
359
|
+
.fig-select-trigger:hover,
|
|
360
|
+
.fig-select-trigger:active,
|
|
361
|
+
.fig-select-trigger:active:hover {
|
|
362
|
+
background: transparent;
|
|
363
|
+
box-shadow: none;
|
|
364
|
+
color: inherit;
|
|
365
|
+
}
|
|
366
|
+
.fig-select-trigger:focus-visible,
|
|
367
|
+
.fig-select-trigger[data-focus-visible] {
|
|
368
|
+
outline: var(--figma-focus-outline);
|
|
369
|
+
outline-offset: var(--figma-focus-outline-offset);
|
|
370
|
+
}
|
|
371
|
+
:host([disabled]:not([disabled="false"])) .fig-select-trigger,
|
|
372
|
+
:host([disabled]:not([disabled="false"])) .fig-select-label {
|
|
373
|
+
color: var(--figma-color-text-tertiary);
|
|
374
|
+
}
|
|
375
|
+
.fig-select-label {
|
|
376
|
+
display: block;
|
|
377
|
+
width: 100%;
|
|
378
|
+
min-width: 0;
|
|
379
|
+
overflow: hidden;
|
|
380
|
+
text-overflow: ellipsis;
|
|
381
|
+
white-space: nowrap;
|
|
382
|
+
text-align: left;
|
|
383
|
+
}
|
|
384
|
+
/* Listbox chrome from document fig-select::part(listbox).
|
|
385
|
+
Overflow UI lives on slotted fig-select-options.
|
|
386
|
+
Never set display except when open — closed <dialog> must stay display:none. */
|
|
387
|
+
dialog[is="fig-popup"] {
|
|
388
|
+
flex-direction: column;
|
|
389
|
+
overflow: hidden;
|
|
390
|
+
}
|
|
391
|
+
dialog[is="fig-popup"][open] {
|
|
392
|
+
display: flex;
|
|
393
|
+
}
|
|
394
|
+
::slotted(fig-select-options) {
|
|
395
|
+
flex: 1 1 auto;
|
|
396
|
+
min-height: 0;
|
|
397
|
+
max-height: inherit;
|
|
398
|
+
}
|
|
399
|
+
</style>
|
|
400
|
+
`;let Q=document.createElement("fig-button");Q.className="fig-select-trigger",Q.setAttribute("part","trigger"),Q.setAttribute("variant","ghost"),Q.setAttribute("aria-haspopup","listbox"),Q.setAttribute("aria-expanded","false");let Z=document.createElement("span");Z.className="fig-select-label",Z.setAttribute("part","label"),Q.appendChild(Z);let $=document.createElement("dialog",{is:"fig-popup"});if($.setAttribute("is","fig-popup"),$.setAttribute("part","listbox"),$.setAttribute("theme","menu"),$.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)$.setAttribute("popover","manual");$.id=J5("fig-select-list"),Q.setAttribute("aria-controls",$.id);let j=document.createElement("slot");if(j.setAttribute("name","panel"),$.appendChild(j),J.append(Q,$),this.#Q=Q,this.#Z=Z,this.#J=$,this.#$=j,$.anchor=Q,this.#R(),this.#w(),this.#T(),!this.hasAttribute("value")){let _=this.#v().find((q)=>S(q,"selected"));if(_)this.setAttribute("value",_.value)}}#T(){if(!this.#J||this.#q)return;if(typeof this.#J.positionPopup!=="function")return;this.#K=this.#J.positionPopup.bind(this.#J),this.#J.positionPopup=()=>{if(!this.open){this.#K?.();return}this.#h()},this.#q=!0}#f(J){if(!J)return null;let Q=document.createRange();Q.selectNodeContents(J);let Z=[...Q.getClientRects()].filter(($)=>$.width>0&&$.height>0);if(Z.length)return Z[0];return J.getBoundingClientRect()}#A(){if(typeof this.#J?.parseViewportMargins==="function")return this.#J.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#k(){let J=this.#Z?.getBoundingClientRect();if(!J)return null;return{x:J.x,y:J.y,width:J.width,height:J.height}}#E(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#I(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.x-Q.x)>Z||Math.abs(J.y-Q.y)>Z||Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z}#x(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z||Math.abs(J.offsetLeft-Q.offsetLeft)>Z||Math.abs(J.offsetTop-Q.offsetTop)>Z}#V(){if(!this.#G)return!1;let J=this.#I(this.#N,this.#k()),Q=this.#x(this.#U,this.#E());return!J&&!Q}#g(){this.#N=this.#k(),this.#U=this.#E()}#h(){if(this.#V())return;let J=this.#J,Q=this.#Z;if(!J||!Q){this.#K?.();return}let Z=this.#v(),$=Z.find((L)=>this.#c(L)===this.value)||Z[0];if(!$){this.#K?.();return}this.#K?.();let j=J.getBoundingClientRect(),_=Q.getBoundingClientRect(),q=this.#f($);if(!j.width||!j.height||!_.width||!q)return;let X=q.left-j.left,Y=q.top-j.top,N=S(this,"full")?this.getBoundingClientRect().left:_.left-X,G=_.top-Y,U=this.#A();if(typeof J.clampToViewport==="function")({left:N,top:G}=J.clampToViewport({left:N,top:G},j,U));else{let{left:L,top:H}=U,F=window.innerWidth-j.width-U.right,z=window.innerHeight-j.height-U.bottom;N=Math.min(Math.max(N,L),Math.max(L,F)),G=Math.min(Math.max(G,H),Math.max(H,z))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(N)}px`,"important"),J.style.setProperty("top",`${Math.round(G)}px`,"important");let W=this.#H(),B=this.#f($);if(B&&W&&W.scrollHeight>W.clientHeight+1){let L=B.top-_.top;if(Math.abs(L)>0.5)W.scrollTop+=L;W.syncOverflow?.()}if(this.#G||this.open)this.#g()}#w(){this.#Q?.addEventListener("click",this.#W),this.#Q?.addEventListener("keydown",this.#B),this.addEventListener("click",this.#M),this.#J?.addEventListener("keydown",this.#B),this.#J?.addEventListener("close",this.#O),this.#$?.addEventListener("slotchange",this.#z)}#b(){this.#Q?.removeEventListener("click",this.#W),this.#Q?.removeEventListener("keydown",this.#B),this.removeEventListener("click",this.#M),this.#J?.removeEventListener("keydown",this.#B),this.#J?.removeEventListener("close",this.#O),this.#$?.removeEventListener("slotchange",this.#z)}#y(){this.#R(),this.#p()}#o(){if(this.#j)return;this.#j=new MutationObserver((J)=>{if(this.#Y||this.#L)return;let Q=!1;for(let Z of J){if(Z.type==="childList"){if([...Z.addedNodes].some(($)=>this.#F($))||[...Z.removedNodes].some(($)=>this.#F($)))Q=!0}if(Z.type==="attributes"&&Z.target?.tagName==="FIG-SELECT-OPTION"&&(Z.attributeName==="value"||Z.attributeName==="disabled"||Z.attributeName==="label"))Q=!0;if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#p()}),this.#j.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#v({enabledOnly:J=!1}={}){let Q=this.#H(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!S($,"disabled"))}#c(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Q=J.getAttribute?.("value");if(Q!=null)return Q;return(J.textContent||"").trim()}#_0(J){if(!J)return"";let Q=J.getAttribute?.("label");if(Q!=null&&Q!=="")return Q.trim();let Z=[];for(let $ of J.childNodes){if($.nodeType===Node.TEXT_NODE){let q=$.textContent?.trim();if(q)Z.push(q);continue}if(!($ instanceof Element))continue;let j=$.getAttribute("slot");if(j==="prepend"||j==="append")continue;let _=$.textContent?.trim();if(_)Z.push(_)}if(Z.length)return Z.join(" ").trim();return(J.textContent||"").trim()}#m(){if(!this.#J)return;this.#J.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#J.setAttribute("offset",J);else this.#J.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#J.setAttribute("closedby",Q);else this.#J.removeAttribute("closedby")}#u(){let J=S(this,"disabled");if(this.#Q)if(J)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(J&&this.open)this.open=!1}#a(J){if(!J.length)return null;let Q=J.find((Z)=>S(Z,"selected"));if(Q&&!S(Q,"disabled"))return Q;return J.find((Z)=>!S(Z,"disabled"))||J[0]||null}#l(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#p(){if(this.#Y)return;this.#Y=!0;try{let J=this.#v(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((X)=>this.#c(X)===Z):null,j=!1;if(!$){if(Q){if(!J.length){if(this.#Z)this.#Z.textContent=Z||this.getAttribute("label")||"";return}if($=this.#a(J),$){let X=this.#c($);if(Z!==X)this.setAttribute("value",X),j=!0}else this.removeAttribute("value"),j=!0}else if($=J.find((X)=>S(X,"selected")),$)this.setAttribute("value",this.#c($)),j=!0}for(let X of J){let Y=X===$;if(X.setAttribute("aria-selected",Y?"true":"false"),Y)X.setAttribute("selected","");else X.removeAttribute("selected")}let _=$&&this.#_0($)||this.getAttribute("label")||"";if(this.#Z)this.#Z.textContent=_;let q=this.getAttribute("label")||"Select";if(this.#Q?.setAttribute("aria-label",q),this.#H()?.syncOverflow?.(),j)this.#l(this.getAttribute("value")??"")}finally{this.#Y=!1}}#d(J){if(S(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=!this.open;if(Q&&this.#J&&this.#Q)this.#J.anchor=this.#Q;this.open=Q}#q0(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(S(Z,"disabled"))return;this.#e(Z)}#n(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#J?.matches?.(":open")??!1))){if(this.#Q?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" ")){if(J.preventDefault(),this.#J&&this.#Q)this.#J.anchor=this.#Q;this.open=!0,requestAnimationFrame(()=>{let j=this.#v({enabledOnly:!0}).findIndex((_)=>this.#c(_)===this.value);this.#s(j>=0?j:0)})}return}let Z=this.#v({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#J0(),this.#s(this.#_+1);break;case"ArrowUp":J.preventDefault(),this.#J0(),this.#s(this.#_-1);break;case"Home":J.preventDefault(),this.#s(0);break;case"End":J.preventDefault(),this.#s(Z.length-1);break;case"Escape":J.preventDefault(),this.open=!1,this.#Q?.focus();break;case"Enter":case" ":{this.#J0();let $=Z[this.#_];if(!$)return;J.preventDefault(),this.#e($);break}}}#t(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Q?.setAttribute("aria-expanded","false"),this.#Q?.focus(),this.#_=-1}#e(J){let Q=this.#c(J);this.setAttribute("value",Q),this.#p(),this.#l(Q),this.open=!1}#Z0(){return this.#v({enabledOnly:!0})}#J0(){let J=this.#Z0();if(!J.length){this.#_=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#_=Z>=0?Z:this.#_}#s(J){let Q=this.#Z0();if(!Q.length)return;let Z=(J%Q.length+Q.length)%Q.length;this.#_=Z,Q[Z]?.focus()}#$0(){if(!this.#J||!this.#Q)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#Q.getBoundingClientRect().width),Z=Math.max(J,Q,96);if(S(this,"full"))this.#J.style.setProperty("width",`${Z}px`,"important"),this.#J.style.setProperty("min-width",`${Z}px`,"important"),this.#J.style.setProperty("max-width",`${Z}px`,"important");else this.#J.style.setProperty("width","max-content","important"),this.#J.style.setProperty("min-width",`${Z}px`,"important"),this.#J.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#j0(){if(!this.#J||S(this,"disabled"))return;if(this.#Q)this.#J.anchor=this.#Q;this.#T(),this.#G=!1,this.#N=null,this.#U=null,this.#p(),this.#$0(),this.#J.open=!0,document.addEventListener("keydown",this.#B,!0),this.#Q?.setAttribute("aria-expanded","true"),this.#_=-1,requestAnimationFrame(()=>{this.#$0(),this.#h();let J=this.#H(),Z=this.#Z0().findIndex(($)=>this.#c($)===this.value);if(Z>=0)this.#s(Z);else if(this.#Q?.hasAttribute("data-focus-visible")||this.#Q?.matches?.(":focus-visible"))this.#s(0);J?.syncOverflow?.(),this.#G=!0,this.#g()})}#B0(){if(!this.#J)return;this.#G=!1,this.#N=null,this.#U=null,document.removeEventListener("keydown",this.#B,!0),this.#J.open=!1,this.#Q?.setAttribute("aria-expanded","false")}}customElements.define("fig-select",$5);function g(J){return String(J??"").replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">")}var y5=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],x5=["shorter","longer","increasing","decreasing"],X0=new Set(["oklch","hsl"]);function i(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase();if(!y5.includes(Z))Z="srgb";Q.interpolationSpace=Z;let $=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=x5.includes($)?$:"shorter",Q}function M0(J){let Q=i(J),Z={...Q,interpolationSpace:Q.interpolationSpace};if(X0.has(Q.interpolationSpace))Z.hueInterpolation=Q.hueInterpolation;else delete Z.hueInterpolation;return Z}function w5(J){let Q=i(J);if(Q.interpolationSpace==="srgb")return"";if(X0.has(Q.interpolationSpace))return`in ${Q.interpolationSpace} ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}function j5(J){let Q=i(J);if(X0.has(Q.interpolationSpace))return`${Q.interpolationSpace}-${Q.hueInterpolation||"shorter"}`;return Q.interpolationSpace}function I0(J){let Q=String(J??"");for(let Z of X0){let $=`${Z}-`;if(Q.startsWith($))return{interpolationSpace:Z,hueInterpolation:Q.slice($.length)||"shorter"}}return{interpolationSpace:Q||"srgb",hueInterpolation:"shorter"}}class O0 extends HTMLElement{#Q=null;#J=null;#Z=null;#$="solid";anchorElement=null;#j="solid";#X="srgb";#_={h:0,s:0,v:85,a:1};#Y="hex";#q={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#K={url:null,scaleMode:"fill",scale:50};#G={url:null,scaleMode:"fill",scale:50};#N={stream:null,snapshot:null};#U={};#L={};#W=null;#M=null;#B=null;#O=null;#z=!1;#F=!1;#R=null;#H=null;#P=null;#D=null;#C=0;#S=null;#T=null;constructor(){super();this.#S=this.#E.bind(this),this.#T=this.#I.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","experimental","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#f(),this.#x(),this.#V()})}disconnectedCallback(){if(this.#b(),this.#N.snapshot?.startsWith("blob:")){if(URL.revokeObjectURL(this.#N.snapshot),this.#K.url===this.#N.snapshot)this.#K.url=null;this.#N.snapshot=null}if(this.#G.url&&this.#G.url.startsWith("blob:"))URL.revokeObjectURL(this.#G.url);if(this.#J)this.#J.removeAttribute("selected");if(this.#Q)this.#Q.removeEventListener("click",this.#S),this.#Q.removeEventListener("keydown",this.#T)}#f(){let J=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#J=document.createElement("fig-swatch"),this.#J.setAttribute("background","#D9D9D9"),this.appendChild(this.#J),this.#Q=this.#J;else if(J.matches("fig-swatch"))this.#J=J,this.#Q=J;else this.#Q=J,this.#J=null;if(this.#k(),this.#Q.removeEventListener("click",this.#S),this.#Q.addEventListener("click",this.#S),this.#Q.removeEventListener("keydown",this.#T),this.#Q.addEventListener("keydown",this.#T),this.#J)requestAnimationFrame(()=>{let Q=this.#J.querySelector('input[type="color"]');if(Q)Q.remove();this.#k()})}#A(){return this.getAttribute("aria-label")||"Fill picker"}#k(){if(!this.#Q)return;let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=this.getAttribute("aria-labelledby");if(!this.#Q.hasAttribute("role"))this.#Q.setAttribute("role","button");if(this.#Q.setAttribute("tabindex",J?"-1":"0"),this.#Q.setAttribute("aria-disabled",J?"true":"false"),Q)this.#Q.setAttribute("aria-labelledby",Q),this.#Q.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#A()}`),this.#Q.removeAttribute("aria-labelledby");else if(this.#Q.removeAttribute("aria-labelledby"),!this.#Q.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#A()}`);let Z=this.getAttribute("aria-describedby");if(Z)this.#Q.setAttribute("aria-describedby",Z);else this.#Q.removeAttribute("aria-describedby")}#E(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;J.stopPropagation(),J.preventDefault(),this.#h()}#I(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;J.preventDefault(),J.stopPropagation(),this.#h()}#x(){let J=this.getAttribute("value");if(!J)return;let Q=["solid","gradient","image","video","webcam"];try{let Z=JSON.parse(J);if(Z.type)this.#j=Z.type;if(Z.color){if(typeof Z.color==="string")this.#_=this.#C0(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#_=Z.color}if(Z.opacity!==void 0)this.#_.a=Z.opacity/100;if(this.#X="srgb",Z.gradient)this.#q=i({...this.#q,...Z.gradient});if(Z.image)this.#K={...this.#K,...Z.image};if(Z.video)this.#G={...this.#G,...Z.video};if(Z.type&&!Q.includes(Z.type)){let{type:$,...j}=Z;this.#L[Z.type]=j}}catch(Z){if(J.startsWith("#"))this.#j="solid",this.#_=this.#C0(J)}}#V(){if(!this.#J)return;let J,Q="cover",Z="center";switch(this.#j){case"solid":J=this.#A0(this.#_);break;case"gradient":J=this.#Y0();break;case"image":if(this.#K.url){J=`url(${this.#K.url})`;let j=this.#g(this.#K.scaleMode,this.#K.scale);Q=j.size,Z=j.position}else J="";break;case"video":if(this.#G.url){J=`url(${this.#G.url})`;let j=this.#g(this.#G.scaleMode,this.#G.scale);Q=j.size,Z=j.position}else J="";break;default:J=this.#U[this.#j]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#J.setAttribute("background",J),this.#J.style.setProperty("--swatch-bg-size",Q),this.#J.style.setProperty("--swatch-bg-position",Z),this.#j==="solid")this.#J.setAttribute("alpha",this.#_.a);else this.#J.removeAttribute("alpha")}#g(J,Q){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#h(){if(!this.#Z)this.#o();if(this.#P=JSON.stringify(this.value),this.#v(this.#j,{emit:!1}),this.#J)this.#J.setAttribute("selected","true");this.#Z.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#m(),this.#u()})})}open(){this.#h()}close(){if(this.#Z)this.#Z.open=!1}#w(){if(!this.#Z)return;for(let[J,{element:Q}]of Object.entries(this.#U)){let Z=Array.from(this.#Z.querySelectorAll(".fig-fill-picker-tab")).find(($)=>$.dataset.tab===J);if(!Z)continue;while(Z.firstChild)Q.appendChild(Z.firstChild)}}#b(){if(this.#R)this.#R(),this.#R=null;if(this.#H?.disconnect(),this.#H=null,this.#y(),!this.#Z)return;this.#w(),this.#Z.remove(),this.#Z=null,this.#D=null,this.#P=null}#y(){if(this.#C+=1,this.#N.stream)this.#N.stream.getTracks().forEach((Q)=>Q.stop()),this.#N.stream=null;let J=this.#Z?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#o(){this.#U={},this.querySelectorAll('[slot^="mode-"]').forEach((G)=>{let U=G.getAttribute("slot").slice(5);this.#U[U]={element:G,label:G.getAttribute("label")||U.charAt(0).toUpperCase()+U.slice(1)}}),this.#Z=document.createElement("dialog",{is:"fig-popup"}),this.#Z.setAttribute("is","fig-popup"),this.#Z.setAttribute("drag","true"),this.#Z.setAttribute("handle","fig-header"),this.#Z.setAttribute("autoresize","false"),this.#Z.classList.add("fig-fill-picker-dialog"),this.#Z.anchor=this.anchorElement||this.#Q;let J=this.getAttribute("dialog-position")||"left";this.#Z.setAttribute("position",J),this.#Z.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},$=this.getAttribute("mode"),j;if($){if(j=$.split(",").map((U)=>U.trim().toLowerCase()).filter((U)=>Q.includes(U)||this.#U[U]),j.length===0)j=[...Q]}else j=[...Q];let _={...Z};for(let[G,{label:U}]of Object.entries(this.#U))_[G]=U;if(!j.includes(this.#j))this.#j=j[0],this.#$=j[0];let q;if(j.length===1)q=`<h3 class="fig-fill-picker-type-label">${g(_[j[0]])}</h3>`;else{let G=j.map((U)=>`<fig-select-option value="${g(U)}">${g(_[U])}</fig-select-option>`).join(`
|
|
401
|
+
`);q=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${g(this.#j)}">
|
|
402
|
+
<fig-select-options>
|
|
403
|
+
${G}
|
|
404
|
+
</fig-select-options>
|
|
405
|
+
</fig-select>`}let X=j.map((G)=>`<div class="fig-fill-picker-tab" data-tab="${g(G)}"></div>`).join(`
|
|
406
|
+
`);this.#Z.innerHTML=`
|
|
407
|
+
<fig-header>
|
|
408
|
+
${q}
|
|
409
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-close" aria-label="Close fill picker">
|
|
410
|
+
<fig-icon name="close"></fig-icon>
|
|
411
|
+
</fig-button>
|
|
412
|
+
</fig-header>
|
|
413
|
+
<fig-content>
|
|
414
|
+
${X}
|
|
415
|
+
</fig-content>
|
|
416
|
+
`,document.body.appendChild(this.#Z);for(let[G,{element:U}]of Object.entries(this.#U)){let W=Array.from(this.#Z.querySelectorAll(".fig-fill-picker-tab")).find((B)=>B.dataset.tab===G);if(!W)continue;while(U.firstChild)W.appendChild(U.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:G,container:W}}))}let Y=this.#Z.querySelector(".fig-fill-picker-type");if(Y)Y.addEventListener("change",(G)=>{let U=typeof G.detail==="string"?G.detail:G.target?.value;if(U)this.#v(U)});this.#Z.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#Z.open=!1});let K=()=>{if(this.#J)this.#J.removeAttribute("selected");if(this.#y(),this.#P!==null&&this.#P!==JSON.stringify(this.value))this.#H0();this.#P=null,this.dispatchEvent(new CustomEvent("close"))};this.#Z.addEventListener("close",K);let N={solid:()=>this.#c(),gradient:()=>this.#e(),image:()=>this.#W0(),video:()=>this.#E0(),webcam:()=>this.#S0()};for(let[G,U]of Object.entries(N))if(!this.#U[G]&&j.includes(G))U();for(let G of Object.keys(this.#U)){if(Q.includes(G))continue;let U=Array.from(this.#Z.querySelectorAll(".fig-fill-picker-tab")).find((W)=>W.dataset.tab===G);if(!U)continue;U.addEventListener("input",(W)=>{if(W.target===this)return;if(W.stopPropagation(),W.detail)this.#L[G]=W.detail;this.#i()}),U.addEventListener("change",(W)=>{if(W.target===this)return;if(W.stopPropagation(),W.detail)this.#L[G]=W.detail;this.#H0()})}}#v(J,{emit:Q=!0}={}){let Z=Array.from(this.#Z?.querySelectorAll(".fig-fill-picker-tab")??[]).find((X)=>X.dataset.tab===J);if(!Z)return;let $=this.#$;if(this.#$=J,this.#j=J,$==="webcam"&&J!=="webcam")this.#y();let j=this.#Z.querySelector(".fig-fill-picker-type");if(j&&j.value!==J)j.value=J;this.#Z.querySelectorAll(".fig-fill-picker-tab").forEach((X)=>{if(X.dataset.tab===J)X.style.display="block";else X.style.display="none"});let q=this.#Z.querySelector("fig-content");if(q)q.style.padding=this.#U[J]?"0":"";if(J==="gradient")requestAnimationFrame(()=>{this.#N0();let X=Z.querySelector(".fig-fill-picker-gradient-bar-input");X?.refreshLayout?.(),requestAnimationFrame(()=>{X?.refreshLayout?.()})});if(J==="webcam")this.#D?.();if(this.#V(),Q)this.#i()}#c(){let J=this.#Z.querySelector('[data-tab="solid"]'),Q=this.getAttribute("alpha")!=="false";if(J.innerHTML=`
|
|
417
|
+
<fig-preview class="fig-fill-picker-color-area">
|
|
418
|
+
<canvas width="200" height="200"></canvas>
|
|
419
|
+
<fig-handle
|
|
420
|
+
aria-label="Color saturation and brightness"
|
|
421
|
+
type="color"
|
|
422
|
+
color="${this.#A0({...this.#_,a:1})}"
|
|
423
|
+
data-no-color-picker
|
|
424
|
+
drag
|
|
425
|
+
drag-surface=".fig-fill-picker-color-area"
|
|
426
|
+
drag-axes="x,y"
|
|
427
|
+
drag-snapping="modifier"
|
|
428
|
+
></fig-handle>
|
|
429
|
+
</fig-preview>
|
|
430
|
+
<div class="fig-fill-picker-sliders${Q?"":" is-hue-only"}">
|
|
431
|
+
<fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" aria-label="Sample color"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
|
|
432
|
+
<fig-slider type="hue" variant="classic" text="false" min="0" max="360" aria-label="Hue" value="${this.#_.h}"></fig-slider>
|
|
433
|
+
${Q?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#_.a*100}" color="${this.#A0(this.#_)}"></fig-slider>`:""}
|
|
434
|
+
</div>
|
|
435
|
+
<fig-field class="fig-fill-picker-inputs">
|
|
436
|
+
<fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${g(this.#Y)}">
|
|
437
|
+
<fig-select-options>
|
|
438
|
+
<fig-select-option value="hex">Hex</fig-select-option>
|
|
439
|
+
<fig-select-option value="rgb">RGB</fig-select-option>
|
|
440
|
+
<fig-select-option value="css">CSS</fig-select-option>
|
|
441
|
+
<fig-select-option value="hsl">HSL</fig-select-option>
|
|
442
|
+
<fig-select-option value="hsb">HSB</fig-select-option>
|
|
443
|
+
<fig-select-option value="lab">LAB</fig-select-option>
|
|
444
|
+
<fig-select-option value="lch">LCH</fig-select-option>
|
|
445
|
+
</fig-select-options>
|
|
446
|
+
</fig-select>
|
|
447
|
+
<span class="fig-fill-picker-input-fields"></span>
|
|
448
|
+
</fig-field>
|
|
449
|
+
`,this.#W=J.querySelector("canvas"),this.#M=J.querySelector("fig-handle"),this.#m(),this.#u(),this.#l(),this.#B=J.querySelector('fig-slider[type="hue"]'),this.#B.addEventListener("input",(j)=>{this.#_.h=parseFloat(j.target.value),this.#m(),this.#u(),this.#t(),this.#i()}),this.#B.addEventListener("change",()=>{this.#H0()}),Q)this.#O=J.querySelector('fig-slider[type="opacity"]'),this.#O.addEventListener("input",(j)=>{this.#_.a=parseFloat(j.target.value)/100,this.#t(),this.#i()}),this.#O.addEventListener("change",()=>{this.#H0()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(j)=>{let _=typeof j.detail==="string"?j.detail:j.target?.value;if(!_)return;this.#Y=_,this.#p()}),this.#p();let $=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)$.addEventListener("click",async()=>{try{let _=await new EyeDropper().open();this.#_={...this.#C0(_.sRGBHex),a:this.#_.a},this.#m(),this.#u(),this.#t(),this.#i()}catch(j){}});else $.setAttribute("disabled",""),$.title="EyeDropper not supported in this browser"}#_0(){let J=this.#Z?.querySelector('[data-tab="solid"]');if(J){let Q=J.querySelector("canvas");if(Q){let Z=document.createElement("canvas");Z.width=Q.width,Z.height=Q.height,Q.replaceWith(Z),this.#W=Z,this.#l()}this.#m(),this.#u()}this.#G0(),this.#i()}#m(){if(!this.#W&&this.#Z)this.#W=this.#Z.querySelector('[data-tab="solid"] canvas');if(!this.#W)return;let J=this.#X==="display-p3"?"display-p3":"srgb",Q=this.#W.getContext("2d",{colorSpace:J});if(!Q)return;let Z=this.#W.width,$=this.#W.height;Q.clearRect(0,0,Z,$);let j=this.#_.h,_=this.#X==="display-p3",q=Q.createLinearGradient(0,0,Z,0);if(_){q.addColorStop(0,"color(display-p3 1 1 1)");let[Y,K,N]=hslToP3(j,100,50);q.addColorStop(1,`color(display-p3 ${Y} ${K} ${N})`)}else q.addColorStop(0,"#FFFFFF"),q.addColorStop(1,`hsl(${j}, 100%, 50%)`);Q.fillStyle=q,Q.fillRect(0,0,Z,$);let X=Q.createLinearGradient(0,0,0,$);X.addColorStop(0,"rgba(0,0,0,0)"),X.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=X,Q.fillRect(0,0,Z,$)}#u(J=0){if(!this.#M||!this.#W)return;let Q=this.#W.getBoundingClientRect();if((Q.width===0||Q.height===0)&&J<5){requestAnimationFrame(()=>this.#u(J+1));return}let Z=Math.max(0,Math.min(100,this.#_.s)),$=Math.max(0,Math.min(100,100-this.#_.v));this.#M.setAttribute("value",`${Z}% ${$}%`),this.#M.setAttribute("color",this.#A0({...this.#_,a:1}))}#a(J,Q,Z={}){let{updateHandle:$=!0,emitInput:j=!0,emitChange:_=!1}=Z;if(this.#_.s=Math.max(0,Math.min(100,J*100)),this.#_.v=Math.max(0,Math.min(100,(1-Q)*100)),this.#M)this.#M.setAttribute("color",this.#A0({...this.#_,a:1}));if($)this.#u();if(this.#t(),j)this.#i();if(_)this.#H0()}#l(){if(this.#R)this.#R(),this.#R=null;if(!this.#W||!this.#M)return;let J=this.#W.parentElement||this.#W,Q=this.#M,Z=!1,$=(K,N={})=>{let G=J.getBoundingClientRect();if(G.width===0||G.height===0)return;let U=Math.max(0,Math.min(K.clientX-G.left,G.width)),W=Math.max(0,Math.min(K.clientY-G.top,G.height));this.#a(U/G.width,W/G.height,N)},j=(K)=>{if(K.button!==0)return;if(K.target===Q||Q.contains(K.target))return;Z=!0,this.#z=!0,J.setPointerCapture(K.pointerId),$(K,{updateHandle:!0,emitInput:!0})},_=(K)=>{if(!Z)return;if(K.buttons===0){q();return}$(K,{updateHandle:!0,emitInput:!0})},q=()=>{if(!Z)return;Z=!1,this.#z=!1,this.#H0()},X=(K)=>{this.#z=!0;let N=K.detail?.px,G=K.detail?.py;if(!Number.isFinite(N)||!Number.isFinite(G))return;Q.setAttribute("value",`${N*100}% ${G*100}%`),this.#a(N,G,{updateHandle:!1,emitInput:!0})},Y=(K)=>{let N=K.detail?.px,G=K.detail?.py;if(Number.isFinite(N)&&Number.isFinite(G))Q.setAttribute("value",`${N*100}% ${G*100}%`),this.#a(N,G,{updateHandle:!1,emitInput:!1});this.#z=!1,this.#H0()};J.addEventListener("pointerdown",j),J.addEventListener("pointermove",_),J.addEventListener("pointerup",q),J.addEventListener("pointercancel",q),J.addEventListener("lostpointercapture",q),Q.addEventListener("input",X),Q.addEventListener("change",Y),this.#R=()=>{J.removeEventListener("pointerdown",j),J.removeEventListener("pointermove",_),J.removeEventListener("pointerup",q),J.removeEventListener("pointercancel",q),J.removeEventListener("lostpointercapture",q),Q.removeEventListener("input",X),Q.removeEventListener("change",Y),this.#z=!1}}#p(){let J=this.#Z?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=(q,X)=>`<fig-tooltip text="${q}">${X}</fig-tooltip>`,Z=(q,X,Y,K,N,G)=>`<fig-input-number class="${q}" aria-label="${X}" min="${Y}" max="${K}"${N!=null?` step="${N}"`:""}${G?` units="${G}"`:""}></fig-input-number>`,$=this.getAttribute("alpha")!=="false",j=()=>$?Q("Alpha",Z("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):"",_;switch(this.#Y){case"rgb":_=`<div class="input-combo">
|
|
450
|
+
${Q("Red",Z("fig-fill-picker-ci-r","Red",0,255))}
|
|
451
|
+
${Q("Green",Z("fig-fill-picker-ci-g","Green",0,255))}
|
|
452
|
+
${Q("Blue",Z("fig-fill-picker-ci-b","Blue",0,255))}
|
|
453
|
+
${j()}
|
|
454
|
+
</div>`;break;case"hsl":_=`<div class="input-combo">
|
|
455
|
+
${Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360))}
|
|
456
|
+
${Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100))}
|
|
457
|
+
${Q("Lightness",Z("fig-fill-picker-ci-l","Lightness",0,100))}
|
|
458
|
+
${j()}
|
|
459
|
+
</div>`;break;case"hsb":_=`<div class="input-combo">
|
|
460
|
+
${Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360))}
|
|
461
|
+
${Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100))}
|
|
462
|
+
${Q("Brightness",Z("fig-fill-picker-ci-v","Brightness",0,100))}
|
|
463
|
+
${j()}
|
|
464
|
+
</div>`;break;case"lab":_=`<div class="input-combo">
|
|
465
|
+
${Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100))}
|
|
466
|
+
${Q("Green-Red axis",Z("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001))}
|
|
467
|
+
${Q("Blue-Yellow axis",Z("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001))}
|
|
468
|
+
${j()}
|
|
469
|
+
</div>`;break;case"lch":_=`<div class="input-combo">
|
|
470
|
+
${Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100))}
|
|
471
|
+
${Q("Chroma",Z("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001))}
|
|
472
|
+
${Q("Hue",Z("fig-fill-picker-ci-okh","Hue",0,360))}
|
|
473
|
+
${j()}
|
|
474
|
+
</div>`;break;case"css":_='<fig-input-text class="fig-fill-picker-ci-css" aria-label="CSS color" placeholder="rgba(0, 0, 0, 1)"></fig-input-text>';break;default:_=$?`<div class="input-combo fig-fill-picker-ci-hex-row">
|
|
475
|
+
<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>
|
|
476
|
+
${j()}
|
|
477
|
+
</div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}J.innerHTML=_,this.#d(),requestAnimationFrame(()=>this.#t())}#d(){let J=this.#Z?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=()=>{if(this.#z)return;let j=this.#n();if(!j)return;let _=Number.isFinite(j.a)?j.a:this.#_.a;if(this.#_={...j,a:_},this.#m(),this.#u(),this.#B)this.#B.setAttribute("value",this.#_.h);if(this.#O&&Number.isFinite(j.a))this.#O.setAttribute("value",this.#_.a*100);this.#i()},Z=()=>this.#H0();J.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",Q),j.addEventListener("change",Z)})}#q0(){let J=this.#Z?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Q=parseFloat(J.value);if(!Number.isFinite(Q))return;return Math.max(0,Math.min(1,Q/100))}#n(){let J=($)=>this.#Z?.querySelector(`.${$}`),Q=($)=>parseFloat(J($)?.value??0),Z=($)=>{if(!$)return null;let j=this.#q0();return{...$,a:j??$.a??this.#_.a}};switch(this.#Y){case"rgb":return Z(this.#P0({r:Q("fig-fill-picker-ci-r"),g:Q("fig-fill-picker-ci-g"),b:Q("fig-fill-picker-ci-b")}));case"hsl":{let $=this.#m0({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),l:Q("fig-fill-picker-ci-l")});return Z(this.#P0($))}case"hsb":return Z({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),v:Q("fig-fill-picker-ci-v")});case"lab":{let $=this.#V0({l:Q("fig-fill-picker-ci-okl")/100,a:Q("fig-fill-picker-ci-oka"),b:Q("fig-fill-picker-ci-okb")});return Z(this.#P0($))}case"lch":{let $=this.#c0({l:Q("fig-fill-picker-ci-okl")/100,c:Q("fig-fill-picker-ci-okc"),h:Q("fig-fill-picker-ci-okh")});return Z(this.#P0($))}case"css":{let $=J("fig-fill-picker-ci-css");if(!$)return null;return this.#g0($.value)}default:{let $=J("fig-fill-picker-ci-hex");if(!$)return null;let j=$.value.replace(/^#/,"");if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];if(j.length===8){let _=parseInt(j.slice(6,8),16)/255;if(j=j.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(j))return null;return{...this.#C0(`#${j}`),a:_}}if(j.length!==6||!/^[0-9a-fA-F]{6}$/.test(j))return null;return Z(this.#C0(`#${j}`))}}}#t(){if(!this.#Z)return;let J=this.#A0(this.#_),Q=this.#f0(this.#_),Z=(j)=>this.#Z.querySelector(`.${j}`),$=(j,_)=>{let q=Z(j);if(q)q.setAttribute("value",_)};switch(this.#Y){case"rgb":$("fig-fill-picker-ci-r",Q.r),$("fig-fill-picker-ci-g",Q.g),$("fig-fill-picker-ci-b",Q.b);break;case"hsl":{let j=this.#v0(Q);$("fig-fill-picker-ci-h",Math.round(j.h)),$("fig-fill-picker-ci-s",Math.round(j.s)),$("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":$("fig-fill-picker-ci-h",Math.round(this.#_.h)),$("fig-fill-picker-ci-s",Math.round(this.#_.s)),$("fig-fill-picker-ci-v",Math.round(this.#_.v));break;case"lab":{let j=this.#I0(Q);$("fig-fill-picker-ci-okl",Math.round(j.l*100)),$("fig-fill-picker-ci-oka",+j.a.toFixed(3)),$("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{let j=this.#u0(Q);$("fig-fill-picker-ci-okl",Math.round(j.l*100)),$("fig-fill-picker-ci-okc",+j.c.toFixed(3)),$("fig-fill-picker-ci-okh",Math.round(j.h));break}case"css":$("fig-fill-picker-ci-css",this.#b0(this.#_));break;default:$("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#Y!=="css"){let j=Math.round(this.#_.a*1000)/10;$("fig-fill-picker-ci-a",Number.isInteger(j)?j:+j.toFixed(1))}if(this.#O)this.#O.setAttribute("color",J);this.#V()}#e(){let J=this.#Z.querySelector('[data-tab="gradient"]'),Q=j5(this.#q);J.innerHTML=`
|
|
478
|
+
<fig-field class="fig-fill-picker-gradient-header">
|
|
479
|
+
<fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${g(this.#q.type)}">
|
|
480
|
+
<fig-select-options>
|
|
481
|
+
<fig-select-option value="linear">Linear</fig-select-option>
|
|
482
|
+
<fig-select-option value="radial">Radial</fig-select-option>
|
|
483
|
+
<fig-select-option value="angular">Angular</fig-select-option>
|
|
484
|
+
</fig-select-options>
|
|
485
|
+
</fig-select>
|
|
486
|
+
<fig-tooltip text="Gradient angle">
|
|
487
|
+
<fig-input-number class="fig-fill-picker-gradient-angle" aria-label="Gradient angle" value="${(this.#q.angle-90+360)%360}" min="0" max="360" units="°" wrap></fig-input-number>
|
|
488
|
+
</fig-tooltip>
|
|
489
|
+
<div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
|
|
490
|
+
<fig-input-number min="0" max="100" aria-label="Gradient center X" value="${this.#q.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
|
|
491
|
+
<fig-input-number min="0" max="100" aria-label="Gradient center Y" value="${this.#q.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="fig-fill-picker-gradient-actions">
|
|
494
|
+
<fig-tooltip text="Flip gradient">
|
|
495
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip" aria-label="Flip gradient">
|
|
496
|
+
<fig-icon name="swap"></fig-icon>
|
|
497
|
+
</fig-button>
|
|
498
|
+
</fig-tooltip>
|
|
499
|
+
<fig-tooltip text="Rotate gradient">
|
|
500
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-gradient-rotate" aria-label="Rotate gradient">
|
|
501
|
+
<fig-icon name="rotate"></fig-icon>
|
|
502
|
+
</fig-button>
|
|
503
|
+
</fig-tooltip>
|
|
504
|
+
</div>
|
|
505
|
+
</fig-field>
|
|
506
|
+
<fig-preview class="fig-fill-picker-gradient-preview">
|
|
507
|
+
<fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:M0(this.#q)})}'></fig-input-gradient>
|
|
508
|
+
</fig-preview>
|
|
509
|
+
<div class="fig-fill-picker-gradient-stops">
|
|
510
|
+
<fig-header class="fig-fill-picker-gradient-stops-header" borderless>
|
|
511
|
+
<span>Stops</span>
|
|
512
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" aria-label="Add gradient stop" title="Add stop">
|
|
513
|
+
<fig-icon name="add"></fig-icon>
|
|
514
|
+
</fig-button>
|
|
515
|
+
</fig-header>
|
|
516
|
+
<div class="fig-fill-picker-gradient-stops-list">
|
|
517
|
+
<fig-reorder></fig-reorder>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
<div class="fig-fill-picker-gradient-interpolation">
|
|
521
|
+
<fig-header class="fig-fill-picker-gradient-interpolation-header" borderless>
|
|
522
|
+
<span>Color interpolation</span>
|
|
523
|
+
</fig-header>
|
|
524
|
+
<fig-field class="fig-fill-picker-gradient-interpolation-field">
|
|
525
|
+
<fig-select class="fig-fill-picker-gradient-space" label="Color interpolation" full value="${g(Q)}">
|
|
526
|
+
<fig-select-options>
|
|
527
|
+
${this.#Z0()}
|
|
528
|
+
</fig-select-options>
|
|
529
|
+
</fig-select>
|
|
530
|
+
</fig-field>
|
|
531
|
+
</div>
|
|
532
|
+
`,this.#N0(),this.#J0(J)}#Z0(){let J=["shorter","longer","increasing","decreasing"];return[{label:"Linear",options:[{value:"srgb",label:"sRGB"}]},{label:"",options:[{value:"oklab",label:"OKLAB"}]},{label:"Polar",options:J.map((Z)=>({value:`oklch-${Z}`,label:`OKLCH ${Z.charAt(0).toUpperCase()}${Z.slice(1)}`}))},{label:"",separator:!0,options:J.map((Z)=>({value:`hsl-${Z}`,label:`HSL ${Z.charAt(0).toUpperCase()}${Z.slice(1)}`}))}].map((Z)=>{let $=Z.options.map((_)=>{let q=_.method?_.method.charAt(0).toUpperCase()+_.method.slice(1):"",X=_.append||q;return`<fig-select-option value="${g(_.value)}" label="${g(_.label)}">
|
|
533
|
+
<fig-interpolation-swatch slot="prepend" size="large" aria-hidden="true"></fig-interpolation-swatch>
|
|
534
|
+
${g(_.label)}
|
|
535
|
+
${X?`<span slot="append">${g(X)}</span>`:""}
|
|
536
|
+
</fig-select-option>`}).join("");return`${Z.label||Z.separator?`<fig-menu-separator${Z.label?` label="${g(Z.label)}"`:""}></fig-menu-separator>`:""}${$}`}).join("")}#J0(J){let Q=(G)=>typeof G.detail==="string"?G.detail:G.target?.value,Z=J.querySelector(".fig-fill-picker-gradient-bar-input"),$=(G)=>{if(!Z)return;this.#F=!0;try{Z.setAttribute("value",JSON.stringify({type:"gradient",gradient:M0(G)}))}finally{this.#F=!1}},j=()=>{$(this.#q)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(G)=>{let U=Q(G);if(!U)return;this.#q.type=U,this.#N0(),this.#i()});let q=J.querySelector(".fig-fill-picker-gradient-space");if(q?.querySelectorAll("fig-select-option").forEach((G)=>{let U=()=>{let W=I0(G.getAttribute("value")||"srgb");$(i({...this.#q,...W}))};G.addEventListener("pointerenter",U),G.addEventListener("pointerleave",()=>{if(document.activeElement!==G)j()}),G.addEventListener("focus",U),G.addEventListener("blur",()=>{if(!G.matches(":hover"))j()})}),this.#H?.disconnect(),q)this.#H=new MutationObserver(()=>{if(!q.hasAttribute("open"))j()}),this.#H.observe(q,{attributes:!0,attributeFilter:["open"]});q?.addEventListener("change",(G)=>{let U=Q(G);if(!U)return;let W=I0(U);this.#q=i({...this.#q,...W}),this.#N0(),this.#i()}),J.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(G)=>{let U=parseFloat(G.target.value)||0;this.#q.angle=(U+90)%360,this.#G0(),this.#i()});let Y=J.querySelector(".fig-fill-picker-gradient-cx"),K=J.querySelector(".fig-fill-picker-gradient-cy");if(Y?.addEventListener("input",(G)=>{let U=Number.parseFloat(G.target.value);this.#q.centerX=Number.isFinite(U)?U:50,this.#G0(),this.#i()}),K?.addEventListener("input",(G)=>{let U=Number.parseFloat(G.target.value);this.#q.centerY=Number.isFinite(U)?U:50,this.#G0(),this.#i()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#q.angle=(Number(this.#q.angle)+90)%360,this.#N0(),this.#i()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#q.stops.forEach((G)=>{G.position=100-G.position}),this.#q.stops.sort((G,U)=>G.position-U.position),this.#N0(),this.#i()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#q.stops.push({position:50,color:"#888888",opacity:100}),this.#q.stops.sort((U,W)=>U.position-W.position),this.#N0(),this.#i()}),Z){let G=(U)=>{if(U.stopPropagation(),this.#F)return;let W=U.detail;if(!W?.gradient)return;this.#q=i({...this.#q,...W.gradient}),this.#V(),this.#Q0(),this.#z0()};Z.addEventListener("input",(U)=>{G(U),this.#i()}),Z.addEventListener("change",(U)=>{G(U),this.#H0()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(G)=>{this.#X0(G)})}#s(J){let Q=String(J.color||"#888888").replace(/^#/,"").slice(0,6),Z=J.opacity??100;if(Z>=100)return`#${Q}`;let $=Math.round(Z/100*255).toString(16).padStart(2,"0");return`#${Q}${$}`}#$0(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#j0(J.hexOpaque);let Q=J.value;if(typeof Q==="string"&&Q.startsWith("#"))return this.#j0(Q.length>7?Q.slice(0,7):Q);let Z=J.querySelector('fig-input-text:not([type="number"])'),$=String(Z?.value??Z?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test($))return`#${$.toUpperCase()}`;let j=J.getAttribute("value");if(typeof j==="string"&&j.startsWith("#"))return this.#j0(j.length>7?j.slice(0,7):j);return"#888888"}#j0(J){let Q=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Q))return"#888888";return`#${Q.toUpperCase()}`}#B0(J){let Q=J.querySelector(".fig-fill-picker-stop-position"),Z=J.querySelector(".fig-fill-picker-stop-color"),$=parseFloat(Q?.value??Q?.getAttribute("value")??"0")||0,j=this.#$0(Z),_=100;if(Z instanceof HTMLElement&&Z.rgba?.a!==void 0)_=Math.round(Z.rgba.a*100);else{let q=parseInt(J.dataset.index,10);if(!isNaN(q)&&this.#q.stops[q])_=this.#q.stops[q].opacity??100}return{position:$,color:j,opacity:_}}#F0(J){let Q=parseInt(J.dataset.index,10);if(isNaN(Q)||Q<0||Q>=this.#q.stops.length)return;let Z={...this.#q.stops[Q],...this.#B0(J)};this.#q.stops[Q]=Z,this.#R0(J,Z)}#R0(J,Q){let Z=J.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",String(Q.position));let $=J.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#s(Q))}#X0(J){let{oldIndex:Q,newIndex:Z}=J.detail??{};if(Q==null||Z==null||Q===Z||Q<0||Z<0||Q>=this.#q.stops.length||Z>=this.#q.stops.length)return;let j=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");j.forEach((q)=>this.#F0(q));let[_]=this.#q.stops.splice(Q,1);this.#q.stops.splice(Z,0,_),j.forEach((q,X)=>{q.dataset.index=String(X)}),this.#F=!0;try{this.#Q0(),this.#G0(),this.#i()}finally{this.#F=!1}}#N0(){if(!this.#Z)return;let J=this.#Z.querySelector('[data-tab="gradient"]');if(!J)return;this.#q=i(this.#q);let Q=J.querySelector(".fig-fill-picker-gradient-angle"),Z=J.querySelector(".fig-fill-picker-gradient-rotate"),$=J.querySelector(".fig-fill-picker-gradient-center");if(this.#q.type==="radial"){if(Q.style.display="none",Z)Z.style.display="none";$.style.display="flex"}else{Q.style.removeProperty("display"),Z?.style.removeProperty("display"),$.style.display="none";let _=(this.#q.angle-90+360)%360;Q.setAttribute("value",_)}let j=J.querySelector(".fig-fill-picker-gradient-space");if(j)j.value=j5(this.#q);this.#Q0(),this.#G0(),this.#z0()}#K0(){let J=Array.isArray(this.#q.stops)?[...this.#q.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Q)=>({color:String(Q.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q.position??0}))}#Q0(){if(!this.#Z)return;let J=this.#K0();this.#Z.querySelectorAll("fig-interpolation-swatch").forEach((Q)=>{let Z=Q.closest("fig-select-option")?.getAttribute("value")||"srgb",$=I0(Z),j={type:"linear",stops:J,interpolationSpace:$.interpolationSpace};if(X0.has($.interpolationSpace))j.hueInterpolation=$.hueInterpolation;Q.value={type:"gradient",gradient:j}})}#G0(){if(!this.#Z)return;let J=this.#Z.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#F=!0,J.setAttribute("value",JSON.stringify({type:"gradient",gradient:M0(this.#q)})),this.#F=!1;this.#V()}#z0(){if(!this.#Z)return;let J=this.#Z.querySelector(".fig-fill-picker-gradient-stops-list"),Q=J?.querySelector("fig-reorder");if(!J||!Q)return;let Z=Q.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Z.length===this.#q.stops.length){this.#q.stops.forEach(($,j)=>{let _=Z[j];_.dataset.index=j;let q=_.querySelector(".fig-fill-picker-stop-position");if(q)q.setAttribute("value",$.position);let X=_.querySelector(".fig-fill-picker-stop-color");if(X)X.setAttribute("value",this.#s($));let Y=_.querySelector(".fig-fill-picker-stop-remove");if(Y)if(this.#q.stops.length<=2)Y.setAttribute("disabled","");else Y.removeAttribute("disabled")});return}this.#D0(J)}#D0(J){let Q=J.querySelector("fig-reorder");if(!Q)return;Q.innerHTML=this.#q.stops.map((Z,$)=>`
|
|
537
|
+
<fig-field class="fig-fill-picker-gradient-stop-row" data-index="${$}">
|
|
538
|
+
<fig-input-number class="fig-fill-picker-stop-position" aria-label="Gradient stop position" min="0" max="100" value="${Z.position}" units="%"></fig-input-number>
|
|
539
|
+
<fig-input-color class="fig-fill-picker-stop-color" aria-label="Gradient stop color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${this.#s(Z)}"></fig-input-color>
|
|
540
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#q.stops.length<=2?"disabled":""} aria-label="Remove gradient stop">
|
|
541
|
+
<fig-icon name="minus"></fig-icon>
|
|
542
|
+
</fig-button>
|
|
543
|
+
</fig-field>
|
|
544
|
+
`).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((Z)=>{Z.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#F0(Z),this.#Q0(),this.#G0(),this.#i()});let $=Z.querySelector(".fig-fill-picker-stop-color"),j=$.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#Z;else requestAnimationFrame(()=>{let q=$.querySelector("fig-fill-picker");if(q)q.anchorElement=this.#Z});let _=()=>{this.#F0(Z),this.#F=!0;try{this.#Q0(),this.#G0(),this.#i()}finally{this.#F=!1}};$.addEventListener("input",_),$.addEventListener("change",_),Z.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let q=parseInt(Z.dataset.index,10);if(this.#q.stops.length>2)this.#q.stops.splice(q,1),this.#N0(),this.#i()})})}#U0(J,Q=!0){let Z=i({...this.#q,interpolationSpace:J??this.#q.interpolationSpace}),$=this.#X==="display-p3",j=Z.stops.map((X)=>{let Y=(X.opacity??100)/100;return`${$?this.#h0(X.color,Y):this.#x0(X.color,Y)} ${X.position}%`}).join(", "),_=w5(Z),q=Q&&_?` ${_}`:"";switch(Z.type){case"linear":return`linear-gradient(${Z.angle}deg${q}, ${j})`;case"radial":return`radial-gradient(circle at ${Z.centerX}% ${Z.centerY}%${q}, ${j})`;case"angular":return`conic-gradient(from ${Z.angle}deg${q}, ${j})`;default:return`linear-gradient(${Z.angle}deg${q}, ${j})`}}static#M0=new Map;#O0(J){let Q=O0.#M0.get(J);if(Q!==void 0)return Q;let Z=document.createElement("div");Z.style.background=J;let $=!!Z.style.background;return O0.#M0.set(J,$),$}#Y0(){let J=this.#U0(void 0,!0);if(this.#O0(J))return J;let Q=this.#U0("oklab",!0);if(this.#O0(Q))return Q;return this.#U0("oklab",!1)}#W0(){let J=this.#Z.querySelector('[data-tab="image"]');J.innerHTML=`
|
|
545
|
+
<fig-field class="fig-fill-picker-media-header">
|
|
546
|
+
<fig-select class="fig-fill-picker-scale-mode" label="Image scale mode" value="${g(this.#K.scaleMode)}">
|
|
547
|
+
<fig-select-options>
|
|
548
|
+
<fig-select-option value="fill">Fill</fig-select-option>
|
|
549
|
+
<fig-select-option value="fit">Fit</fig-select-option>
|
|
550
|
+
<fig-select-option value="crop">Crop</fig-select-option>
|
|
551
|
+
<fig-select-option value="tile">Tile</fig-select-option>
|
|
552
|
+
</fig-select-options>
|
|
553
|
+
</fig-select>
|
|
554
|
+
<fig-input-number class="fig-fill-picker-scale" aria-label="Image tile scale" min="1" max="200" value="${this.#K.scale}" units="%" ${this.#K.scaleMode==="tile"?"":'style="display: none;"'}></fig-input-number>
|
|
555
|
+
<fig-button class="fig-fill-picker-media-rotate" icon variant="ghost" aria-label="Rotate">
|
|
556
|
+
<fig-icon name="rotate"></fig-icon>
|
|
557
|
+
</fig-button>
|
|
558
|
+
</fig-field>
|
|
559
|
+
<fig-image class="fig-fill-picker-media-preview fig-fill-picker-image-preview" upload="true" label="Upload from computer" alt="Image fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true"></fig-image>
|
|
560
|
+
`,this.#L0(J)}#L0(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-scale"),$=J.querySelector(".fig-fill-picker-image-preview");Q.addEventListener("change",(j)=>{let _=typeof j.detail==="string"?j.detail:j.target?.value;if(!_)return;this.#K.scaleMode=_,Z.style.display=_==="tile"?"block":"none",this.#r($),this.#V(),this.#i()}),Z.addEventListener("input",(j)=>{this.#K.scale=parseFloat(j.target.value)||100,this.#r($),this.#V(),this.#i()}),$.addEventListener("loaded",(j)=>{let _=j.detail?.src||$.src;if(!_)return;this.#K.url=_,this.#r($),this.#V(),this.#i()}),$.addEventListener("change",()=>{if($.src)return;this.#K.url=null,this.#r($),this.#V(),this.#i()}),this.#r($)}#r(J){if(!this.#K.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#K.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#K.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#K.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#K.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#T0(J){if(J.tagName==="FIG-MEDIA"){if(!this.#G.url){J.removeAttribute("src"),J.classList.remove("has-media");return}J.setAttribute("src",this.#G.url),J.classList.add("has-media");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#G.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#G.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#E0(){let J=this.#Z.querySelector('[data-tab="video"]');J.innerHTML=`
|
|
561
|
+
<fig-field class="fig-fill-picker-media-header">
|
|
562
|
+
<fig-select class="fig-fill-picker-scale-mode" label="Video scale mode" value="${g(this.#G.scaleMode)}">
|
|
563
|
+
<fig-select-options>
|
|
564
|
+
<fig-select-option value="fill">Fill</fig-select-option>
|
|
565
|
+
<fig-select-option value="fit">Fit</fig-select-option>
|
|
566
|
+
<fig-select-option value="crop">Crop</fig-select-option>
|
|
567
|
+
</fig-select-options>
|
|
568
|
+
</fig-select>
|
|
569
|
+
<fig-button class="fig-fill-picker-media-rotate" icon variant="ghost" aria-label="Rotate">
|
|
570
|
+
<fig-icon name="rotate"></fig-icon>
|
|
571
|
+
</fig-button>
|
|
572
|
+
</fig-field>
|
|
573
|
+
<fig-media class="fig-fill-picker-media-preview fig-fill-picker-video-preview" type="video" upload="true" label="Upload from computer" aria-label="Video fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" controls muted="true" loop="true"></fig-media>
|
|
574
|
+
`,this.#k0(J)}#k0(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-video-preview");Q.addEventListener("change",($)=>{let j=typeof $.detail==="string"?$.detail:$.target?.value;if(!j)return;this.#G.scaleMode=j,this.#T0(Z),this.#V(),this.#i()}),Z.addEventListener("loaded",($)=>{let j=$.detail?.src||Z.src;if(!j)return;this.#G.url=j,this.#T0(Z),Z.play?.(),this.#V(),this.#i()}),Z.addEventListener("change",()=>{if(Z.src)return;this.#G.url=null,this.#T0(Z),this.#V(),this.#i()}),this.#T0(Z)}#S0(){let J=this.#Z.querySelector('[data-tab="webcam"]');J.innerHTML=`
|
|
575
|
+
<fig-field class="fig-fill-picker-webcam-camera" style="display: none;">
|
|
576
|
+
<fig-select class="fig-fill-picker-camera-select" label="Camera" full>
|
|
577
|
+
<fig-select-options></fig-select-options>
|
|
578
|
+
</fig-select>
|
|
579
|
+
</fig-field>
|
|
580
|
+
<fig-video class="fig-fill-picker-webcam-preview" aria-label="Webcam preview" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" muted="true">
|
|
581
|
+
<video class="fig-fill-picker-webcam-video" autoplay muted playsinline></video>
|
|
582
|
+
<div class="fig-fill-picker-webcam-status">
|
|
583
|
+
<span>Camera access required</span>
|
|
584
|
+
</div>
|
|
585
|
+
</fig-video>
|
|
586
|
+
<div class="fig-fill-picker-webcam-controls">
|
|
587
|
+
<fig-button class="fig-fill-picker-webcam-capture" variant="secondary" full>
|
|
588
|
+
Capture
|
|
589
|
+
</fig-button>
|
|
590
|
+
</div>
|
|
591
|
+
`,this.#y0(J)}#y0(J){let Q=J.querySelector(".fig-fill-picker-webcam-video"),Z=J.querySelector(".fig-fill-picker-webcam-status"),$=J.querySelector(".fig-fill-picker-webcam-capture"),j=J.querySelector(".fig-fill-picker-webcam-camera"),_=J.querySelector(".fig-fill-picker-camera-select"),q=async(X=null)=>{this.#y();let Y=this.#C;try{let K={video:X?{deviceId:{exact:X}}:!0},N=await navigator.mediaDevices.getUserMedia(K);if(Y!==this.#C||!this.isConnected||this.#$!=="webcam"){N.getTracks().forEach((W)=>W.stop());return}this.#N.stream=N,Q.srcObject=N,Q.style.display="block",Z.style.display="none";let G=await navigator.mediaDevices.enumerateDevices();if(Y!==this.#C)return;let U=G.filter((W)=>W.kind==="videoinput");if(U.length>1){j.style.display="";let W=_.querySelector(":scope > fig-select-options");if(!W)W=document.createElement("fig-select-options"),_.append(W);if(W.replaceChildren(),U.forEach((B,L)=>{let H=document.createElement("fig-select-option");H.value=B.deviceId;let F=B.label||(U.length>1?`Camera ${L+1}`:"Camera");H.textContent=F.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(z,O)=>{return` ${/^\d+$/.test(O)?Number.parseInt(O,10).toString():O.replace(/^0+/,"")||"0"}`}),W.append(H)}),X)_.value=X}else j.style.display="none",_.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(K){if(Y!==this.#C)return;console.error("Webcam error:",K.name,K.message);let N="Camera access denied";if(K.name==="NotAllowedError")N="Camera permission denied";else if(K.name==="NotFoundError")N="No camera found";else if(K.name==="NotReadableError")N="Camera in use by another app";else if(K.name==="OverconstrainedError")N="Camera constraints not supported";else if(!window.isSecureContext)N="Camera requires secure context";Z.replaceChildren();let G=document.createElement("span");G.textContent=N,Z.appendChild(G),Z.style.display="flex",Q.style.display="none"}};this.#D=q,_.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(Y)q(Y)}),$.addEventListener("click",async()=>{if(!this.#N.stream)return;if(!Q.videoWidth||!Q.videoHeight)return;let X=document.createElement("canvas");X.width=Q.videoWidth,X.height=Q.videoHeight,X.getContext("2d").drawImage(Q,0,0,X.width,X.height);let Y=await new Promise((N)=>X.toBlob(N,"image/png"));if(!Y)return;if(this.#N.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#N.snapshot);this.#N.snapshot=URL.createObjectURL(Y),this.#K.url=this.#N.snapshot;let K=this.#Z.querySelector(".fig-fill-picker-image-preview");if(K)this.#r(K);this.#v("image")})}#f0(J){let Q=J.h/360,Z=J.s/100,$=J.v/100,j,_,q,X=Math.floor(Q*6),Y=Q*6-X,K=$*(1-Z),N=$*(1-Y*Z),G=$*(1-(1-Y)*Z);switch(X%6){case 0:j=$,_=G,q=K;break;case 1:j=N,_=$,q=K;break;case 2:j=K,_=$,q=G;break;case 3:j=K,_=N,q=$;break;case 4:j=G,_=K,q=$;break;case 5:j=$,_=K,q=N;break}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(q*255)}}#P0(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,j=Math.max(Q,Z,$),_=Math.min(Q,Z,$),q=j-_,X=0,Y=j===0?0:q/j,K=j;if(j!==_){switch(j){case Q:X=(Z-$)/q+(Z<$?6:0);break;case Z:X=($-Q)/q+2;break;case $:X=(Q-Z)/q+4;break}X/=6}return{h:X*360,s:Y*100,v:K*100,a:1}}#A0(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Q=this.#f0(J),Z=($)=>{return(isNaN($)?217:Math.max(0,Math.min(255,Math.round($)))).toString(16).padStart(2,"0")};return`#${Z(Q.r)}${Z(Q.g)}${Z(Q.b)}`}#C0(J){let Q=parseInt(J.slice(1,3),16),Z=parseInt(J.slice(3,5),16),$=parseInt(J.slice(5,7),16);return this.#P0({r:Q,g:Z,b:$})}#x0(J,Q=1){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),j=parseInt(J.slice(5,7),16);return`rgba(${Z}, ${$}, ${j}, ${Q})`}#w0(J){let Q=Math.max(0,Math.min(1,Number(J)||0)),Z=Math.round(Q*1000)/1000;return String(Z)}#b0(J=this.#_){let Q=this.#f0(J);return`rgba(${Q.r}, ${Q.g}, ${Q.b}, ${this.#w0(J.a)})`}#g0(J){let Q=String(J??"").trim();if(!Q)return null;let Z=Q.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(Z){let j=Z[1];if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];let _=1;if(j.length===8)_=parseInt(j.slice(6,8),16)/255,j=j.slice(0,6);return{...this.#C0(`#${j}`),a:_}}let $=Q.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if($){let j=Math.max(0,Math.min(255,Math.round(parseFloat($[1])))),_=Math.max(0,Math.min(255,Math.round(parseFloat($[2])))),q=Math.max(0,Math.min(255,Math.round(parseFloat($[3])))),X=$[4]!==void 0?Math.max(0,Math.min(1,parseFloat($[4]))):1;if(![j,_,q,X].every(Number.isFinite))return null;return{...this.#P0({r:j,g:_,b:q}),a:X}}return null}#h0(J,Q=1){let Z=+(parseInt(J.slice(1,3),16)/255).toFixed(4),$=+(parseInt(J.slice(3,5),16)/255).toFixed(4),j=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${Z} ${$} ${j} / ${Q})`}#v0(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,j=Math.max(Q,Z,$),_=Math.min(Q,Z,$),q,X,Y=(j+_)/2;if(j===_)q=X=0;else{let K=j-_;switch(X=Y>0.5?K/(2-j-_):K/(j+_),j){case Q:q=((Z-$)/K+(Z<$?6:0))/6;break;case Z:q=(($-Q)/K+2)/6;break;case $:q=((Q-Z)/K+4)/6;break}}return{h:q*360,s:X*100,l:Y*100}}#m0(J){let Q=J.h/360,Z=J.s/100,$=J.l/100,j,_,q;if(Z===0)j=_=q=$;else{let X=(N,G,U)=>{if(U<0)U+=1;if(U>1)U-=1;if(U<0.16666666666666666)return N+(G-N)*6*U;if(U<0.5)return G;if(U<0.6666666666666666)return N+(G-N)*(0.6666666666666666-U)*6;return N},Y=$<0.5?$*(1+Z):$+Z-$*Z,K=2*$-Y;j=X(K,Y,Q+0.3333333333333333),_=X(K,Y,Q),q=X(K,Y,Q-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(q*255)}}#I0(J){let Q=(G)=>{return G=G/255,G<=0.04045?G/12.92:Math.pow((G+0.055)/1.055,2.4)},Z=Q(J.r),$=Q(J.g),j=Q(J.b),_=0.4122214708*Z+0.5363325363*$+0.0514459929*j,q=0.2119034982*Z+0.6806995451*$+0.1073969566*j,X=0.0883024619*Z+0.2817188376*$+0.6299787005*j,Y=Math.cbrt(_),K=Math.cbrt(q),N=Math.cbrt(X);return{l:0.2104542553*Y+0.793617785*K-0.0040720468*N,a:1.9779984951*Y-2.428592205*K+0.4505937099*N,b:0.0259040371*Y+0.7827717662*K-0.808675766*N}}#u0(J){let Q=this.#I0(J);return{l:Q.l,c:Math.sqrt(Q.a*Q.a+Q.b*Q.b),h:(Math.atan2(Q.b,Q.a)*180/Math.PI+360)%360}}#V0(J){let Q=J.l+0.3963377774*J.a+0.2158037573*J.b,Z=J.l-0.1055613458*J.a-0.0638541728*J.b,$=J.l-0.0894841775*J.a-1.291485548*J.b,j=Q*Q*Q,_=Z*Z*Z,q=$*$*$,X=(Y)=>{let K=Y<=0.0031308?12.92*Y:1.055*Math.pow(Y,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,K))*255)};return{r:X(4.0767416621*j-3.3077115913*_+0.2309699292*q),g:X(-1.2684380046*j+2.6097574011*_-0.3413193965*q),b:X(-0.0041960863*j-0.7034186147*_+1.707614701*q)}}#c0(J){let Q=J.h*Math.PI/180;return this.#V0({l:J.l,a:J.c*Math.cos(Q),b:J.c*Math.sin(Q)})}#i(){this.#V(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#H0(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#j,colorSpace:this.#X};switch(this.#j){case"solid":return{...J,color:this.#A0(this.#_),alpha:this.#_.a,hsv:{...this.#_}};case"gradient":return{...J,gradient:M0(this.#q),css:this.#Y0()};case"image":return{...J,image:{...this.#K}};case"video":return{...J,video:{...this.#G}};case"webcam":return{...J,image:{url:this.#N.snapshot,scaleMode:"fill",scale:50}};default:return{...J,...this.#L[this.#j]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":if(this.#x(),this.#V(),this.#Z){if(!this.#z){if(this.#u(),this.#t(),this.#B)this.#B.setAttribute("value",this.#_.h);if(this.#O)this.#O.setAttribute("value",this.#_.a*100),this.#O.setAttribute("color",this.#A0(this.#_))}}break;case"disabled":this.#k();break;case"alpha":case"mode":case"experimental":{if(!this.#Z)break;let $=this.#Z.open;if(this.#b(),$&&this.isConnected)this.#h();break}case"aria-label":case"aria-labelledby":case"aria-describedby":this.#k();break}}}customElements.define("fig-fill-picker",O0);var b5="figui-root",g5="data-figui-overlay-root";function Y0(J,Q="system"){if(!J)return;let Z=Q==="light"||Q==="dark"||Q==="system"?Q:"system";if(J.setAttribute("theme",Z),J.classList.add("figui-root"),J.classList.toggle("figma-light",Z==="light"),J.classList.toggle("figma-dark",Z==="dark"),Z==="system")J.style.setProperty("color-scheme","light dark");else J.style.setProperty("color-scheme",Z)}function J0(J){if(typeof document>"u"||!document.body)return null;let Q="data-figui-overlay-root",Z=document.body.querySelector(`:scope > [${Q}]`);if(!Z)Z=document.createElement("div"),Z.setAttribute(Q,""),document.body.append(Z);let $=J?.closest?.(".figui-root")??document.querySelector(".figui-root");if(!$)return Z;let j=$.getAttribute("theme"),_=j==="light"||j==="dark"||j==="system"?j:$.classList.contains("figma-dark")?"dark":$.classList.contains("figma-light")?"light":"system";if(Y0(Z,_),Z.classList.remove("figui-root"),Z.setAttribute(Q,""),_==="light")Z.classList.add("figma-light");if(_==="dark")Z.classList.add("figma-dark");return Z}function x0(J){return J!==null&&typeof J==="object"&&!Array.isArray(J)&&Object.getPrototypeOf(J)===Object.prototype}function h5(J){return typeof J==="string"&&/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(J)}function b0(J,Q){let Z=J.replace(/([A-Z])/g," $1").replace(/[_-]+/g," ").replace(/^\w/,($)=>$.toUpperCase()).trim();if(Array.isArray(Q)&&Q.length>=3&&Q.every(($)=>typeof $==="number")){let[$,j,_,q]=Q;return{kind:"slider",key:J,label:Z,default:$,min:j,max:_,step:q??(_-j<=1?0.01:1)}}if(x0(Q)&&typeof Q.type==="string"){let $=Q.type;if($==="select")return{kind:"select",key:J,label:Z,options:Q.options??[],default:Q.default??Q.options?.[0]?.value??Q.options?.[0]??""};if($==="color")return{kind:"color",key:J,label:Z,default:Q.default??"#000000"};if($==="text")return{kind:"text",key:J,label:Z,default:Q.default??"",placeholder:Q.placeholder};if($==="easing"||$==="spring")return{kind:"easing",key:J,label:Z,default:Q.value??Q.ease??Q.default??[0.4,0,0.2,1],spring:$==="spring"?Q:void 0};if($==="action")return{kind:"action",key:J,label:Z}}if(x0(Q)){let{_collapsed:$,...j}=Q;return{kind:"folder",key:J,label:Z,collapsed:Boolean($),children:Object.entries(j).map(([_,q])=>b0(_,q))}}if(typeof Q==="boolean")return{kind:"switch",key:J,label:Z,default:Q};if(typeof Q==="number"){let $=Math.abs(Q)||1,j=$<=1?1:$*2,_=$<=1?0:0;return{kind:"slider",key:J,label:Z,default:Q,min:_,max:j,step:$<=1?0.01:1}}if(h5(Q))return{kind:"color",key:J,label:Z,default:Q};if(typeof Q==="string")return{kind:"text",key:J,label:Z,default:Q};return{kind:"text",key:J,label:Z,default:String(Q??"")}}function X5(J){return Object.entries(J??{}).map(([Q,Z])=>b0(Q,Z))}function _5(J){if(J&&typeof J==="object")return String(J.value??"");return String(J??"")}function V0(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}function l(J,Q){return Q.split(".").reduce((Z,$)=>Z==null?void 0:Z[$],J)}function q5(J,Q,Z){let $=Q.split("."),j=J;for(let _=0;_<$.length-1;_++){let q=$[_];if(!x0(j[q]))j[q]={};j=j[q]}j[$[$.length-1]]=Z}function Y5(J,Q={}){for(let Z of J)if(Z.kind==="folder")Q[Z.key]={},Y5(Z.children,Q[Z.key]);else if(Z.kind!=="action")Q[Z.key]=Z.default;return Q}function y0(J){return structuredClone(J)}function w0(J,Q,Z,$){if(J.kind==="folder"){let _=document.createElement("propskit-group");if(_.setAttribute("name",J.label),!J.collapsed)_.setAttribute("open","true");else _.setAttribute("open","false");for(let q of J.children)_.append(w0(q,Q?`${Q}.${q.key}`:q.key,Z,$));return _}if(J.kind==="action"){let _=document.createElement("fig-button");return _.textContent=J.label,_.addEventListener("click",()=>$("action",Q||J.key)),_}if(J.kind==="slider"){let _=document.createElement("propskit-slider");_.setAttribute("label",J.label),_.setAttribute("min",String(J.min)),_.setAttribute("max",String(J.max)),_.setAttribute("step",String(J.step)),_.setAttribute("value",String(l(Z,Q)??J.default)),_.setAttribute("full","");let q=(X)=>{let Y=X instanceof CustomEvent&&X.detail!==void 0?X.detail:_.value,K=typeof Y==="number"?Y:Number(Y);$("change",Q,Number.isFinite(K)?K:Y)};return _.addEventListener("input",q),_.addEventListener("change",q),_}if(J.kind==="switch"){let _=document.createElement("propskit-switch");if(_.setAttribute("label",J.label),l(Z,Q)??J.default)_.setAttribute("checked","");let q=(X)=>{let Y=X instanceof CustomEvent&&X.detail!==void 0?X.detail:null,K=Y&&typeof Y==="object"&&"checked"in Y?Boolean(Y.checked):_.hasAttribute("checked");$("change",Q,K)};return _.addEventListener("input",q),_.addEventListener("change",q),_}if(J.kind==="color"){let _=document.createElement("propskit-color");_.setAttribute("label",J.label),_.setAttribute("value",String(l(Z,Q)??J.default));let q=(X)=>{let Y=X instanceof CustomEvent&&X.detail!==void 0?X.detail:_.value;$("change",Q,Y)};return _.addEventListener("input",q),_.addEventListener("change",q),_}if(J.kind==="text"){let _=document.createElement("propskit-text");if(_.setAttribute("label",J.label),_.setAttribute("value",String(l(Z,Q)??J.default??"")),J.placeholder)_.setAttribute("placeholder",J.placeholder);let q=(X)=>{let Y=X instanceof CustomEvent&&X.detail!==void 0?X.detail:_.value;$("change",Q,Y)};return _.addEventListener("input",q),_.addEventListener("change",q),_}if(J.kind==="select"){let _=document.createElement("propskit-select");_.setAttribute("label",J.label);let q=(J.options??[]).map((K)=>V0(K)).join(",");_.setAttribute("options",q);let X=l(Z,Q)??J.default;_.setAttribute("value",String(X??""));let Y=(K)=>{let N=K instanceof CustomEvent&&K.detail!==void 0?K.detail:_.value,G=typeof N==="object"&&N&&"value"in N?N.value:N,U=(J.options??[]).find((W)=>V0(W)===String(G)||_5(W)===String(G));$("change",Q,U?_5(U)||V0(U):G)};return _.addEventListener("input",Y),_.addEventListener("change",Y),_}if(J.kind==="easing"){let _=document.createElement("fig-field");_.setAttribute("direction","horizontal");let q=document.createElement("label");q.textContent=J.label;let X=document.createElement("fig-easing-curve"),Y=l(Z,Q)??J.default;if(Array.isArray(Y))X.setAttribute("value",Y.join(","));_.append(q,X);let K=(N)=>{let G=N instanceof CustomEvent&&N.detail!==void 0?N.detail:null;$("change",Q,G&&typeof G==="object"&&"value"in G?G.value:G)};return X.addEventListener("input",K),X.addEventListener("change",K),_}let j=document.createElement("propskit-text");return j.setAttribute("label",J.label),j.setAttribute("value",String(l(Z,Q)??"")),j}function v5(J,Q,Z,$={}){if(!J||!(J instanceof Element)&&!(J instanceof DocumentFragment))throw Error("createPropsKit requires a mount element");let j=J instanceof DocumentFragment?(()=>{let W=document.createElement("div");return J.append(W),W})():J,_=$.theme??"system";if($.scoped!==!1)Y0(j,_);else Y0(j,_);let X=X5(Z),Y=Y5(X),K=new Set,N=document.createElement("propskit-group");if(Q)N.setAttribute("name",Q),N.setAttribute("open","true");let G=(W,B,L)=>{if(W==="action"){$.onAction?.(B);return}q5(Y,B,L);let H=y0(Y);$.onChange?.(B,L,H);for(let F of K)F(H);j.dispatchEvent(new CustomEvent("change",{detail:{path:B,value:L,values:H},bubbles:!0,composed:!0}))};for(let W of X)N.append(w0(W,W.key,Y,G));j.replaceChildren(N),J0(j);let U=new MutationObserver(()=>J0(j));return U.observe(j,{attributes:!0,attributeFilter:["theme","class"]}),{get values(){return y0(Y)},get(W){return l(Y,W)},set(W,B){q5(Y,W,B);let L=y0(Y);$.onChange?.(W,B,L);for(let F of K)F(L);j.replaceChildren();let H=document.createElement("propskit-group");if(Q)H.setAttribute("name",Q),H.setAttribute("open","true");for(let F of X)H.append(w0(F,F.key,Y,G));j.append(H)},subscribe(W){return K.add(W),()=>K.delete(W)},destroy(){U.disconnect(),K.clear(),j.replaceChildren()}}}class K5 extends HTMLElement{static get observedAttributes(){return["theme"]}connectedCallback(){this.#Q()}attributeChangedCallback(){this.#Q()}#Q(){let J=this.getAttribute("theme")||"system";Y0(this,J),J0(this)}}if(typeof customElements<"u"&&!customElements.get("fig-panel"))customElements.define("fig-panel",K5);if(typeof document<"u")document.addEventListener("pointerdown",(J)=>{let Q=J.target;if(!(Q instanceof Element))return;if(Q.closest(".figui-root"))J0(Q)},!0),document.addEventListener("focusin",(J)=>{let Q=J.target;if(!(Q instanceof Element))return;if(Q.closest(".figui-root"))J0(Q)},!0);export{J0 as syncOverlayTheme,X5 as parseConfig,b0 as inferControl,v5 as createPropsKit,Y0 as applyFiguiTheme,b5 as PROPSKIT_SCOPE_ROOT_CLASS,g5 as PROPSKIT_OVERLAY_ROOT_ATTR};
|