@rogieking/figui3/dist/fig.min.js

A lightweight web components library for building Figma plugin and widget UIs with native look and feel

var T0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var f0={};var l=T0(()=>{/*! Vendored from @ungap/custom-elements-builtin@0.6.5 (ISC). */(function(Q,$,J){if(Q.importNode.length!=1||$.get("ungap-li"))return;var Z="extends";try{var _={};_[Z]="li";var j=HTMLLIElement,q=function(){return Reflect.construct(j,[],q)};if(q.prototype=J.create(j.prototype),$.define("ungap-li",q,_),!/is="ungap-li"/.test(new q().outerHTML))throw _}catch(K){(function(){var X="attributeChangedCallback",W="connectedCallback",L="disconnectedCallback",U=Element.prototype,G=J.assign,O=J.create,B=J.defineProperties,D=J.getOwnPropertyDescriptor,F=J.setPrototypeOf,P=$.define,E=$.get,M=$.upgrade,S=$.whenDefined,C=O(null),y=new WeakMap,T={childList:!0,subtree:!0};Reflect.ownKeys(self).filter(function(Y){return typeof Y=="string"&&/^HTML(?!Element)/.test(Y)}).forEach(function(Y){function N(){}var A=self[Y];F(N,A),(N.prototype=A.prototype).constructor=N,A={},A[Y]={value:N},B(self,A)}),new MutationObserver(u).observe(Q,T),o(Document.prototype,"importNode"),o(Node.prototype,"cloneNode"),B($,{define:{value:function(Y,N,A){if(Y=Y.toLowerCase(),A&&Z in A){C[Y]=G({},A,{Class:N});var k=A[Z]+'[is="'+Y+'"]',R=Q.querySelectorAll(k);for(var z=0,H=R.length;z<H;z++)w(R[z])}else P.apply($,arguments)}},get:{value:function(Y){return Y in C?C[Y].Class:E.call($,Y)}},upgrade:{value:function(Y){var N=g(Y);if(N&&!(Y instanceof N.Class))i(Y,N);else M.call($,Y)}},whenDefined:{value:function(Y){return Y in C?Promise.resolve():S.call($,Y)}}});var I=Q.createElement;B(Q,{createElement:{value:function(Y,N){var A=I.call(Q,Y);if(N&&"is"in N)A.setAttribute("is",N.is),$.upgrade(A);return A}}});var S0=D(U,"attachShadow").value,d=D(U,"innerHTML");B(U,{attachShadow:{value:function(){var Y=S0.apply(this,arguments);return new MutationObserver(u).observe(Y,T),Y}},innerHTML:{get:d.get,set:function(Y){if(d.set.call(this,Y),/\bis=("|')?[a-z0-9_-]+\1/i.test(Y))b(this,w)}}});function u(Y){for(var N=0,A=Y.length;N<A;N++){var k=Y[N],R=k.addedNodes,z=k.removedNodes;for(var H=0,v=R.length;H<v;H++)w(R[H]);for(var m=0,C0=z.length;m<C0;m++)r(z[m])}}function s(Y){for(var N=0,A=Y.length;N<A;N++){var k=Y[N],R=k.attributeName,z=k.oldValue,H=k.target,v=H.getAttribute(R);if(X in H&&!(z==v&&v==null))H[X](R,z,H.getAttribute(R),null)}}function r(Y){if(Y.nodeType!==1)return;var N=g(Y);if(N&&Y instanceof N.Class&&L in Y&&y.get(Y)!==L)y.set(Y,L),Promise.resolve(Y).then(P0);b(Y,r)}function g(Y){var N=Y.getAttribute("is");if(N){if(N=N.toLowerCase(),N in C)return C[N]}return null}function H0(Y){Y[W]()}function P0(Y){Y[L]()}function i(Y,N){var A=N.Class,k=A.observedAttributes||[];if(F(Y,A.prototype),k.length){new MutationObserver(s).observe(Y,{attributes:!0,attributeFilter:k,attributeOldValue:!0});var R=[];for(var z=0,H=k.length;z<H;z++)R.push({attributeName:k[z],oldValue:null,target:Y});s(R)}}function w(Y){if(Y.nodeType!==1)return;var N=g(Y);if(N){if(!(Y instanceof N.Class))i(Y,N);if(W in Y&&Y.isConnected&&y.get(Y)!==W)y.set(Y,W),Promise.resolve(Y).then(H0)}b(Y,w)}function b(Y,N){for(var A=Y.content,k=(A&&A.nodeType==11?A:Y).querySelectorAll("[is]"),R=0,z=k.length;R<z;R++)N(k[R])}function o(Y,N){var A=Y[N],k={};k[N]={value:function(){var R=A.apply(this,arguments);switch(R.nodeType){case 1:case 11:b(R,w)}return R}},B(Y,k)}})()}})(document,customElements,Object)});function I0(){if(typeof navigator==="undefined")return!1;const Q=navigator.userAgent||"",$=/\b(iPad|iPhone|iPod)\b/.test(Q)||/\bMacintosh\b/.test(Q)&&/\bMobile\b/.test(Q),J=/\bAppleWebKit\b/.test(Q)&&!/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser)\b/.test(Q);return $||J}function y0(){if(typeof window==="undefined"||!window.customElements||typeof HTMLButtonElement==="undefined")return!1;const Q=`fig-builtin-probe-${Math.random().toString(36).slice(2)}`;class $ extends HTMLButtonElement{}try{return customElements.define(Q,$,{extends:"button"}),document.createElement("button",{is:Q})instanceof $}catch(J){return!1}}function c(Q,$,J){const Z=()=>{if(!customElements.get(Q))customElements.define(Q,$,J)};if(!t){Z();return}x0.then(Z).catch((_)=>{console.error(`[figui3] Failed to load customized built-in polyfill for "${Q}".`,_)})}function V(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function n(){let Q=1000;const $=document.querySelectorAll("*");for(let J of $){const Z=parseInt(getComputedStyle(J).zIndex,10);if(!isNaN(Z)&&Z>Q)Q=Z}return Q}var t=I0()&&!y0(),x0=(t?Promise.resolve().then(() => (l(),f0)):Promise.resolve()).then(()=>{}).catch((Q)=>{throw Q});class a extends HTMLElement{type;#Q;constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
            <style>
                button, button:hover, button:active {
                    padding: 0 var(--spacer-2);
                    appearance: none;
                    display: flex;
                    border: 0;
                    flex: 1;
                    text-align: center;
                    align-items: stretch;
                    justify-content: center;
                    font: inherit;
                    color: inherit;
                    outline: 0;
                    place-items: center; 
                    background: transparent;
                    margin: calc(var(--spacer-2)*-1);
                    height: var(--spacer-4);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 100%;
                    min-width: 0;
                }
                :host([size="large"]) button {
                    height: var(--spacer-5);
                }
                :host([size="large"][icon]) button {
                    padding: 0;
                }
            </style>
            <button type="${this.type}">
                <slot></slot>
            </button>
            `,this.#Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#$.bind(this)),this.button.addEventListener("focus",()=>{if(this.button.matches(":focus-visible"))this.setAttribute("data-focus-visible","")}),this.button.addEventListener("blur",()=>{this.removeAttribute("data-focus-visible")})})}get type(){return this.getAttribute("type")||"button"}set type(Q){this.setAttribute("type",Q)}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q)}#$(){if(this.type==="toggle")this.toggleAttribute("selected",!this.hasAttribute("selected"));if(this.type==="submit"){let Q=this.closest("form");if(Q)Q.submit()}if(this.type==="link"){const Q=this.getAttribute("href"),$=this.getAttribute("target");if(Q)if($)window.open(Q,$);else window.location.href=Q}}static get observedAttributes(){return["disabled","selected"]}attributeChangedCallback(Q,$,J){if(this.button)switch(this.button[Q]=J,Q){case"disabled":this.disabled=this.button.disabled=J!==null&&J!=="false";break;case"type":this.type=J,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#Q=J==="true";break}}}customElements.define("fig-button",a);class e extends HTMLElement{#Q="Menu";#$=null;#J;#_;#q=!1;#Z=null;get label(){return this.#Q}set label(Q){this.#Q=Q}constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"}),this.#J=this.#X.bind(this),this.#_=this.#O.bind(this)}#j(){if(typeof CSS==="undefined"||typeof CSS.supports!=="function")return!1;try{return CSS.supports("appearance: base-select")&&CSS.supports("selector(::picker(select))")}catch{return!1}}#K(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#j()){this.#q=!1;return}const J=document.createElement("button");J.setAttribute("type","button"),J.setAttribute("aria-hidden","true");const Z=document.createElement("selectedcontent");J.appendChild(Z),this.select.appendChild(J),this.#q=!0,this.#Z=Z}#W(){if(!this.#Z)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#Z.textContent="";return}this.#Z.innerHTML=Q.innerHTML}#G(){this.select.addEventListener("input",this.#J),this.select.addEventListener("change",this.#_)}#Y(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#B(){if(typeof this.select.showPicker==="function")requestAnimationFrame(()=>{try{this.select.showPicker()}catch{}})}connectedCallback(){this.type=this.getAttribute("type")||"select",this.#Q=this.getAttribute("label")||this.#Q,this.select.setAttribute("aria-label",this.#Q),this.appendChild(this.select),this.shadowRoot.appendChild(this.optionsSlot),this.optionsSlot.addEventListener("slotchange",this.slotChange.bind(this)),this.#G()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.#K(),this.type==="dropdown"){const Q=document.createElement("option");Q.setAttribute("hidden","true"),Q.setAttribute("selected","true"),Q.selected=!0,this.select.appendChild(Q)}if(this.optionsSlot.assignedNodes().forEach((Q)=>{if(Q.nodeName==="OPTION"||Q.nodeName==="OPTGROUP")this.select.appendChild(Q.cloneNode(!0))}),this.#N(this.value),this.#W(),this.type==="dropdown")this.select.selectedIndex=-1}#X(Q){const $=Q.target.selectedOptions?.[0];if(this.#Y($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const J=Q.target.value;if(this.type==="dropdown")this.#$=J;this.setAttribute("value",J),this.#W(),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0}))}#O(Q){const $=Q.target.selectedOptions?.[0];if(this.#Y($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const J=this.type==="dropdown"?this.#$:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#W(),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#$;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#$=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#N(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,J)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=J});this.#W()}attributeChangedCallback(Q,$,J){if(Q==="value")this.#N(J);if(Q==="type")this.type=J;if(Q==="experimental")this.slotChange();if(Q==="label")this.#Q=J,this.select.setAttribute("aria-label",this.#Q)}}customElements.define("fig-dropdown",e);class x extends HTMLElement{static#Q=0;static#$=500;#J;#_;#q;#Z=!1;#j=null;#K=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#J=this.#U.bind(this),this.#_=this.hidePopupOutsideClick.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#J,!0),this.#Y(),this.action==="click")document.body.removeEventListener("click",this.#_);if(clearTimeout(this.#q),this.action==="hover")this.removeEventListener("touchstart",this.#X),this.removeEventListener("touchmove",this.#O),this.removeEventListener("touchend",this.#N),this.removeEventListener("touchcancel",this.#L);else if(this.action==="click")this.removeEventListener("touchstart",this.showDelayedPopup)}setup(){this.style.display="contents"}render(){this.destroy();let Q=document.createElement("span");this.popup=document.createElement("span"),this.popup.setAttribute("class","fig-tooltip"),this.popup.setAttribute("role","tooltip");const $=V();if(this.popup.setAttribute("id",$),this.popup.style.position="fixed",this.popup.style.visibility="hidden",this.popup.style.display="inline-flex",this.popup.style.pointerEvents="none",this.popup.append(Q),Q.innerText=this.getAttribute("text"),this.firstElementChild)this.firstElementChild.setAttribute("aria-describedby",$);const J=this.closest("dialog");if(J&&J.open)J.append(this.popup);else document.body.append(this.popup);const Z=Q.childNodes[0];if(Z){const _=document.createRange();_.setStartBefore(Z),_.setEndAfter(Z);const j=_.getBoundingClientRect();Q.style.width=`${j.width}px`}}destroy(){if(this.#Y(),this.popup)this.popup.remove();if(this.action==="click")document.body.removeEventListener("click",this.#_)}isTouchDevice(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}setupEventListeners(){if(this.action==="hover"){if(!this.isTouchDevice())this.addEventListener("pointerenter",this.showDelayedPopup.bind(this)),this.addEventListener("pointerleave",this.#B.bind(this));this.addEventListener("touchstart",this.#X.bind(this),{passive:!0}),this.addEventListener("touchmove",this.#O.bind(this),{passive:!0}),this.addEventListener("touchend",this.#N.bind(this),{passive:!0}),this.addEventListener("touchcancel",this.#L.bind(this),{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.showDelayedPopup.bind(this)),document.body.addEventListener("click",this.#_),this.addEventListener("touchstart",this.showDelayedPopup.bind(this),{passive:!0});document.addEventListener("mousedown",this.#J,!0)}getOffset(){const Q={left:8,top:4,right:8,bottom:4},$=this.getAttribute("offset");if(!$)return Q;const[J,Z,_,j]=$.split(",").map(Number);return{left:isNaN(J)?Q.left:J,top:isNaN(Z)?Q.top:Z,right:isNaN(_)?Q.right:_,bottom:isNaN(j)?Q.bottom:j}}showDelayedPopup(){this.render(),clearTimeout(this.timeout);const $=Date.now()-x.#Q<x.#$?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){this.#W(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.display="block",this.popup.style.pointerEvents="all",this.popup.style.zIndex=n()+1,this.isOpen=!0,x.#Q=Date.now(),this.#G()}#W(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),J=this.getOffset();let Z=Q.top-$.height-J.top,_=Q.left+(Q.width-$.width)/2;if(this.popup.setAttribute("position","top"),Z<0)this.popup.setAttribute("position","bottom"),Z=Q.bottom+J.bottom;if(_<J.left)_=J.left;else if(_+$.width>window.innerWidth-J.right)_=window.innerWidth-$.width-J.right;const K=Q.left+Q.width/2-_;this.popup.style.setProperty("--beak-offset",`${K}px`),this.popup.style.top=`${Z}px`,this.popup.style.left=`${_}px`}hidePopup(){if(clearTimeout(this.timeout),clearTimeout(this.#q),this.#Y(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,x.#Q=Date.now()}#G(){this.#Y();const Q=this.firstElementChild;if(!Q)return;this.#j=new MutationObserver(()=>{if(this.#K)cancelAnimationFrame(this.#K);this.#K=requestAnimationFrame(()=>{this.#W()})}),this.#j.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#Y(){if(this.#K)cancelAnimationFrame(this.#K),this.#K=null;if(this.#j)this.#j.disconnect(),this.#j=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#B(Q){if(!this.#Z)this.hidePopup()}#X(Q){if(this.action==="hover")this.#Z=!0,clearTimeout(this.#q),this.showDelayedPopup()}#O(Q){if(this.action==="hover"&&this.#Z)clearTimeout(this.#q),this.#q=setTimeout(()=>{this.#Z=!1,this.hidePopup()},150)}#N(Q){if(this.action==="hover"&&this.#Z)clearTimeout(this.#q),this.#q=setTimeout(()=>{this.#Z=!1,this.hidePopup()},300)}#L(Q){if(this.action==="hover"&&this.#Z)this.#Z=!1,clearTimeout(this.#q),this.hidePopup()}static get observedAttributes(){return["action","delay","open"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")==="true"}set open(Q){this.setAttribute("open",Q)}attributeChangedCallback(Q,$,J){if(Q==="action")this.action=J;if(Q==="delay"){let Z=parseInt(J);this.delay=!isNaN(Z)?Z:500}if(Q==="open")if(J==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()})}#U(Q){if(!this.isOpen)return;const $=Q.target;if(this.popup&&this.popup.contains($))return;if($.tagName==="SELECT"||$.hasAttribute("popover")||$.closest("dialog"))this.hidePopup()}}customElements.define("fig-tooltip",x);class Q0 extends HTMLDialogElement{#Q=!1;#$=!1;#J={x:0,y:0};#_={x:0,y:0};#q;#Z;#j;#K=16;#W=!1;#G=3;constructor(){super();this.#q=this.#L.bind(this),this.#Z=this.#U.bind(this),this.#j=this.#D.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#Y(),this.#X(),this.#B()})}disconnectedCallback(){this.#O()}#Y(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.close),Q.addEventListener("click",this.close.bind(this))})}#B(){const Q=this.getAttribute("position")||"";this.style.position="fixed",this.style.transform="none",this.style.top="auto",this.style.bottom="auto",this.style.left="auto",this.style.right="auto",this.style.margin="0";const $=Q.includes("top"),J=Q.includes("bottom"),Z=Q.includes("left"),_=Q.includes("right"),j=Q.includes("center")&&!$&&!J,q=Q.includes("center")&&!Z&&!_;if($)this.style.top=`${this.#K}px`;else if(J)this.style.bottom=`${this.#K}px`;else if(j)this.style.top="0",this.style.bottom="0";if(Z)this.style.left=`${this.#K}px`;else if(_)this.style.right=`${this.#K}px`;else if(q)this.style.left="0",this.style.right="0";if(j&&q)this.style.margin="auto";else if(j)this.style.marginTop="auto",this.style.marginBottom="auto";else if(q)this.style.marginLeft="auto",this.style.marginRight="auto";this.#W=!0}#X(){if(this.drag){this.addEventListener("pointerdown",this.#q);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#O(){this.removeEventListener("pointerdown",this.#q),document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#j)}#N(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(j)=>$.some((q)=>j.matches?.(q))||j.tagName?.startsWith("FIG-")&&!J.includes(j.tagName);if(Z(Q))return!0;let _=Q.parentElement;while(_&&_!==this){if(Z(_))return!0;_=_.parentElement}return!1}#L(Q){if(!this.drag)return;if(this.#N(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this.#$=!0,this.#J.x=Q.clientX,this.#J.y=Q.clientY;const J=this.getBoundingClientRect();this.#_.x=Q.clientX-J.left,this.#_.y=Q.clientY-J.top,document.addEventListener("pointermove",this.#Z),document.addEventListener("pointerup",this.#j)}#U(Q){if(this.#$&&!this.#Q){const $=Math.abs(Q.clientX-this.#J.x),J=Math.abs(Q.clientY-this.#J.y);if($>this.#G||J>this.#G){this.#Q=!0,this.#$=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#Q)return;this.style.left=`${Q.clientX-this.#_.x}px`,this.style.top=`${Q.clientY-this.#_.y}px`,Q.preventDefault()}#D(Q){if(this.#Q)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#Q=!1,this.#$=!1,document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#j),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,J){if(Q==="drag")if(this.drag=J!==null&&J!=="false",this.drag)this.#X();else{this.#O();const Z=this.querySelector("fig-header, header");if(Z)Z.style.cursor=""}if(Q==="position"&&this.#W)this.#B()}}c("fig-dialog",Q0,{extends:"dialog"});class $0 extends HTMLDialogElement{_anchorObserver=null;_contentObserver=null;_mutationObserver=null;_anchorTrackRAF=null;_lastAnchorRect=null;_isPopupActive=!1;_boundReposition;_boundScroll;_boundOutsidePointerDown;_rafId=null;_anchorRef=null;_isDragging=!1;_dragPending=!1;_dragStartPos={x:0,y:0};_dragOffset={x:0,y:0};_dragThreshold=3;_boundPointerDown;_boundPointerMove;_boundPointerUp;_wasDragged=!1;constructor(){super();this._boundReposition=this.queueReposition.bind(this),this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()},this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this),this._boundPointerDown=this.handlePointerDown.bind(this),this._boundPointerMove=this.handlePointerMove.bind(this),this._boundPointerUp=this.handlePointerUp.bind(this)}ensureInitialized(){if(typeof this._anchorObserver==="undefined")this._anchorObserver=null;if(typeof this._contentObserver==="undefined")this._contentObserver=null;if(typeof this._mutationObserver==="undefined")this._mutationObserver=null;if(typeof this._anchorTrackRAF==="undefined")this._anchorTrackRAF=null;if(typeof this._lastAnchorRect==="undefined")this._lastAnchorRect=null;if(typeof this._isPopupActive==="undefined")this._isPopupActive=!1;if(typeof this._rafId==="undefined")this._rafId=null;if(typeof this._anchorRef==="undefined")this._anchorRef=null;if(typeof this._isDragging==="undefined")this._isDragging=!1;if(typeof this._dragPending==="undefined")this._dragPending=!1;if(typeof this._dragStartPos==="undefined")this._dragStartPos={x:0,y:0};if(typeof this._dragOffset==="undefined")this._dragOffset={x:0,y:0};if(typeof this._dragThreshold!=="number")this._dragThreshold=3;if(typeof this._wasDragged==="undefined")this._wasDragged=!1;if(typeof this._boundReposition!=="function")this._boundReposition=this.queueReposition.bind(this);if(typeof this._boundScroll!=="function")this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()};if(typeof this._boundOutsidePointerDown!=="function")this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this);if(typeof this._boundPointerDown!=="function")this._boundPointerDown=this.handlePointerDown.bind(this);if(typeof this._boundPointerMove!=="function")this._boundPointerMove=this.handlePointerMove.bind(this);if(typeof this._boundPointerUp!=="function")this._boundPointerUp=this.handlePointerUp.bind(this)}static get observedAttributes(){return["open","anchor","position","offset","variant","theme","drag","handle","autoresize","viewport-margin"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q===!1||Q==="false"||Q===null){if(!this.open)return;this.removeAttribute("open");return}if(this.open)return;this.setAttribute("open","true")}get anchor(){return this._anchorRef??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this._anchorRef=Q;else if(typeof Q==="string")this._anchorRef=null,this.setAttribute("anchor",Q);else this._anchorRef=null;if(this.open)this.queueReposition()}connectedCallback(){if(this.ensureInitialized(),!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("role"))this.setAttribute("role","dialog");if(!this.hasAttribute("closedby"))this.setAttribute("closedby","any");if(this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this.addEventListener("close",()=>{if(this.teardownObservers(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.setupDragListeners()}),this.open)this.showPopup();else this.hidePopup()}disconnectedCallback(){if(this.ensureInitialized(),this.teardownObservers(),this.removeDragListeners(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._rafId!==null)cancelAnimationFrame(this._rafId),this._rafId=null}attributeChangedCallback(Q,$,J){if(this.ensureInitialized(),$===J)return;if(Q==="open"){if(J===null||J==="false"){this.hidePopup();return}this.showPopup();return}if(Q==="drag"){if(this.drag=J!==null&&J!=="false",this.drag)this.setupDragListeners();else this.removeDragListeners();return}if(this.open)this.queueReposition(),this.setupObservers()}showPopup(){if(this._isPopupActive){this.queueReposition();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(n()+1),!super.open)try{this.show()}catch($){}this.setupObservers(),document.addEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._wasDragged=!1,this.queueReposition(),this._isPopupActive=!0;const Q=this.resolveAnchor();if(Q)Q.classList.add("has-popup-open")}hidePopup(){const Q=this.resolveAnchor();if(Q)Q.classList.remove("has-popup-open");if(this._isPopupActive=!1,this._wasDragged=!1,this.teardownObservers(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}setupObservers(){this.teardownObservers();const Q=this.resolveAnchor();if(Q&&"ResizeObserver"in window)this._anchorObserver=new ResizeObserver(this._boundReposition),this._anchorObserver.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this._contentObserver=new ResizeObserver(this._boundReposition),this._contentObserver.observe(this);this._mutationObserver=new MutationObserver(this._boundReposition),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this._boundReposition),window.addEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.startAnchorTracking()}teardownObservers(){if(this._anchorObserver)this._anchorObserver.disconnect(),this._anchorObserver=null;if(this._contentObserver)this._contentObserver.disconnect(),this._contentObserver=null;if(this._mutationObserver)this._mutationObserver.disconnect(),this._mutationObserver=null;window.removeEventListener("resize",this._boundReposition),window.removeEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.stopAnchorTracking()}readRectSnapshot(Q){if(!Q)return null;const $=Q.getBoundingClientRect();return{x:$.x,y:$.y,width:$.width,height:$.height}}hasRectChanged(Q,$,J=0.25){if(!Q&&!$)return!1;if(!Q||!$)return!0;return Math.abs(Q.x-$.x)>J||Math.abs(Q.y-$.y)>J||Math.abs(Q.width-$.width)>J||Math.abs(Q.height-$.height)>J}startAnchorTracking(){if(this.stopAnchorTracking(),!this.open)return;const Q=()=>{if(!this.open){this._anchorTrackRAF=null;return}const $=this.resolveAnchor(),J=this.readRectSnapshot($),Z=this.shouldAutoReposition();if(Z&&this.hasRectChanged(this._lastAnchorRect,J))this._lastAnchorRect=J,this.queueReposition();else if(!Z)this._lastAnchorRect=J;this._anchorTrackRAF=requestAnimationFrame(Q)};this._lastAnchorRect=this.readRectSnapshot(this.resolveAnchor()),this._anchorTrackRAF=requestAnimationFrame(Q)}stopAnchorTracking(){if(this._anchorTrackRAF!==null)cancelAnimationFrame(this._anchorTrackRAF),this._anchorTrackRAF=null;this._lastAnchorRect=null}handleOutsidePointerDown(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const J=Q.target;if(!(J instanceof Node))return;if(this.contains(J))return;const Z=this.resolveAnchor();if(Z&&Z.contains(J))return;if(this.isInsideDescendantPopup(J))return;this.open=!1}isInsideDescendantPopup(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let J=$;const Z=new Set;while(J&&!Z.has(J)){Z.add(J);const _=J.anchor;if(!(_ instanceof Element))break;if(this.contains(_))return!0;J=_.closest?.('dialog[is="fig-popup"]')}return!1}setupDragListeners(){if(this.drag)this.addEventListener("pointerdown",this._boundPointerDown)}removeDragListeners(){this.removeEventListener("pointerdown",this._boundPointerDown),document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp)}isInteractiveElement(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-POPUP","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(j)=>$.some((q)=>j.matches?.(q))||j.tagName?.startsWith("FIG-")&&!J.includes(j.tagName);if(Z(Q))return!0;let _=Q.parentElement;while(_&&_!==this){if(Z(_))return!0;_=_.parentElement}return!1}handlePointerDown(Q){if(!this.drag)return;if(this.isInteractiveElement(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this._dragPending=!0,this._dragStartPos.x=Q.clientX,this._dragStartPos.y=Q.clientY;const J=this.getBoundingClientRect();this._dragOffset.x=Q.clientX-J.left,this._dragOffset.y=Q.clientY-J.top,document.addEventListener("pointermove",this._boundPointerMove),document.addEventListener("pointerup",this._boundPointerUp)}handlePointerMove(Q){if(this._dragPending&&!this._isDragging){const $=Math.abs(Q.clientX-this._dragStartPos.x),J=Math.abs(Q.clientY-this._dragStartPos.y);if($>this._dragThreshold||J>this._dragThreshold){this._isDragging=!0,this._dragPending=!1,this._wasDragged=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this._isDragging)return;this.style.left=`${Q.clientX-this._dragOffset.x}px`,this.style.top=`${Q.clientY-this._dragOffset.y}px`,Q.preventDefault()}handlePointerUp(Q){if(this._isDragging)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this._isDragging=!1,this._dragPending=!1,document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),Q.preventDefault()}resolveAnchor(){if(this._anchorRef)return this._anchorRef;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const J=$.querySelector(Q);if(J&&!this.contains(J))return J}return document.querySelector(Q)}parsePosition(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),J=new Set(["top","center","bottom"]),Z=new Set(["left","center","right"]);let _="top",j="center",q=null;if($.length>=2){if(J.has($[0]))_=$[0];if(Z.has($[1]))j=$[1];return{vertical:_,horizontal:j,shorthand:q}}if($.length===1){const K=$[0];if(K==="top"||K==="bottom")_=K,q=K;else if(K==="left"||K==="right")j=K,q=K;else if(K==="center")_="center",j="center"}return{vertical:_,horizontal:j,shorthand:q}}normalizeOffsetToken(Q,$="0px"){if(!Q)return $;const J=Q.trim();if(!J)return $;if(/^-?\d+(\.\d+)?$/.test(J))return`${J}px`;return J}measureLengthPx(Q,$="x"){if(!Q)return 0;const J=this.normalizeOffsetToken(Q,"0px");if(J.endsWith("px")){const j=parseFloat(J);return Number.isFinite(j)?j:0}const Z=document.createElement("div");if(Z.style.position="fixed",Z.style.visibility="hidden",Z.style.pointerEvents="none",Z.style.left="0",Z.style.top="0",Z.style.margin="0",Z.style.padding="0",Z.style.border="0",$==="x")Z.style.width=J,Z.style.height="0";else Z.style.height=J,Z.style.width="0";document.body.appendChild(Z);const _=Z.getBoundingClientRect();return Z.remove(),$==="x"?_.width:_.height}parseOffset(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),J=this.normalizeOffsetToken($[0],"0px"),Z=this.normalizeOffsetToken($[1],"0px");return{xToken:J,yToken:Z,xPx:this.measureLengthPx(J,"x"),yPx:this.measureLengthPx(Z,"y")}}parseViewportMargins(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((Z)=>!Number.isNaN(Z));if($.length===0)return{top:8,right:8,bottom:8,left:8};if($.length===1)return{top:$[0],right:$[0],bottom:$[0],left:$[0]};if($.length===2)return{top:$[0],right:$[1],bottom:$[0],left:$[1]};if($.length===3)return{top:$[0],right:$[1],bottom:$[2],left:$[1]};return{top:$[0],right:$[1],bottom:$[2],left:$[3]}}getPlacementCandidates(Q,$,J){const Z={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(J){const j=J==="left"||J==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:J},{v:Q,h:$,s:Z[J]},{v:Q,h:$,s:j[0]},{v:Q,h:$,s:j[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:Z[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:Z[$],s:null},{v:"bottom",h:Z[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:Z[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:Z[Q],h:"left",s:null},{v:Z[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:Z[Q],h:$,s:null},{v:Q,h:Z[$],s:null},{v:Z[Q],h:Z[$],s:null}]}computeCoords(Q,$,J,Z,_,j){let q,K;if(j==="left"||j==="right")return K=j==="left"?Q.left-$.width-_.xPx:Q.right+_.xPx,q=Q.top,{top:q,left:K};if(j==="top"||j==="bottom")return q=j==="top"?Q.top-$.height-_.yPx:Q.bottom+_.yPx,K=Q.left,{top:q,left:K};if(J==="top")q=Q.top-$.height-_.yPx;else if(J==="bottom")q=Q.bottom+_.yPx;else q=Q.top+(Q.height-$.height)/2;if(J==="center")if(Z==="left")K=Q.left-$.width-_.xPx;else if(Z==="right")K=Q.right+_.xPx;else K=Q.left+(Q.width-$.width)/2;else if(Z==="left")K=Q.left+_.xPx;else if(Z==="right")K=Q.right-$.width-_.xPx;else K=Q.left+(Q.width-$.width)/2;return{top:q,left:K}}oppositeSide(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}getPlacementSide(Q,$,J){if(J==="top")return"top";if(J==="bottom")return"bottom";if(J==="left")return"left";if(J==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}updatePopoverBeak(Q,$,J,Z,_){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const j=this.oppositeSide(_);this.setAttribute("data-beak-side",j);const q=Q.left+Q.width/2,K=Q.top+Q.height/2,X=this.getBoundingClientRect(),W=X.width>0&&X.height>0?X:$,L=W.left,U=W.top,G=10;let O;if(j==="top"||j==="bottom"){O=q-L;const B=G,D=Math.max(B,W.width-G);O=Math.min(D,Math.max(B,O))}else{O=K-U;const B=G,D=Math.max(B,W.height-G);O=Math.min(D,Math.max(B,O))}this.style.setProperty("--beak-offset",`${O}px`)}overflowScore(Q,$,J){const{innerWidth:Z,innerHeight:_}=window,j=Q.left+$.width,q=Q.top+$.height,K=Math.max(0,J.left-Q.left),X=Math.max(0,J.top-Q.top),W=Math.max(0,j-(Z-J.right)),L=Math.max(0,q-(_-J.bottom));return K+X+W+L}fits(Q,$,J){return this.overflowScore(Q,$,J)===0}clamp(Q,$,J){const{left:Z,top:_}=J,j=Math.max(J.left,window.innerWidth-$.width-J.right),q=Math.max(J.top,window.innerHeight-$.height-J.bottom);return{left:Math.min(j,Math.max(Z,Q.left)),top:Math.min(q,Math.max(_,Q.top))}}positionPopup(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.parseOffset(),{vertical:J,horizontal:Z,shorthand:_}=this.parsePosition(),j=this.resolveAnchor(),q=this.parseViewportMargins();if(!j){this.updatePopoverBeak(null,Q,0,0,"top");const O={left:q.left+(window.innerWidth-q.right-q.left-Q.width)/2,top:q.top+(window.innerHeight-q.bottom-q.top-Q.height)/2},B=this.clamp(O,Q,q);this.style.left=`${B.left}px`,this.style.top=`${B.top}px`;return}const K=j.getBoundingClientRect(),X=this.getPlacementCandidates(J,Z,_);let W=null,L="top",U=Number.POSITIVE_INFINITY;for(let{v:O,h:B,s:D}of X){const F=this.computeCoords(K,Q,O,B,$,D),P=this.getPlacementSide(O,B,D);if(D){const E=this.clamp(F,Q,q);if(D==="left"||D==="right"?F.left>=q.left&&F.left+Q.width<=window.innerWidth-q.right:F.top>=q.top&&F.top+Q.height<=window.innerHeight-q.bottom){this.style.left=`${E.left}px`,this.style.top=`${E.top}px`,this.updatePopoverBeak(K,Q,E.left,E.top,P);return}const S=this.overflowScore(F,Q,q);if(S<U)U=S,W=E,L=P}else{if(this.fits(F,Q,q)){this.style.left=`${F.left}px`,this.style.top=`${F.top}px`,this.updatePopoverBeak(K,Q,F.left,F.top,P);return}const E=this.overflowScore(F,Q,q);if(E<U)U=E,W=F,L=P}}const G=this.clamp(W||{left:0,top:0},Q,q);this.style.left=`${G.left}px`,this.style.top=`${G.top}px`,this.updatePopoverBeak(K,Q,G.left,G.top,L)}queueReposition(){if(!this.open||!this.shouldAutoReposition())return;if(this._rafId!==null)return;this._rafId=requestAnimationFrame(()=>{this._rafId=null,this.positionPopup()})}shouldAutoReposition(){if(!(this.drag&&this._wasDragged))return!0;return!this.resolveAnchor()}}c("fig-popup",$0,{extends:"dialog"});class J0 extends HTMLElement{#Q;constructor(){super();this.content=null,this.#Q=!1}connectedCallback(){this.setAttribute("label",this.innerText),this.setAttribute("role","tab"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick.bind(this)),requestAnimationFrame(()=>{if(typeof this.getAttribute("content")==="string"){if(this.content=document.querySelector(this.getAttribute("content")),this.content)if(this.content.setAttribute("role","tabpanel"),this.#Q)this.content.style.display="block",this.setAttribute("aria-selected","true");else this.content.style.display="none",this.setAttribute("aria-selected","false")}})}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q?"true":"false")}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){if(this.selected=!0,this.content)this.content.style.display="block"}static get observedAttributes(){return["selected"]}attributeChangedCallback(Q,$,J){if(Q==="selected"){if(this.#Q=J!==null&&J!=="false",this.setAttribute("aria-selected",this.#Q?"true":"false"),this?.content)this.content.style.display=this.#Q?"block":"none"}}}customElements.define("fig-tab",J0);class Z0 extends HTMLElement{constructor(){super()}static get observedAttributes(){return["value","name","disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"tabs",this.setAttribute("role","tablist"),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.#$.bind(this));const Q=this.getAttribute("value");if(Q)this.#J(Q);if(this.hasAttribute("disabled"))this.#Q(!0)}#Q(Q){this.querySelectorAll("fig-tab").forEach((J)=>{if(Q)J.setAttribute("disabled",""),J.setAttribute("aria-disabled","true"),J.setAttribute("tabindex","-1");else J.removeAttribute("disabled"),J.removeAttribute("aria-disabled"),J.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.#$)}#$(Q){const $=Array.from(this.querySelectorAll("fig-tab")),J=$.findIndex((_)=>_.hasAttribute("selected"));let Z=J;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),Z=J>0?J-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),Z=J<$.length-1?J+1:0;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;default:return}if(Z!==J&&$[Z])$.forEach((_)=>_.removeAttribute("selected")),this.selectedTab=$[Z],this.setAttribute("value",$[Z].getAttribute("value")||""),$[Z].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#J(Q){const $=this.querySelectorAll("fig-tab");for(let J of $)if(J.getAttribute("value")===Q)this.selectedTab=J;else J.removeAttribute("selected")}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(J!==$)this.#J(J);break;case"disabled":this.#Q(J!==null&&J!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const J=this.querySelectorAll("fig-tab");for(let Z of J)if(Z===$)this.selectedTab=Z,this.setAttribute("value",Z.getAttribute("value")||"");else Z.removeAttribute("selected")}}}customElements.define("fig-tabs",Z0);class _0 extends HTMLElement{#Q;#$;constructor(){super()}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){const Q=this.closest("fig-segmented-control");if(Q&&Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.setAttribute("selected","true")}get value(){return this.#Q}set value(Q){this.#Q=Q,this.setAttribute("value",Q)}get selected(){return this.#$}set selected(Q){this.#$=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,J){switch(Q){case"value":this.#Q=J;break;case"selected":this.#$=J;break}}}customElements.define("fig-segment",_0);class j0 extends HTMLElement{#Q=null;constructor(){super()}static get observedAttributes(){return["disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.handleClick.bind(this)),this.#$(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),requestAnimationFrame(()=>{const Q=this.querySelectorAll("fig-segment");if(!Array.from(Q).some((J)=>J.hasAttribute("selected"))&&Q.length>0)this.selectedSegment=Q[0]})}get selectedSegment(){return this.#Q}set selectedSegment(Q){if(this.#Q)this.#Q.removeAttribute("selected");if(this.#Q=Q,Q)Q.setAttribute("selected","true")}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if($){const J=this.querySelectorAll("fig-segment");for(let Z of J)if(Z===$)this.selectedSegment=Z;else Z.removeAttribute("selected")}}#$(Q){this.setAttribute("aria-disabled",Q?"true":"false"),this.querySelectorAll("fig-segment").forEach(($)=>{if(Q)$.setAttribute("disabled",""),$.setAttribute("aria-disabled","true");else $.removeAttribute("disabled"),$.removeAttribute("aria-disabled")})}attributeChangedCallback(Q,$,J){if(Q==="disabled"&&$!==J)this.#$(J!==null&&J!=="false")}}customElements.define("fig-segmented-control",j0);class q0 extends HTMLElement{#Q=!1;#$=!1;#J={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"}};#_;#q;#Z;#j;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#_=(Q)=>{Q.stopPropagation(),this.#D()},this.#q=(Q)=>{Q.stopPropagation(),this.#A()},this.#Z=(Q)=>{Q.stopPropagation(),this.#W()},this.#j=(Q)=>{Q.stopPropagation(),this.#M()}}#K(){const Q=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.hasAttribute("text")&&this.getAttribute("text")!=="false",this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.getAttribute("disabled")?!0:!1,this.precision=this.hasAttribute("precision")?Number(this.getAttribute("precision")):null,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";const $=this.#J[this.type];if(this.min=Number(this.getAttribute("min")||$.min),this.max=Number(this.getAttribute("max")||$.max),this.step=Number(this.getAttribute("step")||$.step),this.color=this.getAttribute("color")||$?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#$=Q===null||typeof Q==="string"&&Q.trim()==="",this.value=this.#N(Q),this.color)this.style.setProperty("--color",this.color);let J="",Z=`<div class="fig-slider-input-container" role="group">
                <input 
                    type="range"
                    ${this.text?'tabindex="-1"':""}
                    ${this.disabled?"disabled":""}
                    min="${this.min}"
                    max="${this.max}"
                    step="${this.step}"
                    class="${this.type}"
                    value="${this.value}"
                    aria-valuemin="${this.min}"
                    aria-valuemax="${this.max}"
                    aria-valuenow="${this.value}">
                ${this.initialInnerHTML}
            </div>`;if(this.text)J=`${Z}
                    <fig-input-number
                        placeholder="${this.placeholder}"
                        min="${this.min}"
                        max="${this.max}"
                        transform="${this.transform}"
                        step="${this.step}"
                        value="${this.#$?"":this.value}"
                        ${this.units?`units="${this.units}"`:""}
                        ${this.precision!==null?`precision="${this.precision}"`:""}>
                    </fig-input-number>`;else J=Z;this.innerHTML=J,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.removeEventListener("input",this.#_),this.input.addEventListener("input",this.#_),this.input.removeEventListener("change",this.#q),this.input.addEventListener("change",this.#q),this.input.addEventListener("pointerdown",()=>{this.#Q=!0}),this.input.addEventListener("pointerup",()=>{this.#Q=!1}),this.default)this.style.setProperty("--default",this.#G(this.default));if(this.datalist=this.querySelector("datalist"),this.figInputNumber=this.querySelector("fig-input-number"),this.datalist)this.inputContainer.append(this.datalist),this.datalist.setAttribute("id",this.datalist.getAttribute("id")||V()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",V());let _=(this.max-this.min)/this.step+1;for(let j=0;j<_;j++){let q=document.createElement("option");q.setAttribute("value",this.min+j*this.step),this.datalist.append(q)}this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}else if(this.type==="delta"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",V());let _=document.createElement("option");_.setAttribute("value",this.default),this.datalist.append(_),this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}if(this.datalist){let _=this.datalist.querySelector(`option[value='${this.default}']`);if(_)_.setAttribute("default","true")}if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.addEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#j),this.figInputNumber.addEventListener("change",this.#j);this.#U()})}connectedCallback(){this.#K()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#_),this.input.removeEventListener("change",this.#q);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#j)}#W(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#$=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#N(Q);this.value=$,this.input.value=String($),this.#U(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}}#G(Q){const{min:$,max:J}=this.#B(),Z=J-$;if(Z===0)return 0;return(Number(Q)-$)/Z}#Y(Q){if(Q===null||Q===void 0)return null;if(typeof Q==="string"&&Q.trim()==="")return null;const $=Number(Q);return Number.isFinite($)?$:null}#B(){let Q=this.#Y(this.min),$=this.#Y(this.max);if(Q===null)Q=0;if($===null)$=Q;if(Q>$)[Q,$]=[$,Q];return{min:Q,max:$}}#X(Q){const{min:$,max:J}=this.#B();return Math.min(J,Math.max($,Q))}#O(){if(this.type==="delta"){const $=this.#Y(this.default);if($!==null)return this.#X($);return this.#X(0)}const{min:Q}=this.#B();return Q}#N(Q){const $=this.#Y(Q);if($===null)return this.#O();return this.#X($)}#L(){let Q=this.#G(this.value);this.style.setProperty("--slider-complete",Q);let $=this.#G(this.default);this.style.setProperty("--default",$),this.style.setProperty("--unchanged",Q===$?1:0)}#U(){let Q=this.input.value;if(this.value=Q,this.#L(),this.input.setAttribute("aria-valuenow",Q),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#$?"":Q)}#D(){this.#$=!1,this.#U(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#A(){this.#Q=!1,this.#$=!1,this.#U(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#M(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#$=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#N(Q);this.value=$,this.input.value=String($),this.#U(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}}static get observedAttributes(){return["value","step","min","max","type","variant","disabled","color","units","transform","text","placeholder","default","precision"]}focus(){this.input.focus()}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"color":this.color=J,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=J!==null&&J!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#Q)break;if(this.#$=J===null||typeof J==="string"&&J.trim()==="",this.value=this.#N(J),this.input.value=String(this.value),this.#U(),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#$?"":this.value);break;case"transform":if(this.transform=Number(J)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=J!==null?Number(J):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"placeholder":if(this.placeholder=J!==null?J:"##",this.figInputNumber)this.figInputNumber.setAttribute("placeholder",this.placeholder);break;case"default":this.default=J!==null?J:this.type==="delta"?0:this.min,this.#L();break;case"min":case"max":case"step":case"type":case"variant":case"units":this[Q]=J,this.#K();break;case"text":this.text=J!==null