@rogieking/figui3 6.18.2 → 6.18.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/fig-lab.js +5 -5
  2. package/fig-lab.js +43 -8
  3. package/package.json +1 -1
package/dist/fig-lab.js CHANGED
@@ -1,4 +1,4 @@
1
- function K(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}class E extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#G=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#X();if(this.#B(),this.#K(),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.#B();if(Z)this.#K()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#B()}#X(){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"),_=document.createElement("fig-segmented-control"),j=document.createElement("fig-segment"),G=document.createElement("fig-segment");_.setAttribute("sizing","equal"),j.setAttribute("value","off"),j.textContent="Off",G.setAttribute("value","on"),G.textContent="On",_.append(j,G),Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z)}#B(){if(!this.#Q||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#z(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","checked","value"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#K(){if(!this.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("value",K(this,"checked")?"on":"off"),this.#N=Q}#L(){if(!this.#J)return;this.#G??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#G),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#G)this.#J.removeEventListener("input",this.#G);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.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}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-segmented-control"))return;let Q=this.#J?.value==="on"?"off":"on";this.#J?.querySelector(`fig-segment[value="${Q}"]`)?.click()}get checked(){return this.#J?this.#J.value==="on":K(this,"checked")}set checked(J){this.toggleAttribute("checked",Boolean(J))}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){this.setAttribute("value",J??"")}focus(J){(this.#J?.querySelector("fig-segment[selected]")||this.#J?.querySelector("fig-segment"))?.focus(J)}}customElements.define("propskit-switch",E);class y extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#G=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Q)this.#X();if(this.#B(),this.#K(),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.#B();if(Z)this.#K()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label")this.#B()}#X(){let J=Array.from(this.childNodes).filter((j)=>j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-input-color");for(let j of J)if(j!==Q)_.appendChild(j);Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z)}#B(){if(!this.#Q||!this.#Z||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Z.textContent?.trim()||"Color")}#z(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#K(){if(!this.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("text","true"),this.#N=Q}#L(){if(!this.#J)return;this.#G??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#G),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#G)this.#J.removeEventListener("input",this.#G);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.getAttribute("value")??"";this.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}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-input-color"))return;this.focus()}get value(){return this.#J?.getAttribute("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.#J?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}customElements.define("propskit-color",y);class b extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#G=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Q)this.#X();if(this.#B(),this.#K(),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;let _=$.attributeName;if(_==="label"||_==="direction"||_==="aria-label")Q=!0;else Z=!0}if(Q)this.#B();if(Z)this.#K()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label"){this.#B();return}if(J==="options"||J==="value")this.#K()}#X(){let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");Q.append(Z,$),this.#Q=Q,this.#Z=Z,this.#J=$,this.#_=Boolean(J),this.replaceChildren(Q)}#B(){if(!this.#Q||!this.#Z||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("label",this.getAttribute("aria-label")||this.#Z.textContent?.trim()||"Select")}#z(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#K(){if(!this.#J)return;let J=this.#z().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.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#L(){if(!this.#J)return;this.#G??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#G),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#G)this.#J.removeEventListener("input",this.#G);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){if(Q.target!==this.#J)return;Q.stopImmediatePropagation();let Z=this.#J?.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}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-select"))return;if(this.#J?.focus(),this.#J&&!K(this.#J,"disabled"))this.#J.open=!0}get value(){return this.#J?.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.#J?.focus(J)}}customElements.define("propskit-select",b);class x extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#G=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Q)this.#X();if(this.#B(),this.#K(),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.#B();if(Z)this.#K()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label")this.#B()}#X(){let J=Array.from(this.childNodes).filter((j)=>j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-input-text");for(let j of J)if(j!==Q)_.appendChild(j);Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z)}#B(){if(!this.#Q||!this.#Z||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Z.textContent?.trim()||"Text")}#z(){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-"))}#K(){if(!this.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#L(){if(!this.#J)return;this.#G??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#G),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#G)this.#J.removeEventListener("input",this.#G);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.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}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-input-text"))return;this.focus()}get value(){return this.#J?.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.#J?.focus(J)}}customElements.define("propskit-text",x);class w extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#G=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#X();if(this.#B(),this.#K(),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.#B();if(Z)this.#K()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#B()}#X(){let J=Array.from(this.childNodes).filter((j)=>j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-input-number");Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z);for(let j of J)if(j!==Q)_.appendChild(j)}#B(){if(!this.#Q||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#z(){let J=new Set(["label","direction","oninput","onchange","class","style","id"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#K(){if(!this.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#L(){if(!this.#J)return;this.#G??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#G),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#G)this.#J.removeEventListener("input",this.#G);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0)this.setAttribute("value",String(this.#J.value));this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-input-number"))return;this.focus()}get value(){return this.#J?.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.#J?.focus(J)}}customElements.define("propskit-number",w);class h extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#G=0;#$=0;#q=null;#X=null;#B=0;#z=null;#K=!1;#L=0;#U=null;#Y=0;#k=null;#W=null;#T=null;#M=this.#u.bind(this);#O=this.#g.bind(this);#S=this.#x.bind(this);#A=this.#t.bind(this);#H=this.#e.bind(this);#C=this.#r.bind(this);#h=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.#D();if(this.#f(),this.#F(),this.#jJ(),this.#E(),this.removeEventListener("pointerdown",this.#M,{capture:!0}),this.addEventListener("pointerdown",this.#M,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#H),this.addEventListener("contextmenu",this.#H),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName&&this.#h.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#f();if(Z)this.#F(),this.#E()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#G)cancelAnimationFrame(this.#G),this.#G=0;if(this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#s(),this.#v(),this.#I(),this.#b(),this.#GJ(),this.removeEventListener("pointerdown",this.#M,{capture:!0}),this.removeEventListener("contextmenu",this.#H),this.#X?.removeEventListener("change",this.#C)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#f()}#D(){let J=Array.from(this.childNodes).filter((j)=>{return j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())}),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-slider");_.setAttribute("text","true");for(let j of this.#w()){let G=this.getAttribute(j);_.setAttribute(j,G??"")}Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z),this.#R();for(let j of J){if(j===Q)continue;this.#J.appendChild(j)}}#R(){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.#X=J,this.appendChild(J)}#f(){if(!this.#Q||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Z.parentElement===this.#Q)this.#Z.remove()}else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#F(){if(!this.#J)return;let J=this.#w(),Q=new Set(J.filter(($)=>$!=="text"));for(let $ of this.#N)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text")continue;let _=this.getAttribute($);this.#J.setAttribute($,_??"")}this.#J.removeAttribute("variant"),this.#J.removeAttribute("color"),this.#J.removeAttribute("transform"),this.#J.removeAttribute("full"),this.#J.setAttribute("text","true");let Z=(this.getAttribute("type")||"range").toLowerCase();if(Z==="delta"||Z==="stepper")this.#J.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#J.removeAttribute("default");if(Z==="stepper")this.#J.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#J.removeAttribute("step");if(Z==="opacity")this.#J.style.setProperty("--color","light-dark(#444444, #e6e6e6)");else this.#J.style.removeProperty("--color");this.#N=Q,this.#y()}#w(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#h.has(Q))}#y(){if(this.#G)cancelAnimationFrame(this.#G);this.#G=requestAnimationFrame(()=>{this.#G=0,this.#ZJ(),this.#P()})}#E(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#P()})}#P(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#q)this.#c(J);J?.removeAttribute("tabindex"),Q?.setAttribute("tabindex","-1")}#c(J){if(this.#b(),this.#q=J,!this.#q)return;this.#q.addEventListener("dblclick",this.#A,{capture:!0})}#b(){if(!this.#q)return;this.#q.removeEventListener("dblclick",this.#A,{capture:!0}),this.#q=null}#t(J){J.preventDefault(),J.stopImmediatePropagation(),this.#QJ()}#u(J){if(J.button!==0||K(this,"disabled"))return;if(this.getAttribute("elastic")==="false")return;if(J.target?.closest?.("fig-input-number"))return;let Q=this.#J?.querySelector('input[type="range"]')??this.#q;if(!Q)return;this.#v(),this.#I(),this.#q=Q,this.#K=!0,this.#k=J.pointerId,this.#L=this.#l();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#U={left:Z.left,right:Z.right,width:Z.width},this.#Y=$.width,window.addEventListener("pointermove",this.#O,{passive:!0}),window.addEventListener("pointerup",this.#S,{once:!0}),window.addEventListener("pointercancel",this.#S,{once:!0}),window.addEventListener("blur",this.#S,{once:!0})}#g(J){if(!this.#K)return;if(J.pointerId!==this.#k)return;if(J.buttons===0){this.#x(J);return}this.#JJ(J.clientX)}#x(J){if(J?.pointerId!==void 0&&this.#k!==null&&J.pointerId!==this.#k)return;this.#v(),this.#I()}#v(){window.removeEventListener("pointermove",this.#O),window.removeEventListener("pointerup",this.#S),window.removeEventListener("pointercancel",this.#S),window.removeEventListener("blur",this.#S),this.#K=!1,this.#k=null}#e(J){if(K(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#s(),this.#$J(J.clientX,J.clientY)}#$J(J,Q){let Z=!1,$=0,_=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",_,!0),window.removeEventListener("pointercancel",_,!0),requestAnimationFrame(()=>{this.#X?.showAt?.(J,Q)})};window.addEventListener("pointerup",_,{once:!0,capture:!0}),window.addEventListener("pointercancel",_,{once:!0,capture:!0}),$=window.setTimeout(_,180)}#r(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#QJ()}#s(){if(this.#B)clearTimeout(this.#B),this.#B=0;this.#z=null}#l(){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}#JJ(J){let Q=this.#U;if(!Q||!this.#L){this.#I();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#i();return}let $=Math.max(-this.#L,Math.min(this.#L,Z*0.5)),_=Math.abs($),j=this.#Y?(this.#Y+_)/this.#Y:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${_}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${j}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#I(){this.#i(),this.#L=0,this.#U=null,this.#Y=0,this.#k=null}#i(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#_J(J){let Q=this.#q;if(!Q)return this.#J?.value??"";let Z=Q.getBoundingClientRect(),$=Z.width?Math.min(1,Math.max(0,(J.clientX-Z.left)/Z.width)):0,_=Number(Q.min||0),j=Number(Q.max||100),G=Q.step==="any"?0:Number(Q.step||1),X=_+(j-_)*$;if(!G)return String(X);let q=Math.round((X-_)/G)*G+_,B=Math.max(0,`${G}`.split(".")[1]?.length||0);return String(Number(q.toFixed(B)))}#p(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.getAttribute("value")??this.#J?.getAttribute("value")??this.#q?.min??"0"}#QJ(){this.#s(),this.#a(this.#p(),"input"),this.#a(this.#p(),"change")}#a(J,Q){if(!this.#J||J===null||J===void 0)return;this.#J.value=J,this.dispatchEvent(new CustomEvent(Q,{detail:this.#J.value,bubbles:!0,cancelable:!0,composed:!0}))}#ZJ(){if(!this.#J)return;let J=this.#J.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??"")}#jJ(){if(!this.#J)return;if(!this.#W)this.#W=this.#XJ.bind(this,"input");if(!this.#T)this.#T=this.#XJ.bind(this,"change");this.#J.addEventListener("input",this.#W),this.#J.addEventListener("change",this.#T)}#GJ(){if(!this.#J)return;if(this.#W)this.#J.removeEventListener("input",this.#W);if(this.#T)this.#J.removeEventListener("change",this.#T)}#XJ(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#I();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector('input[type="range"]')?.focus(J)}resetToDefault(){this.#QJ()}}customElements.define("propskit-slider",h);class g extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Q=50;#Z=50;#J=75;#_=75;#j=0;#N=!1;#G=0;#$=null;#q=null;#X=null;#B=null;#z=null;#K=null;#L=null;#U=null;#Y=null;#k=!1;#W=!1;#T=!1;#M=!1;#O=null;#S="";#A="";#H=null;get#C(){return this.getAttribute("type")||"point"}get#h(){return this.#C==="point-radius"||this.#C==="point-radius-angle"}get#D(){return this.#C==="point-radius-angle"}get#R(){return this.#C==="point-point"}get#f(){return this.#C==="point-radius-angle"||this.#C==="point-point"}get#F(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#w(){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"}#y(J){let Q=this.#w;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#E(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Q)}%, ${Math.round(this.#Z)}%`}get#P(){let J=this.getAttribute("name");if(J){let Q=J.split(",");if(Q.length>1)return Q[1].trim()}return`${Math.round(this.#J)}%, ${Math.round(this.#_)}%`}get#c(){return this.getAttribute("drag-surface")||"parent"}get#b(){let J=this.#c;if(J==="parent")return this.parentElement;return this.closest(J)}get#t(){let J=this.#c;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#u(J){if(this.#N)return this.#j/100*J;return this.#j}#g(){if(this.#N)return`Radius ${Math.round(this.#j)}%`;return`Radius ${Math.round(this.#j)}`}connectedCallback(){this.#x(),this.#v()}disconnectedCallback(){this.#UJ(),this.#r(),document.body.classList.remove("fig-lab-move-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#k&&!this.#W&&!this.#T&&!this.#M)if(this.#x(),this.#$)this.#m();else this.#v();if(J==="type")this.#x(),this.#v();if(J==="color"&&this.#$)if(Z)this.#$.setAttribute("color",Z);else this.#$.removeAttribute("color");if(J==="disabled")this.#v();if(J==="tooltips")this.#v();if(J==="snapping"&&this.#$){if(this.#$.setAttribute("drag-snapping",Z||"false"),this.#q)this.#q.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#K)this.#K.setAttribute("text",this.#E);if(this.#L)this.#L.setAttribute("text",this.#P)}}#x(){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.#Z=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#N=!0,this.#j=parseFloat(Z);else this.#N=!1,this.#j=parseFloat(Z);if(!Number.isFinite(this.#j))this.#j=0}if(typeof Q.angle==="number")this.#G=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#_=Q.y2}catch{}}get value(){let J={x:this.#Q,y:this.#Z};if(this.#C==="color"){let Q=this.getAttribute("color")||this.#$?.getAttribute("color");if(Q)J.color=Q}if(this.#h)J.radius=this.#N?`${this.#j}%`:this.#j;if(this.#D)J.angle=this.#G;if(this.#R)J.x2=this.#J,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)}#v(){this.innerHTML="",this.#$=null,this.#q=null,this.#X=null,this.#B=null,this.#z=null,this.#K=null,this.#L=null,this.#U=null,this.#Y=null;let J=K(this,"disabled"),Q=this.#C,Z=this.#F,$=this.#t,_=document.createElement("fig-handle");if(_.setAttribute("drag","true"),_.setAttribute("drag-surface",$),_.setAttribute("drag-axes","x,y"),_.setAttribute("drag-snapping",this.#w),_.setAttribute("value",`${this.#Q}% ${this.#Z}%`),J)_.setAttribute("disabled","");if(Q==="color"){_.setAttribute("type","color");let j=this.getAttribute("color");if(j)_.setAttribute("color",j)}else _.setAttribute("type","canvas");if(this.#R)_.setAttribute("hit-area","12 circle"),_.setAttribute("hit-area-mode","delegate");if(this.#$=_,this.#h)this.#_J();if(this.#f)this.#p();if(Z){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#E),j.appendChild(_),this.appendChild(j),this.#K=j}else this.appendChild(_);if(this.#D)this.#a(J,Z,$);if(this.#R)this.#ZJ(J,Z,$);this.#e(this.#$),this.#e(this.#X),this.#e(this.#q),this.#NJ(),this.#JJ(),requestAnimationFrame(()=>this.#m())}#e(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>this.#$J(Q),{capture:!0})}#$J(J){if(K(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#O===null)this.#S=document.body.style.getPropertyValue("cursor"),this.#A=document.body.style.getPropertyPriority("cursor");if(this.#O=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#H)this.#H=(Q)=>{if(Q?.pointerId!==void 0&&this.#O!==null&&Q.pointerId!==this.#O)return;if(Q?.type==="blur")this.#r();else requestAnimationFrame(()=>this.#r())};window.addEventListener("pointerup",this.#H),window.addEventListener("pointercancel",this.#H),window.addEventListener("blur",this.#H)}#r(){if(this.#O===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#S)document.body.style.setProperty("cursor",this.#S,this.#A);else document.body.style.removeProperty("cursor");if(this.#O=null,this.#S="",this.#A="",this.#H)window.removeEventListener("pointerup",this.#H),window.removeEventListener("pointercancel",this.#H),window.removeEventListener("blur",this.#H)}#s(J,Q,Z,$){if(!J)return;let _=()=>!!$?.(),j=()=>{let q=Q();if(!q)return;q.removeAttribute("show"),q.hidePopup?.()},G=()=>{if(_()){j();return}let q=Q();if(!q)return;if(Z)q.setAttribute("text",Z());q.setAttribute("show","true"),q.showPopup?.()},X=()=>{j()};J.addEventListener("pointerenter",G),J.addEventListener("pointerleave",X)}#l(){return this.#k||this.#W||this.#T||this.#M}#JJ(){if(this.#$)this.#s(this.#$,()=>this.#K,()=>this.#E,()=>this.#l()||!!this.#$?.querySelector("fig-color-tip"));if(this.#X)this.#s(this.#X,()=>this.#Y,()=>`Angle ${Math.round(this.#G)}°`,()=>this.#l());if(this.#q)this.#s(this.#q,()=>this.#L,()=>this.#P,()=>this.#l());if(this.#B){let J=this.#B.querySelector(".fig-canvas-control-radius-hit");this.#i(J||this.#B)}if(this.#C==="color"&&this.#$&&this.#K)new MutationObserver(()=>{if(this.#$?.querySelector("fig-color-tip"))this.#K?.removeAttribute("show"),this.#K?.hidePopup?.()}).observe(this.#$,{childList:!0,subtree:!0})}#I(J,Q){let Z=this.#U;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?.()}#i(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#U;if(!Z)return;Z.setAttribute("text",this.#g()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#I(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#T)return;this.#I(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#T)return;let Q=this.#U;if(!Q)return;Q.removeAttribute("show")})}#_J(){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 _=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(_),this.#B=Q,this.#F){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#g()),j.appendChild(Q),this.appendChild(j),this.#U=j}else this.appendChild(Q);this.#LJ(Z)}#p(){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.#R){let _=document.createElementNS("http://www.w3.org/2000/svg","line");_.classList.add("fig-canvas-control-angle-line-hit"),_.setAttribute("stroke","transparent"),_.setAttribute("stroke-width","12"),_.setAttribute("stroke-linecap","round"),_.style.pointerEvents="stroke",Q.appendChild(_),this.#QJ(_)}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.#z=Q,this.appendChild(Q)}#QJ(J){J.addEventListener("pointerdown",(Q)=>{if(K(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#b;if(!Z)return;let $=Z.getBoundingClientRect(),_=Q.clientX,j=Q.clientY,G=this.#Q,X=this.#Z,q=this.#J,B=this.#_;this.#k=!0,this.#W=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let Y=(U)=>{let M=Z.getBoundingClientRect(),L=M.width>0?(U.clientX-_)/M.width*100:0,z=M.height>0?(U.clientY-j)/M.height*100:0,D=-Math.min(G,q),H=100-Math.max(G,q),C=-Math.min(X,B),F=100-Math.max(X,B),W=Math.max(D,Math.min(H,L)),T=Math.max(C,Math.min(F,z));this.#Q=G+W,this.#Z=X+T,this.#J=q+W,this.#_=B+T,this.#m(),this.#V()},N=()=>{document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#d(),this.#n(),window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",N),requestAnimationFrame(()=>{this.#k=!1,this.#W=!1})};window.addEventListener("pointermove",Y),window.addEventListener("pointerup",N)})}#a(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.#X=$,Q){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",`${Math.round(this.#G)}°`),_.appendChild($),this.appendChild(_),this.#Y=_}else this.appendChild($)}#ZJ(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.#w),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#_}%`),J)$.setAttribute("disabled","");if(this.#q=$,Q){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#P),_.appendChild($),this.appendChild(_),this.#L=_}else this.appendChild($)}#jJ(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`}#GJ(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`}#XJ(){if(!this.#X||!this.#D)return;let J=this.#X.querySelector(".fig-handle-hit-area");if(!J)return;J.style.cursor=this.#GJ(this.#G)}#YJ(){return Math.atan2(this.#_-this.#Z,this.#J-this.#Q)*180/Math.PI}#kJ(){if(!this.#R)return;let J=this.#YJ(),Q=(Z,$)=>{if(!Z)return;let _=Z.querySelector(".fig-handle-hit-area");if(_)_.style.cursor=this.#GJ($)};Q(this.#$,J+180),Q(this.#q,J)}#qJ(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`}#m(){let J=this.#b;if(!J||!this.#$)return;let Q=J.getBoundingClientRect();if(this.#qJ(this.#$,this.#Q,this.#Z,Q),this.#B){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_=this.#u(Q.width),j=this.#B,G=Math.max(_*2,1);j.style.position="absolute",j.style.width=`${G}px`,j.style.height=`${G}px`,j.style.left=`${Z-_}px`,j.style.top=`${$-_}px`,j.setAttribute("viewBox",`0 0 ${G} ${G}`);let X=j.querySelectorAll("circle");for(let q of X)q.setAttribute("cx",String(_)),q.setAttribute("cy",String(_)),q.setAttribute("r",String(Math.max(_-1,0)))}if(this.#z&&this.#f){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_,j;if(this.#R)_=this.#J/100*Q.width,j=this.#_/100*Q.height;else{let q=this.#u(Q.width),B=this.#G*Math.PI/180;_=Z+q*Math.cos(B),j=$+q*Math.sin(B)}let G=this.#z;G.style.width=`${Q.width}px`,G.style.height=`${Q.height}px`,G.style.left="0",G.style.top="0",G.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let X=G.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let q of X)q.setAttribute("x1",String(Z)),q.setAttribute("y1",String($)),q.setAttribute("x2",String(_)),q.setAttribute("y2",String(j))}if(this.#X&&this.#D){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_=this.#u(Q.width),j=this.#G*Math.PI/180,G=Z+_*Math.cos(j),X=$+_*Math.sin(j),q=Q.width>0?G/Q.width*100:0,B=Q.height>0?X/Q.height*100:0;this.#qJ(this.#X,q,B,Q)}if(this.#q&&this.#R)this.#qJ(this.#q,this.#J,this.#_,Q);this.#XJ(),this.#kJ()}#V(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#n(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#d(){this.setAttribute("value",JSON.stringify(this.value))}#NJ(){if(!this.#$)return;if(this.#$.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#V();return}this.#k=!0;let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#Z/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#K)this.#K.removeAttribute("show"),this.#K.hidePopup?.();this.#m(),this.#V()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#n();return}let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#Z/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#K)this.#K.removeAttribute("show");this.#m(),this.#d(),this.#n(),requestAnimationFrame(()=>{this.#k=!1})}),this.#X)this.#X.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#b;if(!Q)return;this.#M=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Q/100*Z.width,_=this.#Z/100*Z.height,j=J.detail?.x??0,G=J.detail?.y??0,X=this.#X.offsetWidth/2,q=this.#X.offsetHeight/2,B=j+X-$,Y=G+q-_,N=Math.atan2(Y,B)*180/Math.PI;if(this.#y(J.detail?.shiftKey))N=Math.round(N/15)*15;this.#G=N;let U=Math.sqrt(B*B+Y*Y);if(this.#y(J.detail?.shiftKey)){let M=this.#N?5:10;if(this.#N){let L=U/Z.width*100;L=Math.round(L/M)*M,U=L/100*Z.width}else U=Math.round(U/M)*M}if(this.#N)this.#j=Math.max(0,U/Z.width*100);else this.#j=Math.max(0,U);if(this.#Y)this.#Y.setAttribute("text",`Angle ${Math.round(this.#G)}°`),this.#Y.setAttribute("show","true"),this.#Y.showPopup?.();this.#m(),this.#V()}),this.#X.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#Y)this.#Y.removeAttribute("show");this.#m(),this.#d(),this.#n(),requestAnimationFrame(()=>{this.#M=!1})}),this.#X.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#b;if(!Z)return;if(this.#M=!0,this.classList.add("fig-canvas-control-ring-active"),this.#X.setAttribute("selected",""),this.#Y)this.#Y.setAttribute("show","true"),this.#Y.showPopup?.();let $=(j)=>{let G=Z.getBoundingClientRect(),X=this.#Q/100*G.width,q=this.#Z/100*G.height,B=j.clientX-G.left-X,Y=j.clientY-G.top-q,N=Math.atan2(Y,B)*180/Math.PI;if(this.#y(j.shiftKey))N=Math.round(N/15)*15;if(this.#G=N,this.#Y)this.#Y.setAttribute("text",`Angle ${Math.round(N)}°`);this.#m(),this.#V()},_=()=>{if(this.#M=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#X.removeAttribute("selected"),this.#Y)this.#Y.removeAttribute("show");this.#d(),this.#n(),window.removeEventListener("pointermove",$),window.removeEventListener("pointerup",_)};window.addEventListener("pointermove",$),window.addEventListener("pointerup",_)});if(this.#q)this.#q.addEventListener("input",(J)=>{J.stopPropagation(),this.#W=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#_/100;if(this.#J=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.#m(),this.#V()}),this.#q.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#L)this.#L.removeAttribute("show");this.#m(),this.#d(),this.#n(),requestAnimationFrame(()=>{this.#W=!1})}),this.#KJ(this.#$,!0),this.#KJ(this.#q,!1)}#KJ(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let _=this.#b;if(!_)return;this.#k=!0;let j=_.getBoundingClientRect(),G=Q?this.#J:this.#Q,X=Q?this.#_:this.#Z,q=Q?this.#Q:this.#J,B=Q?this.#Z:this.#_,Y=G/100*j.width,N=X/100*j.height,U=q/100*j.width,M=B/100*j.height,L=Math.sqrt((U-Y)**2+(M-N)**2),z=Q?this.#K:this.#L;if(z)z.removeAttribute("show"),z.hidePopup?.();let D=(C)=>{let F=_.getBoundingClientRect(),W=G/100*F.width,T=X/100*F.height,P=C.clientX-F.left-W,R=C.clientY-F.top-T,O=Math.atan2(R,P);if(this.#y(C.shiftKey))O=Math.round(O*180/Math.PI/15)*15*Math.PI/180;let r=W+L*Math.cos(O),s=T+L*Math.sin(O),I=Math.max(0,Math.min(100,r/F.width*100)),V=Math.max(0,Math.min(100,s/F.height*100));if(Q)this.#Q=I,this.#Z=V;else this.#J=I,this.#_=V;this.#m(),this.#V()},H=()=>{if(this.#k=!1,z)z.removeAttribute("show");this.#d(),this.#n(),window.removeEventListener("pointermove",D),window.removeEventListener("pointerup",H)};window.addEventListener("pointermove",D),window.addEventListener("pointerup",H)})}#LJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#T)return;let $=this.#b;if(!$)return;let _=$.getBoundingClientRect(),j=this.#Q/100*_.width,G=this.#Z/100*_.height,X=Math.atan2(Z.clientY-_.top-G,Z.clientX-_.left-j)*180/Math.PI;J.style.cursor=this.#jJ(X)});let Q=(Z)=>{if(K(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#T=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#b;if(!$)return;if(this.#U)this.#U.setAttribute("show","true"),this.#U.showPopup?.(),this.#I(Z.clientX,Z.clientY);if(this.#Y)this.#Y.removeAttribute("show"),this.#Y.hidePopup?.();let _=this.#X?.style.pointerEvents,j=this.#X?.querySelector(".fig-handle-hit-area"),G=j?.style.pointerEvents;if(this.#X)this.#X.style.pointerEvents="none";if(j)j.style.pointerEvents="none";let X=document.body.style.cursor;J.style.pointerEvents="none";let q=$.getBoundingClientRect(),B=this.#Q/100*q.width,Y=this.#Z/100*q.height,N=Math.atan2(Z.clientY-q.top-Y,Z.clientX-q.left-B)*180/Math.PI,U=Math.round(N);document.body.style.cursor=this.#jJ(U);let M=(z)=>{let D=$.getBoundingClientRect(),H=this.#Q/100*D.width,C=this.#Z/100*D.height,F=z.clientX-D.left-H,W=z.clientY-D.top-C,T=Math.round(Math.atan2(W,F)*180/Math.PI);if(T!==U)U=T,document.body.style.cursor=this.#jJ(T);let P=Math.sqrt(F*F+W*W);if(this.#y(z.shiftKey)){let R=this.#N?5:10;if(this.#N){let O=P/D.width*100;O=Math.round(O/R)*R,P=O/100*D.width}else P=Math.round(P/R)*R}if(this.#N)this.#j=Math.max(0,P/D.width*100);else this.#j=Math.max(0,P);if(this.#U)this.#U.setAttribute("text",this.#g()),this.#I(z.clientX,z.clientY);this.#m(),this.#V()},L=()=>{if(this.#T=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#X)this.#X.style.pointerEvents=_??"";if(j)j.style.pointerEvents=G??"";if(document.body.style.cursor=X,this.#U)this.#U.removeAttribute("show");this.#d(),this.#n(),window.removeEventListener("pointermove",M),window.removeEventListener("pointerup",L)};window.addEventListener("pointermove",M),window.addEventListener("pointerup",L)};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#UJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",g);class k extends HTMLElement{#Q=[k.#A()];#Z=0;#J=2;#_=240;#j=120;#N={min:-1,max:1};#G=null;#$=null;#q=null;#X=null;#B=0;#z=null;#K=null;#L=null;#U=null;#Y=[];#k=[];#W=[];#T=[];#M=new Set;#O=null;#S=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#A(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.#J=this.#H("precision",2),this.#f(this.getAttribute("value")),this.#R(),this.#g(),this.#I()}disconnectedCallback(){if(this.#G=null,this.#GJ(),this.#O)this.#O.disconnect(),this.#O=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#f(Z),this.isConnected)this.#g();return}if(J==="precision"){if(this.#J=this.#H("precision",2),this.isConnected)this.#BJ();return}if(J==="aspect-ratio"){if(this.#R(),this.#$)this.#ZJ();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#g()}}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.#w(J))}}get preset(){let J=this.#y;return k.TYPES.find((Q)=>Q.value===J.type)?.name}#H(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}#h(){return this.getAttribute("edit")!=="false"}#D(){return this.#C("disabled",!1)}#R(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#f(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.#F($)),!this.#Q.length)this.#Q=[k.#A()];return this.#Z=Math.min(this.#Z,this.#Q.length-1),!0}#F(J={}){return{type:this.#E(J.type),frequency:this.#P(J.frequency,1,0.1,16),amplitude:this.#P(J.amplitude,1,-4,4),phase:this.#P(J.phase,0,-360,360),offset:this.#P(J.offset,0,-4,4)}}#w(J){return{type:J.type,frequency:this.#c(J.frequency),amplitude:this.#c(J.amplitude),phase:this.#c(J.phase),offset:this.#c(J.offset)}}get#y(){if(!this.#Q[this.#Z])this.#Z=0;return this.#Q[this.#Z]||k.#A()}#E(J){let Q=String(J||"").toLowerCase();return k.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#P(J,Q,Z,$){let _=Number.parseFloat(J);if(!Number.isFinite(_))return Q;return Math.min($,Math.max(Z,_))}#c(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#b(J){return String(J).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}static#t(J){return k.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let _=Q-10,j="";for(let G=0;G<=32;G++){let X=G/32,q=k.#u(J,X),B=5+X*_,Y=5+(1-(q+1)/2)*_;j+=`${G===0?"M":"L"}${B.toFixed(1)},${Y.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${j}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#u(J,Q,Z=0){let $=Q+Z/360,_=$-Math.floor($),j=$*Math.PI*2;switch(J){case"square":return Math.sin(j)>=0?1:-1;case"sawtooth":return _*2-1;case"triangle":return 1-Math.abs(_*4-2);default:return Math.sin(j)}}#g(){this.#GJ(),this.innerHTML=this.#x(),this.#s(),this.#i(),this.#ZJ(),this.#m(),this.#jJ()}#x(){let J=this.#D()?" disabled":"";return`<div class="propskit-oscillator-svg-container">
1
+ function K(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}class E extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#X=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#G();if(this.#B(),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.#B();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#K(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#B()}#G(){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"),_=document.createElement("fig-segmented-control"),j=document.createElement("fig-segment"),G=document.createElement("fig-segment");_.setAttribute("sizing","equal"),j.setAttribute("value","off"),j.textContent="Off",G.setAttribute("value","on"),G.textContent="On",_.append(j,G),Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z)}#B(){if(!this.#Q||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#z(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","checked","value"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("value",K(this,"checked")?"on":"off"),this.#N=Q}#L(){if(!this.#J)return;this.#X??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#K(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.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}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-segmented-control"))return;let Q=this.#J?.value==="on"?"off":"on";this.#J?.querySelector(`fig-segment[value="${Q}"]`)?.click()}get checked(){return this.#J?this.#J.value==="on":K(this,"checked")}set checked(J){this.toggleAttribute("checked",Boolean(J))}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){this.setAttribute("value",J??"")}focus(J){(this.#J?.querySelector("fig-segment[selected]")||this.#J?.querySelector("fig-segment"))?.focus(J)}}customElements.define("propskit-switch",E);class y extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#X=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Q)this.#G();if(this.#B(),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.#B();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#K(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label")this.#B()}#G(){let J=Array.from(this.childNodes).filter((j)=>j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-input-color");for(let j of J)if(j!==Q)_.appendChild(j);Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z)}#B(){if(!this.#Q||!this.#Z||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Z.textContent?.trim()||"Color")}#z(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("text","true"),this.#N=Q}#L(){if(!this.#J)return;this.#X??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#K(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.getAttribute("value")??"";this.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}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-input-color"))return;this.focus()}get value(){return this.#J?.getAttribute("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.#J?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}customElements.define("propskit-color",y);class b extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#X=null;#$=null;#q=this.#H.bind(this);#G=this.#M.bind(this);#B=!1;static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Q)this.#z();if(this.#U(),this.#K(),this.#Y(),this.removeEventListener("click",this.#q),this.addEventListener("click",this.#q),this.removeEventListener("pointerdown",this.#G,!0),this.addEventListener("pointerdown",this.#G,!0),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;let _=$.attributeName;if(_==="label"||_==="direction"||_==="aria-label")Q=!0;else Z=!0}if(Q)this.#U();if(Z)this.#K()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#k(),this.removeEventListener("click",this.#q),this.removeEventListener("pointerdown",this.#G,!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.#K()}#z(){let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");Q.append(Z,$),this.#Q=Q,this.#Z=Z,this.#J=$,this.#_=Boolean(J),this.replaceChildren(Q)}#U(){if(!this.#Q||!this.#Z||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("label",this.getAttribute("aria-label")||this.#Z.textContent?.trim()||"Select")}#L(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#K(){if(!this.#J)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.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#Y(){if(!this.#J)return;this.#X??=this.#F.bind(this,"input"),this.#$??=this.#F.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#k(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#F(J,Q){if(Q.target!==this.#J)return;Q.stopImmediatePropagation();let Z=this.#J?.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}))}#W(){if(!this.#J)return!1;if(this.#J.open)return!0;let J=this.#J.shadowRoot?.querySelector('dialog[is="fig-popup"]');return Boolean(J?.open||J?.matches?.(":open"))}#M(J){if(!(J.target instanceof Element))return;if(J.target.closest("fig-select")){this.#B=!1;return}this.#B=this.#W()}#H(J){if(J.target instanceof Element&&J.target.closest("fig-select")){this.#B=!1;return}if(!this.#J||K(this.#J,"disabled")){this.#B=!1;return}if(this.#J.focus(),this.#B||this.#W()){this.#B=!1,this.#J.open=!1;return}this.#J.open=!0}get value(){return this.#J?.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.#J?.focus(J)}}customElements.define("propskit-select",b);class x extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#X=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Q)this.#G();if(this.#B(),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.#B();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#K(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction"||J==="aria-label")this.#B()}#G(){let J=Array.from(this.childNodes).filter((j)=>j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-input-text");for(let j of J)if(j!==Q)_.appendChild(j);Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z)}#B(){if(!this.#Q||!this.#Z||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Z.textContent?.trim()||"Text")}#z(){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.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#L(){if(!this.#J)return;this.#X??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#K(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.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}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-input-text"))return;this.focus()}get value(){return this.#J?.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.#J?.focus(J)}}customElements.define("propskit-text",x);class w extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#X=null;#$=null;#q=this.#k.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#G();if(this.#B(),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.#B();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#K(),this.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#B()}#G(){let J=Array.from(this.childNodes).filter((j)=>j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-input-number");Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z);for(let j of J)if(j!==Q)_.appendChild(j)}#B(){if(!this.#Q||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Z.remove();else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#z(){let J=new Set(["label","direction","oninput","onchange","class","style","id"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#J)return;let J=this.#z(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#L(){if(!this.#J)return;this.#X??=this.#Y.bind(this,"input"),this.#$??=this.#Y.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#K(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#Y(J,Q){Q.stopImmediatePropagation();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0)this.setAttribute("value",String(this.#J.value));this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#k(J){if(J.target instanceof Element&&J.target.closest("fig-input-number"))return;this.focus()}get value(){return this.#J?.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.#J?.focus(J)}}customElements.define("propskit-number",w);class h extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#j=null;#N=new Set;#X=0;#$=0;#q=null;#G=null;#B=0;#z=null;#U=!1;#L=0;#K=null;#Y=0;#k=null;#F=null;#W=null;#M=this.#u.bind(this);#H=this.#g.bind(this);#C=this.#x.bind(this);#A=this.#t.bind(this);#P=this.#e.bind(this);#O=this.#r.bind(this);#h=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.#D();if(this.#f(),this.#T(),this.#jJ(),this.#E(),this.removeEventListener("pointerdown",this.#M,{capture:!0}),this.addEventListener("pointerdown",this.#M,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#P),this.addEventListener("contextmenu",this.#P),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName&&this.#h.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#f();if(Z)this.#T(),this.#E()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#X)cancelAnimationFrame(this.#X),this.#X=0;if(this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#s(),this.#v(),this.#I(),this.#b(),this.#GJ(),this.removeEventListener("pointerdown",this.#M,{capture:!0}),this.removeEventListener("contextmenu",this.#P),this.#G?.removeEventListener("change",this.#O)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#f()}#D(){let J=Array.from(this.childNodes).filter((j)=>{return j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())}),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-slider");_.setAttribute("text","true");for(let j of this.#w()){let G=this.getAttribute(j);_.setAttribute(j,G??"")}Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z),this.#R();for(let j of J){if(j===Q)continue;this.#J.appendChild(j)}}#R(){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.#O),this.#G=J,this.appendChild(J)}#f(){if(!this.#Q||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Z.parentElement===this.#Q)this.#Z.remove()}else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#T(){if(!this.#J)return;let J=this.#w(),Q=new Set(J.filter(($)=>$!=="text"));for(let $ of this.#N)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text")continue;let _=this.getAttribute($);this.#J.setAttribute($,_??"")}this.#J.removeAttribute("variant"),this.#J.removeAttribute("color"),this.#J.removeAttribute("transform"),this.#J.removeAttribute("full"),this.#J.setAttribute("text","true");let Z=(this.getAttribute("type")||"range").toLowerCase();if(Z==="delta"||Z==="stepper")this.#J.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#J.removeAttribute("default");if(Z==="stepper")this.#J.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#J.removeAttribute("step");if(Z==="opacity")this.#J.style.setProperty("--color","light-dark(#444444, #e6e6e6)");else this.#J.style.removeProperty("--color");this.#N=Q,this.#y()}#w(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#h.has(Q))}#y(){if(this.#X)cancelAnimationFrame(this.#X);this.#X=requestAnimationFrame(()=>{this.#X=0,this.#ZJ(),this.#S()})}#E(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#S()})}#S(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#q)this.#c(J);J?.removeAttribute("tabindex"),Q?.setAttribute("tabindex","-1")}#c(J){if(this.#b(),this.#q=J,!this.#q)return;this.#q.addEventListener("dblclick",this.#A,{capture:!0})}#b(){if(!this.#q)return;this.#q.removeEventListener("dblclick",this.#A,{capture:!0}),this.#q=null}#t(J){J.preventDefault(),J.stopImmediatePropagation(),this.#QJ()}#u(J){if(J.button!==0||K(this,"disabled"))return;if(this.getAttribute("elastic")==="false")return;if(J.target?.closest?.("fig-input-number"))return;let Q=this.#J?.querySelector('input[type="range"]')??this.#q;if(!Q)return;this.#v(),this.#I(),this.#q=Q,this.#U=!0,this.#k=J.pointerId,this.#L=this.#l();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#K={left:Z.left,right:Z.right,width:Z.width},this.#Y=$.width,window.addEventListener("pointermove",this.#H,{passive:!0}),window.addEventListener("pointerup",this.#C,{once:!0}),window.addEventListener("pointercancel",this.#C,{once:!0}),window.addEventListener("blur",this.#C,{once:!0})}#g(J){if(!this.#U)return;if(J.pointerId!==this.#k)return;if(J.buttons===0){this.#x(J);return}this.#JJ(J.clientX)}#x(J){if(J?.pointerId!==void 0&&this.#k!==null&&J.pointerId!==this.#k)return;this.#v(),this.#I()}#v(){window.removeEventListener("pointermove",this.#H),window.removeEventListener("pointerup",this.#C),window.removeEventListener("pointercancel",this.#C),window.removeEventListener("blur",this.#C),this.#U=!1,this.#k=null}#e(J){if(K(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#s(),this.#$J(J.clientX,J.clientY)}#$J(J,Q){let Z=!1,$=0,_=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",_,!0),window.removeEventListener("pointercancel",_,!0),requestAnimationFrame(()=>{this.#G?.showAt?.(J,Q)})};window.addEventListener("pointerup",_,{once:!0,capture:!0}),window.addEventListener("pointercancel",_,{once:!0,capture:!0}),$=window.setTimeout(_,180)}#r(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#QJ()}#s(){if(this.#B)clearTimeout(this.#B),this.#B=0;this.#z=null}#l(){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}#JJ(J){let Q=this.#K;if(!Q||!this.#L){this.#I();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#i();return}let $=Math.max(-this.#L,Math.min(this.#L,Z*0.5)),_=Math.abs($),j=this.#Y?(this.#Y+_)/this.#Y:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${_}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${j}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#I(){this.#i(),this.#L=0,this.#K=null,this.#Y=0,this.#k=null}#i(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#_J(J){let Q=this.#q;if(!Q)return this.#J?.value??"";let Z=Q.getBoundingClientRect(),$=Z.width?Math.min(1,Math.max(0,(J.clientX-Z.left)/Z.width)):0,_=Number(Q.min||0),j=Number(Q.max||100),G=Q.step==="any"?0:Number(Q.step||1),X=_+(j-_)*$;if(!G)return String(X);let q=Math.round((X-_)/G)*G+_,B=Math.max(0,`${G}`.split(".")[1]?.length||0);return String(Number(q.toFixed(B)))}#p(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.getAttribute("value")??this.#J?.getAttribute("value")??this.#q?.min??"0"}#QJ(){this.#s(),this.#a(this.#p(),"input"),this.#a(this.#p(),"change")}#a(J,Q){if(!this.#J||J===null||J===void 0)return;this.#J.value=J,this.dispatchEvent(new CustomEvent(Q,{detail:this.#J.value,bubbles:!0,cancelable:!0,composed:!0}))}#ZJ(){if(!this.#J)return;let J=this.#J.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??"")}#jJ(){if(!this.#J)return;if(!this.#F)this.#F=this.#XJ.bind(this,"input");if(!this.#W)this.#W=this.#XJ.bind(this,"change");this.#J.addEventListener("input",this.#F),this.#J.addEventListener("change",this.#W)}#GJ(){if(!this.#J)return;if(this.#F)this.#J.removeEventListener("input",this.#F);if(this.#W)this.#J.removeEventListener("change",this.#W)}#XJ(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#I();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector('input[type="range"]')?.focus(J)}resetToDefault(){this.#QJ()}}customElements.define("propskit-slider",h);class g extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Q=50;#Z=50;#J=75;#_=75;#j=0;#N=!1;#X=0;#$=null;#q=null;#G=null;#B=null;#z=null;#U=null;#L=null;#K=null;#Y=null;#k=!1;#F=!1;#W=!1;#M=!1;#H=null;#C="";#A="";#P=null;get#O(){return this.getAttribute("type")||"point"}get#h(){return this.#O==="point-radius"||this.#O==="point-radius-angle"}get#D(){return this.#O==="point-radius-angle"}get#R(){return this.#O==="point-point"}get#f(){return this.#O==="point-radius-angle"||this.#O==="point-point"}get#T(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#w(){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"}#y(J){let Q=this.#w;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#E(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Q)}%, ${Math.round(this.#Z)}%`}get#S(){let J=this.getAttribute("name");if(J){let Q=J.split(",");if(Q.length>1)return Q[1].trim()}return`${Math.round(this.#J)}%, ${Math.round(this.#_)}%`}get#c(){return this.getAttribute("drag-surface")||"parent"}get#b(){let J=this.#c;if(J==="parent")return this.parentElement;return this.closest(J)}get#t(){let J=this.#c;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#u(J){if(this.#N)return this.#j/100*J;return this.#j}#g(){if(this.#N)return`Radius ${Math.round(this.#j)}%`;return`Radius ${Math.round(this.#j)}`}connectedCallback(){this.#x(),this.#v()}disconnectedCallback(){this.#UJ(),this.#r(),document.body.classList.remove("fig-lab-move-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#k&&!this.#F&&!this.#W&&!this.#M)if(this.#x(),this.#$)this.#m();else this.#v();if(J==="type")this.#x(),this.#v();if(J==="color"&&this.#$)if(Z)this.#$.setAttribute("color",Z);else this.#$.removeAttribute("color");if(J==="disabled")this.#v();if(J==="tooltips")this.#v();if(J==="snapping"&&this.#$){if(this.#$.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.#E);if(this.#L)this.#L.setAttribute("text",this.#S)}}#x(){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.#Z=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#N=!0,this.#j=parseFloat(Z);else this.#N=!1,this.#j=parseFloat(Z);if(!Number.isFinite(this.#j))this.#j=0}if(typeof Q.angle==="number")this.#X=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#_=Q.y2}catch{}}get value(){let J={x:this.#Q,y:this.#Z};if(this.#O==="color"){let Q=this.getAttribute("color")||this.#$?.getAttribute("color");if(Q)J.color=Q}if(this.#h)J.radius=this.#N?`${this.#j}%`:this.#j;if(this.#D)J.angle=this.#X;if(this.#R)J.x2=this.#J,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)}#v(){this.innerHTML="",this.#$=null,this.#q=null,this.#G=null,this.#B=null,this.#z=null,this.#U=null,this.#L=null,this.#K=null,this.#Y=null;let J=K(this,"disabled"),Q=this.#O,Z=this.#T,$=this.#t,_=document.createElement("fig-handle");if(_.setAttribute("drag","true"),_.setAttribute("drag-surface",$),_.setAttribute("drag-axes","x,y"),_.setAttribute("drag-snapping",this.#w),_.setAttribute("value",`${this.#Q}% ${this.#Z}%`),J)_.setAttribute("disabled","");if(Q==="color"){_.setAttribute("type","color");let j=this.getAttribute("color");if(j)_.setAttribute("color",j)}else _.setAttribute("type","canvas");if(this.#R)_.setAttribute("hit-area","12 circle"),_.setAttribute("hit-area-mode","delegate");if(this.#$=_,this.#h)this.#_J();if(this.#f)this.#p();if(Z){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#E),j.appendChild(_),this.appendChild(j),this.#U=j}else this.appendChild(_);if(this.#D)this.#a(J,Z,$);if(this.#R)this.#ZJ(J,Z,$);this.#e(this.#$),this.#e(this.#G),this.#e(this.#q),this.#NJ(),this.#JJ(),requestAnimationFrame(()=>this.#m())}#e(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>this.#$J(Q),{capture:!0})}#$J(J){if(K(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#H===null)this.#C=document.body.style.getPropertyValue("cursor"),this.#A=document.body.style.getPropertyPriority("cursor");if(this.#H=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#P)this.#P=(Q)=>{if(Q?.pointerId!==void 0&&this.#H!==null&&Q.pointerId!==this.#H)return;if(Q?.type==="blur")this.#r();else requestAnimationFrame(()=>this.#r())};window.addEventListener("pointerup",this.#P),window.addEventListener("pointercancel",this.#P),window.addEventListener("blur",this.#P)}#r(){if(this.#H===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#C)document.body.style.setProperty("cursor",this.#C,this.#A);else document.body.style.removeProperty("cursor");if(this.#H=null,this.#C="",this.#A="",this.#P)window.removeEventListener("pointerup",this.#P),window.removeEventListener("pointercancel",this.#P),window.removeEventListener("blur",this.#P)}#s(J,Q,Z,$){if(!J)return;let _=()=>!!$?.(),j=()=>{let q=Q();if(!q)return;q.removeAttribute("show"),q.hidePopup?.()},G=()=>{if(_()){j();return}let q=Q();if(!q)return;if(Z)q.setAttribute("text",Z());q.setAttribute("show","true"),q.showPopup?.()},X=()=>{j()};J.addEventListener("pointerenter",G),J.addEventListener("pointerleave",X)}#l(){return this.#k||this.#F||this.#W||this.#M}#JJ(){if(this.#$)this.#s(this.#$,()=>this.#U,()=>this.#E,()=>this.#l()||!!this.#$?.querySelector("fig-color-tip"));if(this.#G)this.#s(this.#G,()=>this.#Y,()=>`Angle ${Math.round(this.#X)}°`,()=>this.#l());if(this.#q)this.#s(this.#q,()=>this.#L,()=>this.#S,()=>this.#l());if(this.#B){let J=this.#B.querySelector(".fig-canvas-control-radius-hit");this.#i(J||this.#B)}if(this.#O==="color"&&this.#$&&this.#U)new MutationObserver(()=>{if(this.#$?.querySelector("fig-color-tip"))this.#U?.removeAttribute("show"),this.#U?.hidePopup?.()}).observe(this.#$,{childList:!0,subtree:!0})}#I(J,Q){let Z=this.#K;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?.()}#i(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#K;if(!Z)return;Z.setAttribute("text",this.#g()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#I(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#W)return;this.#I(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#W)return;let Q=this.#K;if(!Q)return;Q.removeAttribute("show")})}#_J(){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 _=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(_),this.#B=Q,this.#T){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#g()),j.appendChild(Q),this.appendChild(j),this.#K=j}else this.appendChild(Q);this.#LJ(Z)}#p(){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.#R){let _=document.createElementNS("http://www.w3.org/2000/svg","line");_.classList.add("fig-canvas-control-angle-line-hit"),_.setAttribute("stroke","transparent"),_.setAttribute("stroke-width","12"),_.setAttribute("stroke-linecap","round"),_.style.pointerEvents="stroke",Q.appendChild(_),this.#QJ(_)}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.#z=Q,this.appendChild(Q)}#QJ(J){J.addEventListener("pointerdown",(Q)=>{if(K(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#b;if(!Z)return;let $=Z.getBoundingClientRect(),_=Q.clientX,j=Q.clientY,G=this.#Q,X=this.#Z,q=this.#J,B=this.#_;this.#k=!0,this.#F=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let Y=(U)=>{let M=Z.getBoundingClientRect(),L=M.width>0?(U.clientX-_)/M.width*100:0,z=M.height>0?(U.clientY-j)/M.height*100:0,D=-Math.min(G,q),H=100-Math.max(G,q),O=-Math.min(X,B),F=100-Math.max(X,B),W=Math.max(D,Math.min(H,L)),T=Math.max(O,Math.min(F,z));this.#Q=G+W,this.#Z=X+T,this.#J=q+W,this.#_=B+T,this.#m(),this.#V()},N=()=>{document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#d(),this.#n(),window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",N),requestAnimationFrame(()=>{this.#k=!1,this.#F=!1})};window.addEventListener("pointermove",Y),window.addEventListener("pointerup",N)})}#a(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.#G=$,Q){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",`${Math.round(this.#X)}°`),_.appendChild($),this.appendChild(_),this.#Y=_}else this.appendChild($)}#ZJ(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.#w),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#_}%`),J)$.setAttribute("disabled","");if(this.#q=$,Q){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#S),_.appendChild($),this.appendChild(_),this.#L=_}else this.appendChild($)}#jJ(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`}#GJ(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`}#XJ(){if(!this.#G||!this.#D)return;let J=this.#G.querySelector(".fig-handle-hit-area");if(!J)return;J.style.cursor=this.#GJ(this.#X)}#YJ(){return Math.atan2(this.#_-this.#Z,this.#J-this.#Q)*180/Math.PI}#kJ(){if(!this.#R)return;let J=this.#YJ(),Q=(Z,$)=>{if(!Z)return;let _=Z.querySelector(".fig-handle-hit-area");if(_)_.style.cursor=this.#GJ($)};Q(this.#$,J+180),Q(this.#q,J)}#qJ(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`}#m(){let J=this.#b;if(!J||!this.#$)return;let Q=J.getBoundingClientRect();if(this.#qJ(this.#$,this.#Q,this.#Z,Q),this.#B){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_=this.#u(Q.width),j=this.#B,G=Math.max(_*2,1);j.style.position="absolute",j.style.width=`${G}px`,j.style.height=`${G}px`,j.style.left=`${Z-_}px`,j.style.top=`${$-_}px`,j.setAttribute("viewBox",`0 0 ${G} ${G}`);let X=j.querySelectorAll("circle");for(let q of X)q.setAttribute("cx",String(_)),q.setAttribute("cy",String(_)),q.setAttribute("r",String(Math.max(_-1,0)))}if(this.#z&&this.#f){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_,j;if(this.#R)_=this.#J/100*Q.width,j=this.#_/100*Q.height;else{let q=this.#u(Q.width),B=this.#X*Math.PI/180;_=Z+q*Math.cos(B),j=$+q*Math.sin(B)}let G=this.#z;G.style.width=`${Q.width}px`,G.style.height=`${Q.height}px`,G.style.left="0",G.style.top="0",G.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let X=G.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let q of X)q.setAttribute("x1",String(Z)),q.setAttribute("y1",String($)),q.setAttribute("x2",String(_)),q.setAttribute("y2",String(j))}if(this.#G&&this.#D){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_=this.#u(Q.width),j=this.#X*Math.PI/180,G=Z+_*Math.cos(j),X=$+_*Math.sin(j),q=Q.width>0?G/Q.width*100:0,B=Q.height>0?X/Q.height*100:0;this.#qJ(this.#G,q,B,Q)}if(this.#q&&this.#R)this.#qJ(this.#q,this.#J,this.#_,Q);this.#XJ(),this.#kJ()}#V(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#n(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#d(){this.setAttribute("value",JSON.stringify(this.value))}#NJ(){if(!this.#$)return;if(this.#$.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#V();return}this.#k=!0;let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#Z/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#U)this.#U.removeAttribute("show"),this.#U.hidePopup?.();this.#m(),this.#V()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#n();return}let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#Z/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#U)this.#U.removeAttribute("show");this.#m(),this.#d(),this.#n(),requestAnimationFrame(()=>{this.#k=!1})}),this.#G)this.#G.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#b;if(!Q)return;this.#M=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Q/100*Z.width,_=this.#Z/100*Z.height,j=J.detail?.x??0,G=J.detail?.y??0,X=this.#G.offsetWidth/2,q=this.#G.offsetHeight/2,B=j+X-$,Y=G+q-_,N=Math.atan2(Y,B)*180/Math.PI;if(this.#y(J.detail?.shiftKey))N=Math.round(N/15)*15;this.#X=N;let U=Math.sqrt(B*B+Y*Y);if(this.#y(J.detail?.shiftKey)){let M=this.#N?5:10;if(this.#N){let L=U/Z.width*100;L=Math.round(L/M)*M,U=L/100*Z.width}else U=Math.round(U/M)*M}if(this.#N)this.#j=Math.max(0,U/Z.width*100);else this.#j=Math.max(0,U);if(this.#Y)this.#Y.setAttribute("text",`Angle ${Math.round(this.#X)}°`),this.#Y.setAttribute("show","true"),this.#Y.showPopup?.();this.#m(),this.#V()}),this.#G.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#Y)this.#Y.removeAttribute("show");this.#m(),this.#d(),this.#n(),requestAnimationFrame(()=>{this.#M=!1})}),this.#G.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#b;if(!Z)return;if(this.#M=!0,this.classList.add("fig-canvas-control-ring-active"),this.#G.setAttribute("selected",""),this.#Y)this.#Y.setAttribute("show","true"),this.#Y.showPopup?.();let $=(j)=>{let G=Z.getBoundingClientRect(),X=this.#Q/100*G.width,q=this.#Z/100*G.height,B=j.clientX-G.left-X,Y=j.clientY-G.top-q,N=Math.atan2(Y,B)*180/Math.PI;if(this.#y(j.shiftKey))N=Math.round(N/15)*15;if(this.#X=N,this.#Y)this.#Y.setAttribute("text",`Angle ${Math.round(N)}°`);this.#m(),this.#V()},_=()=>{if(this.#M=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#G.removeAttribute("selected"),this.#Y)this.#Y.removeAttribute("show");this.#d(),this.#n(),window.removeEventListener("pointermove",$),window.removeEventListener("pointerup",_)};window.addEventListener("pointermove",$),window.addEventListener("pointerup",_)});if(this.#q)this.#q.addEventListener("input",(J)=>{J.stopPropagation(),this.#F=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#_/100;if(this.#J=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.#m(),this.#V()}),this.#q.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#L)this.#L.removeAttribute("show");this.#m(),this.#d(),this.#n(),requestAnimationFrame(()=>{this.#F=!1})}),this.#KJ(this.#$,!0),this.#KJ(this.#q,!1)}#KJ(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let _=this.#b;if(!_)return;this.#k=!0;let j=_.getBoundingClientRect(),G=Q?this.#J:this.#Q,X=Q?this.#_:this.#Z,q=Q?this.#Q:this.#J,B=Q?this.#Z:this.#_,Y=G/100*j.width,N=X/100*j.height,U=q/100*j.width,M=B/100*j.height,L=Math.sqrt((U-Y)**2+(M-N)**2),z=Q?this.#U:this.#L;if(z)z.removeAttribute("show"),z.hidePopup?.();let D=(O)=>{let F=_.getBoundingClientRect(),W=G/100*F.width,T=X/100*F.height,P=O.clientX-F.left-W,R=O.clientY-F.top-T,S=Math.atan2(R,P);if(this.#y(O.shiftKey))S=Math.round(S*180/Math.PI/15)*15*Math.PI/180;let r=W+L*Math.cos(S),s=T+L*Math.sin(S),I=Math.max(0,Math.min(100,r/F.width*100)),V=Math.max(0,Math.min(100,s/F.height*100));if(Q)this.#Q=I,this.#Z=V;else this.#J=I,this.#_=V;this.#m(),this.#V()},H=()=>{if(this.#k=!1,z)z.removeAttribute("show");this.#d(),this.#n(),window.removeEventListener("pointermove",D),window.removeEventListener("pointerup",H)};window.addEventListener("pointermove",D),window.addEventListener("pointerup",H)})}#LJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#W)return;let $=this.#b;if(!$)return;let _=$.getBoundingClientRect(),j=this.#Q/100*_.width,G=this.#Z/100*_.height,X=Math.atan2(Z.clientY-_.top-G,Z.clientX-_.left-j)*180/Math.PI;J.style.cursor=this.#jJ(X)});let Q=(Z)=>{if(K(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#W=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#b;if(!$)return;if(this.#K)this.#K.setAttribute("show","true"),this.#K.showPopup?.(),this.#I(Z.clientX,Z.clientY);if(this.#Y)this.#Y.removeAttribute("show"),this.#Y.hidePopup?.();let _=this.#G?.style.pointerEvents,j=this.#G?.querySelector(".fig-handle-hit-area"),G=j?.style.pointerEvents;if(this.#G)this.#G.style.pointerEvents="none";if(j)j.style.pointerEvents="none";let X=document.body.style.cursor;J.style.pointerEvents="none";let q=$.getBoundingClientRect(),B=this.#Q/100*q.width,Y=this.#Z/100*q.height,N=Math.atan2(Z.clientY-q.top-Y,Z.clientX-q.left-B)*180/Math.PI,U=Math.round(N);document.body.style.cursor=this.#jJ(U);let M=(z)=>{let D=$.getBoundingClientRect(),H=this.#Q/100*D.width,O=this.#Z/100*D.height,F=z.clientX-D.left-H,W=z.clientY-D.top-O,T=Math.round(Math.atan2(W,F)*180/Math.PI);if(T!==U)U=T,document.body.style.cursor=this.#jJ(T);let P=Math.sqrt(F*F+W*W);if(this.#y(z.shiftKey)){let R=this.#N?5:10;if(this.#N){let S=P/D.width*100;S=Math.round(S/R)*R,P=S/100*D.width}else P=Math.round(P/R)*R}if(this.#N)this.#j=Math.max(0,P/D.width*100);else this.#j=Math.max(0,P);if(this.#K)this.#K.setAttribute("text",this.#g()),this.#I(z.clientX,z.clientY);this.#m(),this.#V()},L=()=>{if(this.#W=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#G)this.#G.style.pointerEvents=_??"";if(j)j.style.pointerEvents=G??"";if(document.body.style.cursor=X,this.#K)this.#K.removeAttribute("show");this.#d(),this.#n(),window.removeEventListener("pointermove",M),window.removeEventListener("pointerup",L)};window.addEventListener("pointermove",M),window.addEventListener("pointerup",L)};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#UJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",g);class k extends HTMLElement{#Q=[k.#A()];#Z=0;#J=2;#_=240;#j=120;#N={min:-1,max:1};#X=null;#$=null;#q=null;#G=null;#B=0;#z=null;#U=null;#L=null;#K=null;#Y=[];#k=[];#F=[];#W=[];#M=new Set;#H=null;#C=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#A(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.#J=this.#P("precision",2),this.#f(this.getAttribute("value")),this.#R(),this.#g(),this.#I()}disconnectedCallback(){if(this.#X=null,this.#GJ(),this.#H)this.#H.disconnect(),this.#H=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#f(Z),this.isConnected)this.#g();return}if(J==="precision"){if(this.#J=this.#P("precision",2),this.isConnected)this.#BJ();return}if(J==="aspect-ratio"){if(this.#R(),this.#$)this.#ZJ();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#g()}}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.#w(J))}}get preset(){let J=this.#y;return k.TYPES.find((Q)=>Q.value===J.type)?.name}#P(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Math.max(0,Math.min(100,Z)):Q}#O(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}#h(){return this.getAttribute("edit")!=="false"}#D(){return this.#O("disabled",!1)}#R(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#f(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.#T($)),!this.#Q.length)this.#Q=[k.#A()];return this.#Z=Math.min(this.#Z,this.#Q.length-1),!0}#T(J={}){return{type:this.#E(J.type),frequency:this.#S(J.frequency,1,0.1,16),amplitude:this.#S(J.amplitude,1,-4,4),phase:this.#S(J.phase,0,-360,360),offset:this.#S(J.offset,0,-4,4)}}#w(J){return{type:J.type,frequency:this.#c(J.frequency),amplitude:this.#c(J.amplitude),phase:this.#c(J.phase),offset:this.#c(J.offset)}}get#y(){if(!this.#Q[this.#Z])this.#Z=0;return this.#Q[this.#Z]||k.#A()}#E(J){let Q=String(J||"").toLowerCase();return k.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#S(J,Q,Z,$){let _=Number.parseFloat(J);if(!Number.isFinite(_))return Q;return Math.min($,Math.max(Z,_))}#c(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#b(J){return String(J).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}static#t(J){return k.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let _=Q-10,j="";for(let G=0;G<=32;G++){let X=G/32,q=k.#u(J,X),B=5+X*_,Y=5+(1-(q+1)/2)*_;j+=`${G===0?"M":"L"}${B.toFixed(1)},${Y.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${j}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#u(J,Q,Z=0){let $=Q+Z/360,_=$-Math.floor($),j=$*Math.PI*2;switch(J){case"square":return Math.sin(j)>=0?1:-1;case"sawtooth":return _*2-1;case"triangle":return 1-Math.abs(_*4-2);default:return Math.sin(j)}}#g(){this.#GJ(),this.innerHTML=this.#x(),this.#s(),this.#i(),this.#ZJ(),this.#m(),this.#jJ()}#x(){let J=this.#D()?" disabled":"";return`<div class="propskit-oscillator-svg-container">
2
2
  <svg viewBox="0 0 ${this.#_} ${this.#j}" class="propskit-oscillator-svg">
3
3
  <rect class="propskit-oscillator-bounds" x="0" y="0" width="${this.#_}" height="${this.#j}"></rect>
4
4
  <line class="propskit-oscillator-baseline"></line>
@@ -32,7 +32,7 @@ function K(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}class E ex
32
32
  </fig-group>`}#$J(J,Q,Z,$=null){let _=k.TYPES.map((G)=>{let X=G.value===Q?" selected":"";return`<option value="${G.value}"${X}>
33
33
  ${k.waveIcon(G.value,24)}
34
34
  <label>${G.name}</label>
35
- </option>`}).join(""),j=$===null?"":` data-wave-index="${k.#b(String($))}"`;return`<fig-dropdown class="${J}" value="${Q}" experimental="modern" type="dropdown" label="Add form"${j}${Z}>${_}</fig-dropdown>`}#r(J,Q,Z,$,_,j,G){let X=this.#D()?" disabled":"",q=G?` units="${k.#b(G)}"`:"",B=this.#Q[J]||k.#A();return`<propskit-slider class="propskit-oscillator-field" label="${Z}" direction="horizontal" name="${Q}" data-wave-index="${J}" value="${this.#c(B[Q])}" min="${$}" max="${_}" step="${j}" precision="${this.#J}" elastic="false"${q}${X}></propskit-slider>`}#s(){this.#$=this.querySelector(".propskit-oscillator-svg"),this.#q=this.querySelector(".propskit-oscillator-path"),this.#X=this.querySelector(".propskit-oscillator-playhead"),this.#z=this.querySelector(".propskit-oscillator-baseline"),this.#K=this.querySelector(".propskit-oscillator-bounds"),this.#L=this.querySelector('[data-handle="amplitude"]'),this.#U=this.querySelector('[data-handle="frequency"]'),this.#k=Array.from(this.querySelectorAll(".propskit-oscillator-wave-type")),this.#Y=Array.from(this.querySelectorAll("propskit-slider[name]")),this.#T=Array.from(this.querySelectorAll("fig-group.propskit-oscillator-wave")),this.#W=Array.from(this.querySelectorAll(".propskit-oscillator-fields"))}#l(J){let Q=new Set;for(let Z of this.#M)if(Z<J)Q.add(Z);else if(Z>J)Q.add(Z-1);this.#M=Q}#JJ(J){let Q=new Set;for(let Z of this.#M)Q.add(Z>=J?Z+1:Z);Q.add(J),this.#M=Q}#I(){if(this.#O||!window.ResizeObserver)return;this.#O=new ResizeObserver(()=>{if(this.#i())this.#ZJ()}),this.#O.observe(this)}#i(){if(!this.#$)return!1;let J=this.#$.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.#$.setAttribute("viewBox",`0 0 ${Q} ${Z}`),$}#_J(){let J=1,Q=256;for(let Z=0;Z<=Q;Z++)J=Math.max(J,Math.abs(this.#a(Z/Q)));return{min:-J,max:J}}#p(J){let{min:Q,max:Z}=this.#N;return this.#j-(J-Q)/(Z-Q)*this.#j}#QJ(J){let{min:Q,max:Z}=this.#N;return Q+(1-J/this.#j)*(Z-Q)}#a(J){return this.#Q.reduce((Q,Z)=>{let $=J*Z.frequency,_=k.#u(Z.type,$,Z.phase);return Q+Z.offset+_*Z.amplitude},0)}#ZJ(){if(!this.#$||!this.#q)return;if(this.#i(),this.#N=this.#_J(),this.#K)this.#K.setAttribute("width",this.#_),this.#K.setAttribute("height",this.#j);let J=Math.max(...this.#Q.map((j)=>j.frequency)),Z=this.#Q.some((j)=>j.type==="square"||j.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),$="";for(let j=0;j<=Z;j++){let G=j/Z,X=G*this.#_,q=this.#p(this.#a(G));$+=`${j===0?"M":"L"}${X.toFixed(1)},${q.toFixed(1)}`}this.#q.setAttribute("d",$);let _=this.#p(0);this.#z?.setAttribute("x1","0"),this.#z?.setAttribute("y1",_),this.#z?.setAttribute("x2",this.#_),this.#z?.setAttribute("y2",_),this.#YJ()}#jJ(){if(this.#B||!this.#X)return;let J=(Q)=>{if(!this.isConnected||!this.#X){this.#B=0;return}this.#XJ(Q%1000/1000),this.#B=requestAnimationFrame(J)};this.#B=requestAnimationFrame(J)}#GJ(){if(!this.#B)return;cancelAnimationFrame(this.#B),this.#B=0}#XJ(J){if(!this.#X)return;let Q=J*this.#_,Z=this.#p(this.#a(J));this.#X.setAttribute("cx",Q.toFixed(1)),this.#X.setAttribute("cy",Z.toFixed(1))}#YJ(){let Q=this.#y,Z=this.#kJ(),$=Math.max(8,Math.min(this.#_-8,this.#_/Q.frequency)),_=this.#p(this.#a(Z/this.#_)),j=this.#p(this.#a($/this.#_));this.#qJ(this.#L,Z,_,8),this.#qJ(this.#U,$,j,8)}#kJ(){let J=this.#y,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 _=($-Q)/Z;while(_<0)_+=1/Z;while(_>1)_-=1/Z;if(_<0||_>1||!Number.isFinite(_))_=0.25;return Math.max(8,Math.min(this.#_-8,_*this.#_))}#qJ(J,Q,Z,$){if(!J)return;J.setAttribute("x",Q-$),J.setAttribute("y",Z-$),J.setAttribute("width",$*2),J.setAttribute("height",$*2)}#m(){for(let Q of this.#k)Q.addEventListener("change",(Z)=>{if(this.#D())return;let $=this.#V(Q);this.#d($),this.#Q[$].type=this.#E(Z.detail??Z.target?.value),this.#BJ(),this.#o("input"),this.#o("change")});for(let Q of this.#Y)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#S=Q;try{this.#NJ(this.#V(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}finally{this.#S=null}}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#NJ(this.#V(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#T)Q.addEventListener("pointerdown",()=>{this.#d(this.#V(Q))}),Q.addEventListener("focusin",()=>{this.#d(this.#V(Q))}),Q.addEventListener("openchange",(Z)=>{let $=this.#V(Q);if(Z.detail?.open)this.#M.add($);else this.#M.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.#D())return;let j=this.#V(Q)+1,G=this.#E($.detail??Q.value);this.#Q.splice(j,0,k.#A(G)),this.#JJ(j),this.#Z=j,this.#g(),this.#o("input"),this.#o("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.#D()||this.#Q.length<=1)return;let $=this.#V(Q);this.#Q.splice($,1),this.#l($),this.#Z=Math.min(this.#Z,this.#Q.length-1),this.#g(),this.#o("input"),this.#o("change")});for(let Q of[this.#L,this.#U])this.#n(Q);this.querySelector(".propskit-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#D())return;if(Q.target?.closest?.(".propskit-oscillator-handle, fig-handle"))return;this.#UJ(Q,"offset")})}#V(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}#n(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",($)=>{if(this.#D())return;$.preventDefault(),$.stopImmediatePropagation(),this.#UJ($,Z)},{capture:!0}),Q.addEventListener("keydown",($)=>{if(this.#D())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!this.#KJ($,Z))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#d(J){let Q=Math.min(this.#Q.length-1,Math.max(0,J));if(Q===this.#Z)return;this.#Z=Q,this.#FJ(),this.#YJ()}#NJ(J,Q,Z,$){if(this.#D())return;this.#d(J);let _=Number.parseFloat(Z);if(!Number.isFinite(_)){if($==="change")this.#DJ();return}this.#Q[J]=this.#F({...this.#Q[J],[Q]:_}),this.#BJ({skipFieldSync:$=="input"}),this.#o($)}#KJ(J,Q){let Z=J.shiftKey?0.5:0.1,$=this.#y;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.#Z]=this.#F($),this.#BJ(),this.#o("input"),this.#o("change"),!0}#LJ(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}}#UJ(J,Q){this.#G=Q,this.#$?.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 _=(G)=>{if(!this.#G)return;let X=this.#LJ(G),q=this.#y;if(Q==="frequency"){let B=Math.max(1,Math.min(this.#_,X.x));q.frequency=this.#_/B}else if(Q==="offset"){let B=this.#P(X.x/this.#_,0,0,1),Y=this.#zJ(q,B);q.offset=this.#QJ(X.y)-this.#MJ(this.#Z,B)-Y*q.amplitude}else if(Q==="amplitude"){let B=this.#P(X.x/this.#_,0,0,1),Y=this.#zJ(q,B),N=this.#QJ(X.y)-this.#MJ(this.#Z,B)-q.offset;q.amplitude=Math.abs(Y)<0.001?q.amplitude:N/Y}this.#Q[this.#Z]=this.#F(q),this.#BJ(),this.#o("input")},j=()=>{if(this.#G=null,this.#$?.classList.remove("dragging"),Z)document.body.style.cursor=$;document.removeEventListener("pointermove",_),document.removeEventListener("pointerup",j),this.#o("change")};document.addEventListener("pointermove",_),document.addEventListener("pointerup",j)}#MJ(J,Q){return this.#Q.reduce((Z,$,_)=>{if(_===J)return Z;let j=Q*$.frequency,G=k.#u($.type,j,$.phase);return Z+$.offset+G*$.amplitude},0)}#zJ(J,Q){return k.#u(J.type,Q*J.frequency,J.phase)}#BJ({skipFieldSync:J=!1}={}){if(this.#WJ(),!J)this.#DJ();this.#FJ(),this.#ZJ()}#WJ(){for(let J of this.#k){let Q=this.#V(J);J.value=this.#Q[Q]?.type||"sine"}}#DJ(){for(let J of this.#Y){if(J===this.#S)continue;let Q=this.#V(J),Z=J.getAttribute("name"),$=this.#c(this.#Q[Q]?.[Z]??0),_=J.querySelector("fig-slider");if(_)_.value=$;else J.setAttribute("value",String($))}}#FJ(){for(let J of this.#W)if(this.#V(J)===this.#Z)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#o(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:k.#t(this.#y.type)}}))}}customElements.define("propskit-oscillator",k);class m extends HTMLElement{#Q;#Z;#J=null;#_;#j;#N;#G;#$;#q;constructor(){super();this.angle=0,this.#Q=1,this.#Z=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#_=this.#S.bind(this),this.#j=this.#w.bind(this),this.#N=this.#y.bind(this),this.#G=this.#E.bind(this),this.#$=this.#P.bind(this),this.#q=this.#A.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.#B("dial",!0),this.showRotations=this.#z(),this.#X(),this.#M(),this.#F(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#O()}#X(){this.innerHTML=this.#K()}#B(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}#z(){if(this.hasAttribute("rotations"))return this.#B("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#B("show-rotations",!1);return!1}#K(){let J=this.#Y(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
35
+ </option>`}).join(""),j=$===null?"":` data-wave-index="${k.#b(String($))}"`;return`<fig-dropdown class="${J}" value="${Q}" experimental="modern" type="dropdown" label="Add form"${j}${Z}>${_}</fig-dropdown>`}#r(J,Q,Z,$,_,j,G){let X=this.#D()?" disabled":"",q=G?` units="${k.#b(G)}"`:"",B=this.#Q[J]||k.#A();return`<propskit-slider class="propskit-oscillator-field" label="${Z}" direction="horizontal" name="${Q}" data-wave-index="${J}" value="${this.#c(B[Q])}" min="${$}" max="${_}" step="${j}" precision="${this.#J}" elastic="false"${q}${X}></propskit-slider>`}#s(){this.#$=this.querySelector(".propskit-oscillator-svg"),this.#q=this.querySelector(".propskit-oscillator-path"),this.#G=this.querySelector(".propskit-oscillator-playhead"),this.#z=this.querySelector(".propskit-oscillator-baseline"),this.#U=this.querySelector(".propskit-oscillator-bounds"),this.#L=this.querySelector('[data-handle="amplitude"]'),this.#K=this.querySelector('[data-handle="frequency"]'),this.#k=Array.from(this.querySelectorAll(".propskit-oscillator-wave-type")),this.#Y=Array.from(this.querySelectorAll("propskit-slider[name]")),this.#W=Array.from(this.querySelectorAll("fig-group.propskit-oscillator-wave")),this.#F=Array.from(this.querySelectorAll(".propskit-oscillator-fields"))}#l(J){let Q=new Set;for(let Z of this.#M)if(Z<J)Q.add(Z);else if(Z>J)Q.add(Z-1);this.#M=Q}#JJ(J){let Q=new Set;for(let Z of this.#M)Q.add(Z>=J?Z+1:Z);Q.add(J),this.#M=Q}#I(){if(this.#H||!window.ResizeObserver)return;this.#H=new ResizeObserver(()=>{if(this.#i())this.#ZJ()}),this.#H.observe(this)}#i(){if(!this.#$)return!1;let J=this.#$.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.#$.setAttribute("viewBox",`0 0 ${Q} ${Z}`),$}#_J(){let J=1,Q=256;for(let Z=0;Z<=Q;Z++)J=Math.max(J,Math.abs(this.#a(Z/Q)));return{min:-J,max:J}}#p(J){let{min:Q,max:Z}=this.#N;return this.#j-(J-Q)/(Z-Q)*this.#j}#QJ(J){let{min:Q,max:Z}=this.#N;return Q+(1-J/this.#j)*(Z-Q)}#a(J){return this.#Q.reduce((Q,Z)=>{let $=J*Z.frequency,_=k.#u(Z.type,$,Z.phase);return Q+Z.offset+_*Z.amplitude},0)}#ZJ(){if(!this.#$||!this.#q)return;if(this.#i(),this.#N=this.#_J(),this.#U)this.#U.setAttribute("width",this.#_),this.#U.setAttribute("height",this.#j);let J=Math.max(...this.#Q.map((j)=>j.frequency)),Z=this.#Q.some((j)=>j.type==="square"||j.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),$="";for(let j=0;j<=Z;j++){let G=j/Z,X=G*this.#_,q=this.#p(this.#a(G));$+=`${j===0?"M":"L"}${X.toFixed(1)},${q.toFixed(1)}`}this.#q.setAttribute("d",$);let _=this.#p(0);this.#z?.setAttribute("x1","0"),this.#z?.setAttribute("y1",_),this.#z?.setAttribute("x2",this.#_),this.#z?.setAttribute("y2",_),this.#YJ()}#jJ(){if(this.#B||!this.#G)return;let J=(Q)=>{if(!this.isConnected||!this.#G){this.#B=0;return}this.#XJ(Q%1000/1000),this.#B=requestAnimationFrame(J)};this.#B=requestAnimationFrame(J)}#GJ(){if(!this.#B)return;cancelAnimationFrame(this.#B),this.#B=0}#XJ(J){if(!this.#G)return;let Q=J*this.#_,Z=this.#p(this.#a(J));this.#G.setAttribute("cx",Q.toFixed(1)),this.#G.setAttribute("cy",Z.toFixed(1))}#YJ(){let Q=this.#y,Z=this.#kJ(),$=Math.max(8,Math.min(this.#_-8,this.#_/Q.frequency)),_=this.#p(this.#a(Z/this.#_)),j=this.#p(this.#a($/this.#_));this.#qJ(this.#L,Z,_,8),this.#qJ(this.#K,$,j,8)}#kJ(){let J=this.#y,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 _=($-Q)/Z;while(_<0)_+=1/Z;while(_>1)_-=1/Z;if(_<0||_>1||!Number.isFinite(_))_=0.25;return Math.max(8,Math.min(this.#_-8,_*this.#_))}#qJ(J,Q,Z,$){if(!J)return;J.setAttribute("x",Q-$),J.setAttribute("y",Z-$),J.setAttribute("width",$*2),J.setAttribute("height",$*2)}#m(){for(let Q of this.#k)Q.addEventListener("change",(Z)=>{if(this.#D())return;let $=this.#V(Q);this.#d($),this.#Q[$].type=this.#E(Z.detail??Z.target?.value),this.#BJ(),this.#o("input"),this.#o("change")});for(let Q of this.#Y)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#C=Q;try{this.#NJ(this.#V(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}finally{this.#C=null}}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#NJ(this.#V(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#W)Q.addEventListener("pointerdown",()=>{this.#d(this.#V(Q))}),Q.addEventListener("focusin",()=>{this.#d(this.#V(Q))}),Q.addEventListener("openchange",(Z)=>{let $=this.#V(Q);if(Z.detail?.open)this.#M.add($);else this.#M.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.#D())return;let j=this.#V(Q)+1,G=this.#E($.detail??Q.value);this.#Q.splice(j,0,k.#A(G)),this.#JJ(j),this.#Z=j,this.#g(),this.#o("input"),this.#o("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.#D()||this.#Q.length<=1)return;let $=this.#V(Q);this.#Q.splice($,1),this.#l($),this.#Z=Math.min(this.#Z,this.#Q.length-1),this.#g(),this.#o("input"),this.#o("change")});for(let Q of[this.#L,this.#K])this.#n(Q);this.querySelector(".propskit-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#D())return;if(Q.target?.closest?.(".propskit-oscillator-handle, fig-handle"))return;this.#UJ(Q,"offset")})}#V(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}#n(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",($)=>{if(this.#D())return;$.preventDefault(),$.stopImmediatePropagation(),this.#UJ($,Z)},{capture:!0}),Q.addEventListener("keydown",($)=>{if(this.#D())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!this.#KJ($,Z))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#d(J){let Q=Math.min(this.#Q.length-1,Math.max(0,J));if(Q===this.#Z)return;this.#Z=Q,this.#FJ(),this.#YJ()}#NJ(J,Q,Z,$){if(this.#D())return;this.#d(J);let _=Number.parseFloat(Z);if(!Number.isFinite(_)){if($==="change")this.#DJ();return}this.#Q[J]=this.#T({...this.#Q[J],[Q]:_}),this.#BJ({skipFieldSync:$=="input"}),this.#o($)}#KJ(J,Q){let Z=J.shiftKey?0.5:0.1,$=this.#y;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.#Z]=this.#T($),this.#BJ(),this.#o("input"),this.#o("change"),!0}#LJ(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}}#UJ(J,Q){this.#X=Q,this.#$?.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 _=(G)=>{if(!this.#X)return;let X=this.#LJ(G),q=this.#y;if(Q==="frequency"){let B=Math.max(1,Math.min(this.#_,X.x));q.frequency=this.#_/B}else if(Q==="offset"){let B=this.#S(X.x/this.#_,0,0,1),Y=this.#zJ(q,B);q.offset=this.#QJ(X.y)-this.#MJ(this.#Z,B)-Y*q.amplitude}else if(Q==="amplitude"){let B=this.#S(X.x/this.#_,0,0,1),Y=this.#zJ(q,B),N=this.#QJ(X.y)-this.#MJ(this.#Z,B)-q.offset;q.amplitude=Math.abs(Y)<0.001?q.amplitude:N/Y}this.#Q[this.#Z]=this.#T(q),this.#BJ(),this.#o("input")},j=()=>{if(this.#X=null,this.#$?.classList.remove("dragging"),Z)document.body.style.cursor=$;document.removeEventListener("pointermove",_),document.removeEventListener("pointerup",j),this.#o("change")};document.addEventListener("pointermove",_),document.addEventListener("pointerup",j)}#MJ(J,Q){return this.#Q.reduce((Z,$,_)=>{if(_===J)return Z;let j=Q*$.frequency,G=k.#u($.type,j,$.phase);return Z+$.offset+G*$.amplitude},0)}#zJ(J,Q){return k.#u(J.type,Q*J.frequency,J.phase)}#BJ({skipFieldSync:J=!1}={}){if(this.#WJ(),!J)this.#DJ();this.#FJ(),this.#ZJ()}#WJ(){for(let J of this.#k){let Q=this.#V(J);J.value=this.#Q[Q]?.type||"sine"}}#DJ(){for(let J of this.#Y){if(J===this.#C)continue;let Q=this.#V(J),Z=J.getAttribute("name"),$=this.#c(this.#Q[Q]?.[Z]??0),_=J.querySelector("fig-slider");if(_)_.value=$;else J.setAttribute("value",String($))}}#FJ(){for(let J of this.#F)if(this.#V(J)===this.#Z)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#o(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:k.#t(this.#y.type)}}))}}customElements.define("propskit-oscillator",k);class m extends HTMLElement{#Q;#Z;#J=null;#_;#j;#N;#X;#$;#q;constructor(){super();this.angle=0,this.#Q=1,this.#Z=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#_=this.#C.bind(this),this.#j=this.#w.bind(this),this.#N=this.#y.bind(this),this.#X=this.#E.bind(this),this.#$=this.#S.bind(this),this.#q=this.#A.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.#B("dial",!0),this.showRotations=this.#z(),this.#G(),this.#M(),this.#T(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#H()}#G(){this.innerHTML=this.#U()}#B(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}#z(){if(this.hasAttribute("rotations"))return this.#B("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#B("show-rotations",!1);return!1}#U(){let J=this.#Y(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
36
36
  ${this.dial?`<div class="fig-input-angle-plane" tabindex="0">
37
37
  <div class="fig-input-angle-handle"></div>
38
38
  </div>`:""}
@@ -45,9 +45,9 @@ function K(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}class E ex
45
45
  units="${this.units}">
46
46
  ${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
47
47
  </fig-input-number>`:""}
48
- `}#L(){let J=Math.abs(this.#k(this.angle));return Math.floor(J/360)}#U(){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"}#Y(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#k(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#W(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#T(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 $}}#M(){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.#U(),this.plane?.addEventListener("mousedown",this.#j),this.plane?.addEventListener("touchstart",this.#N),window.addEventListener("keydown",this.#G),window.addEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#q);this.addEventListener("change",this.#_,!0)}#O(){if(this.plane?.removeEventListener("mousedown",this.#j),this.plane?.removeEventListener("touchstart",this.#N),window.removeEventListener("keydown",this.#G),window.removeEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#q);this.removeEventListener("change",this.#_,!0)}#S(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]),_=Z[2].toLowerCase();if(_==="deg")_="°";if(_!==this.units){let j=this.#T($,_,this.units);J.target.value=String(j)}}}#A(J){J.stopPropagation(),this.angle=Number(J.target.value),this.#H(),this.#F(),this.#U(),this.#R(),this.#f()}#H(){let Q=this.#k(this.angle)*Math.PI/180;this.#Q=Math.cos(Q),this.#Z=Math.sin(Q)}#C(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#h(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,$=Q.top+Q.height/2,_=J.clientX-Z,j=J.clientY-$;return Math.atan2(j,_)*180/Math.PI}#D(J){let Z=(this.#h(J)%360+360)%360;if(Z=this.#C(Z),this.min!==null||this.max!==null)this.angle=this.#W(Z);else if(this.#J===null){this.#J=Z;let j=(this.#k(this.angle)%360+360)%360,G=Z-j;if(G>180)G-=360;if(G<-180)G+=360;this.angle+=this.#W(G)}else{let _=Z-this.#J;if(_>180)_-=360;if(_<-180)_+=360;this.angle+=this.#W(_),this.#J=Z}if(this.#H(),this.#F(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#U(),this.#R()}#R(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#f(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#F(){if(this.handle){let Q=this.#k(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,$=Math.cos(Q)*Z,_=Math.sin(Q)*Z;this.handle.style.transform=`translate(${$}px, ${_}px)`}}#w(J){this.isDragging=!0,this.#J=null,this.#D(J);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#D($)},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",Z),this.#f()};window.addEventListener("mousemove",Q),window.addEventListener("mouseup",Z)}#y(J){J.preventDefault(),this.isDragging=!0,this.#J=null,this.#D(J.touches[0]);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#D($.touches[0])},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",Z),this.#f()};window.addEventListener("touchmove",Q),window.addEventListener("touchend",Z)}#E(J){if(J.key==="Shift")this.isShiftHeld=!0}#P(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.#Z}set value(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}if(this.angle=J,this.#H(),this.#F(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#U()}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.#X(),this.#M(),this.#F()}break;case"dial":if(this.dial=this.#B("dial",!0),this.isConnected)this.#X(),this.#M(),this.#F();break;case"units":{let $=Z||"°";if($==="deg")$="°";if(this.units=$,this.isConnected)this.#X(),this.#M(),this.#F();break}case"min":if(this.min=Z!==null?Number(Z):null,this.isConnected)this.#X(),this.#M(),this.#F();break;case"max":if(this.max=Z!==null?Number(Z):null,this.isConnected)this.#X(),this.#M(),this.#F();break;case"rotations":case"show-rotations":if(this.showRotations=this.#z(),this.isConnected)this.#X(),this.#M(),this.#F();break}}}customElements.define("fig-input-angle",m);class S extends HTMLElement{static observedAttributes=["axis","handle","disabled"];static#Q=6;static#Z=["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"]'];#J=null;#_=new Map;#j=null;#N=null;connectedCallback(){this.style.display="contents",this.#B(),this.#J=new MutationObserver(()=>this.#B()),this.#J.observe(this,{childList:!0})}disconnectedCallback(){this.#J?.disconnect(),this.#J=null,this.#F(),this.#w(),this.#D()}attributeChangedCallback(){if(this.isConnected)this.#B()}get#G(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#$(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#q(){return(this.getAttribute("handle")||"").trim()}#X(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE)}#B(){let J=this.#X(),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.#z(J),this.#G||J.length<2){this.#F();return}for(let Z of J){let $=this.#Y(Z),_=this.#_.get(Z);if(_&&_.target===$)continue;if(_)_.target.removeEventListener("pointerdown",_.onPointerDown,!0),this.#_.delete(Z);if(!$)continue;this.#k(Z,$)}this.#U(J),this.#K(J)}#z(J){for(let Q of J)Q.removeAttribute("data-reorder-item")}#K(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"))}#U(J){if(!this.#q)return;for(let Q of J){let Z=Q.querySelector(this.#q);if(Z)Z.setAttribute("data-reorder-handle","")}}#Y(J){if(this.#q)return J.querySelector(this.#q);return J}#k(J,Q){let Z=($)=>{if(this.#G||this.#X().length<2)return;if($.button!==0)return;if(!this.#q&&this.#W($.target,J))return;this.#O($,J,Q)};Q.addEventListener("pointerdown",Z,!0),this.#_.set(J,{target:Q,onPointerDown:Z})}#W(J,Q){let Z=J;while(Z&&Z!==Q){if(Z instanceof Element){for(let $ of S.#Z)if(Z.matches($))return!0}Z=Z.parentElement}return!1}static#T="fig-reorder-dragging";static#M(J){document.body.classList.toggle(S.#T,J)}#O(J,Q,Z){this.#w(),S.#M(!0);let $={item:Q,target:Z,pointerId:J.pointerId,oldIndex:this.#X().indexOf(Q),targetIndex:this.#X().indexOf(Q),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};$.onMove=(_)=>{if(_.pointerId!==$.pointerId)return;let j=_.clientX-$.startX,G=_.clientY-$.startY;if(!$.active){if(j*j+G*G<S.#Q*S.#Q)return;$.active=!0,J.preventDefault(),J.stopPropagation(),Q.classList.add("dragging");try{Z.setPointerCapture($.pointerId)}catch{}}_.preventDefault();let X=this.#$==="horizontal"?_.clientX:_.clientY,q=this.#S(X);$.targetIndex=q,this.#h(q,Q)},$.onKeyDown=(_)=>{if(_.key!=="Escape"||!$.active)return;_.preventDefault(),this.#f($,!0)},$.onUp=(_)=>{if(_.pointerId!==$.pointerId)return;this.#f($,_.type==="pointercancel")},this.#j=$,window.addEventListener("pointermove",$.onMove),window.addEventListener("pointerup",$.onUp),window.addEventListener("pointercancel",$.onUp),window.addEventListener("keydown",$.onKeyDown)}#S(J){let Q=this.#X(),Z=this.#$==="horizontal";for(let $=0;$<Q.length;$++){let _=Q[$].getBoundingClientRect(),j=Z?_.left+_.width/2:_.top+_.height/2;if(J<j)return $}return Q.length}#A(J,Q){let Z=this.#X(),$=Z.indexOf(J);if($===-1)return!1;let _=Math.max(0,Math.min(Q,Z.length));if(Q===$)return!1;if(_>=Z.length&&$===Z.length-1)return!1;return!0}#H(J){if(!J.length)return null;let Q=1/0,Z=-1/0,$=1/0,_=-1/0;for(let j of J){let G=j.getBoundingClientRect();Q=Math.min(Q,G.left),Z=Math.max(Z,G.right),$=Math.min($,G.top),_=Math.max(_,G.bottom)}return{left:Q,top:$,width:Z-Q,height:_-$}}#C(){if(this.#N)return this.#N;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#$),document.body.appendChild(J),this.#N=J,J}#h(J,Q){let Z=this.#X();if(!this.#A(Q,J)){this.#D();return}let $=this.#H(Z);if(!$){this.#D();return}let _=this.#C();if(_.setAttribute("data-axis",this.#$),this.#$==="horizontal"){let G;if(J<=0)G=Z[0].getBoundingClientRect().left;else if(J>=Z.length)G=Z[Z.length-1].getBoundingClientRect().right;else G=Z[J].getBoundingClientRect().left;_.style.left=`${G-1}px`,_.style.top=`${$.top}px`,_.style.width="2px",_.style.height=`${$.height}px`;return}let j;if(J<=0)j=Z[0].getBoundingClientRect().top;else if(J>=Z.length)j=Z[Z.length-1].getBoundingClientRect().bottom;else j=Z[J].getBoundingClientRect().top;_.style.left=`${$.left}px`,_.style.top=`${j-1}px`,_.style.width=`${$.width}px`,_.style.height="2px"}#D(){this.#N?.remove(),this.#N=null}#R(J,Q){let Z=this.#X(),$=Math.max(0,Math.min(Q,Z.length));if($>=Z.length){if(Z[Z.length-1]!==J)this.appendChild(J);return}let _=Z[$];if(_!==J)this.insertBefore(J,_)}#f(J,Q){let{item:Z,oldIndex:$,active:_,onMove:j,onUp:G,onKeyDown:X}=J;if(window.removeEventListener("pointermove",j),window.removeEventListener("pointerup",G),window.removeEventListener("pointercancel",G),window.removeEventListener("keydown",X),_){if(!Q){this.#R(Z,J.targetIndex);let q=this.#X().indexOf(Z);if(q!==-1&&q!==$)this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:$,newIndex:q,item:Z}}))}}if(Z.classList.remove("dragging"),S.#M(!1),this.#D(),this.#j===J)this.#j=null}#F(){for(let[,J]of this.#_)J.target.removeEventListener("pointerdown",J.onPointerDown,!0);this.#_.clear()}#w(){if(!this.#j)return;this.#f(this.#j,!0)}}customElements.define("fig-reorder",S);var A=0;function p(J="fig-select"){return A+=1,`${J}-${A}`}function d(J){let Q=J||"";if(Q.startsWith("["))try{let $=JSON.parse(Q);return Array.isArray($)?$:[]}catch{}let Z=Q.includes(`
48
+ `}#L(){let J=Math.abs(this.#k(this.angle));return Math.floor(J/360)}#K(){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"}#Y(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#k(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#F(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#W(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 $}}#M(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#K(),this.plane?.addEventListener("mousedown",this.#j),this.plane?.addEventListener("touchstart",this.#N),window.addEventListener("keydown",this.#X),window.addEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#q);this.addEventListener("change",this.#_,!0)}#H(){if(this.plane?.removeEventListener("mousedown",this.#j),this.plane?.removeEventListener("touchstart",this.#N),window.removeEventListener("keydown",this.#X),window.removeEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#q);this.removeEventListener("change",this.#_,!0)}#C(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]),_=Z[2].toLowerCase();if(_==="deg")_="°";if(_!==this.units){let j=this.#W($,_,this.units);J.target.value=String(j)}}}#A(J){J.stopPropagation(),this.angle=Number(J.target.value),this.#P(),this.#T(),this.#K(),this.#R(),this.#f()}#P(){let Q=this.#k(this.angle)*Math.PI/180;this.#Q=Math.cos(Q),this.#Z=Math.sin(Q)}#O(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#h(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,$=Q.top+Q.height/2,_=J.clientX-Z,j=J.clientY-$;return Math.atan2(j,_)*180/Math.PI}#D(J){let Z=(this.#h(J)%360+360)%360;if(Z=this.#O(Z),this.min!==null||this.max!==null)this.angle=this.#F(Z);else if(this.#J===null){this.#J=Z;let j=(this.#k(this.angle)%360+360)%360,G=Z-j;if(G>180)G-=360;if(G<-180)G+=360;this.angle+=this.#F(G)}else{let _=Z-this.#J;if(_>180)_-=360;if(_<-180)_+=360;this.angle+=this.#F(_),this.#J=Z}if(this.#P(),this.#T(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#K(),this.#R()}#R(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#f(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#T(){if(this.handle){let Q=this.#k(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,$=Math.cos(Q)*Z,_=Math.sin(Q)*Z;this.handle.style.transform=`translate(${$}px, ${_}px)`}}#w(J){this.isDragging=!0,this.#J=null,this.#D(J);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#D($)},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",Z),this.#f()};window.addEventListener("mousemove",Q),window.addEventListener("mouseup",Z)}#y(J){J.preventDefault(),this.isDragging=!0,this.#J=null,this.#D(J.touches[0]);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#D($.touches[0])},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",Z),this.#f()};window.addEventListener("touchmove",Q),window.addEventListener("touchend",Z)}#E(J){if(J.key==="Shift")this.isShiftHeld=!0}#S(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.#Z}set value(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}if(this.angle=J,this.#P(),this.#T(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#K()}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.#G(),this.#M(),this.#T()}break;case"dial":if(this.dial=this.#B("dial",!0),this.isConnected)this.#G(),this.#M(),this.#T();break;case"units":{let $=Z||"°";if($==="deg")$="°";if(this.units=$,this.isConnected)this.#G(),this.#M(),this.#T();break}case"min":if(this.min=Z!==null?Number(Z):null,this.isConnected)this.#G(),this.#M(),this.#T();break;case"max":if(this.max=Z!==null?Number(Z):null,this.isConnected)this.#G(),this.#M(),this.#T();break;case"rotations":case"show-rotations":if(this.showRotations=this.#z(),this.isConnected)this.#G(),this.#M(),this.#T();break}}}customElements.define("fig-input-angle",m);class C extends HTMLElement{static observedAttributes=["axis","handle","disabled"];static#Q=6;static#Z=["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"]'];#J=null;#_=new Map;#j=null;#N=null;connectedCallback(){this.style.display="contents",this.#B(),this.#J=new MutationObserver(()=>this.#B()),this.#J.observe(this,{childList:!0})}disconnectedCallback(){this.#J?.disconnect(),this.#J=null,this.#T(),this.#w(),this.#D()}attributeChangedCallback(){if(this.isConnected)this.#B()}get#X(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#$(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#q(){return(this.getAttribute("handle")||"").trim()}#G(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE)}#B(){let J=this.#G(),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.#z(J),this.#X||J.length<2){this.#T();return}for(let Z of J){let $=this.#Y(Z),_=this.#_.get(Z);if(_&&_.target===$)continue;if(_)_.target.removeEventListener("pointerdown",_.onPointerDown,!0),this.#_.delete(Z);if(!$)continue;this.#k(Z,$)}this.#K(J),this.#U(J)}#z(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"))}#K(J){if(!this.#q)return;for(let Q of J){let Z=Q.querySelector(this.#q);if(Z)Z.setAttribute("data-reorder-handle","")}}#Y(J){if(this.#q)return J.querySelector(this.#q);return J}#k(J,Q){let Z=($)=>{if(this.#X||this.#G().length<2)return;if($.button!==0)return;if(!this.#q&&this.#F($.target,J))return;this.#H($,J,Q)};Q.addEventListener("pointerdown",Z,!0),this.#_.set(J,{target:Q,onPointerDown:Z})}#F(J,Q){let Z=J;while(Z&&Z!==Q){if(Z instanceof Element){for(let $ of C.#Z)if(Z.matches($))return!0}Z=Z.parentElement}return!1}static#W="fig-reorder-dragging";static#M(J){document.body.classList.toggle(C.#W,J)}#H(J,Q,Z){this.#w(),C.#M(!0);let $={item:Q,target:Z,pointerId:J.pointerId,oldIndex:this.#G().indexOf(Q),targetIndex:this.#G().indexOf(Q),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};$.onMove=(_)=>{if(_.pointerId!==$.pointerId)return;let j=_.clientX-$.startX,G=_.clientY-$.startY;if(!$.active){if(j*j+G*G<C.#Q*C.#Q)return;$.active=!0,J.preventDefault(),J.stopPropagation(),Q.classList.add("dragging");try{Z.setPointerCapture($.pointerId)}catch{}}_.preventDefault();let X=this.#$==="horizontal"?_.clientX:_.clientY,q=this.#C(X);$.targetIndex=q,this.#h(q,Q)},$.onKeyDown=(_)=>{if(_.key!=="Escape"||!$.active)return;_.preventDefault(),this.#f($,!0)},$.onUp=(_)=>{if(_.pointerId!==$.pointerId)return;this.#f($,_.type==="pointercancel")},this.#j=$,window.addEventListener("pointermove",$.onMove),window.addEventListener("pointerup",$.onUp),window.addEventListener("pointercancel",$.onUp),window.addEventListener("keydown",$.onKeyDown)}#C(J){let Q=this.#G(),Z=this.#$==="horizontal";for(let $=0;$<Q.length;$++){let _=Q[$].getBoundingClientRect(),j=Z?_.left+_.width/2:_.top+_.height/2;if(J<j)return $}return Q.length}#A(J,Q){let Z=this.#G(),$=Z.indexOf(J);if($===-1)return!1;let _=Math.max(0,Math.min(Q,Z.length));if(Q===$)return!1;if(_>=Z.length&&$===Z.length-1)return!1;return!0}#P(J){if(!J.length)return null;let Q=1/0,Z=-1/0,$=1/0,_=-1/0;for(let j of J){let G=j.getBoundingClientRect();Q=Math.min(Q,G.left),Z=Math.max(Z,G.right),$=Math.min($,G.top),_=Math.max(_,G.bottom)}return{left:Q,top:$,width:Z-Q,height:_-$}}#O(){if(this.#N)return this.#N;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#$),document.body.appendChild(J),this.#N=J,J}#h(J,Q){let Z=this.#G();if(!this.#A(Q,J)){this.#D();return}let $=this.#P(Z);if(!$){this.#D();return}let _=this.#O();if(_.setAttribute("data-axis",this.#$),this.#$==="horizontal"){let G;if(J<=0)G=Z[0].getBoundingClientRect().left;else if(J>=Z.length)G=Z[Z.length-1].getBoundingClientRect().right;else G=Z[J].getBoundingClientRect().left;_.style.left=`${G-1}px`,_.style.top=`${$.top}px`,_.style.width="2px",_.style.height=`${$.height}px`;return}let j;if(J<=0)j=Z[0].getBoundingClientRect().top;else if(J>=Z.length)j=Z[Z.length-1].getBoundingClientRect().bottom;else j=Z[J].getBoundingClientRect().top;_.style.left=`${$.left}px`,_.style.top=`${j-1}px`,_.style.width=`${$.width}px`,_.style.height="2px"}#D(){this.#N?.remove(),this.#N=null}#R(J,Q){let Z=this.#G(),$=Math.max(0,Math.min(Q,Z.length));if($>=Z.length){if(Z[Z.length-1]!==J)this.appendChild(J);return}let _=Z[$];if(_!==J)this.insertBefore(J,_)}#f(J,Q){let{item:Z,oldIndex:$,active:_,onMove:j,onUp:G,onKeyDown:X}=J;if(window.removeEventListener("pointermove",j),window.removeEventListener("pointerup",G),window.removeEventListener("pointercancel",G),window.removeEventListener("keydown",X),_){if(!Q){this.#R(Z,J.targetIndex);let q=this.#G().indexOf(Z);if(q!==-1&&q!==$)this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:$,newIndex:q,item:Z}}))}}if(Z.classList.remove("dragging"),C.#M(!1),this.#D(),this.#j===J)this.#j=null}#T(){for(let[,J]of this.#_)J.target.removeEventListener("pointerdown",J.onPointerDown,!0);this.#_.clear()}#w(){if(!this.#j)return;this.#f(this.#j,!0)}}customElements.define("fig-reorder",C);var A=0;function p(J="fig-select"){return A+=1,`${J}-${A}`}function d(J){let Q=J||"";if(Q.startsWith("["))try{let $=JSON.parse(Q);return Array.isArray($)?$:[]}catch{}let Z=Q.includes(`
49
49
  `)?`
50
- `:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function l(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function i(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}class c extends HTMLElement{static get observedAttributes(){return["value","disabled","selected"]}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 K(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return K(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",c);function o(J,Q,Z=2){if(!J||!Q)return!1;let $=Q.scrollHeight-Q.clientHeight>Z,_=!$||Q.scrollTop<=Z,j=!$||Q.scrollTop+Q.clientHeight>=Q.scrollHeight-Z;return J.classList.toggle("overflow-start",!_),J.classList.toggle("overflow-end",!j),$}function f(J,Q=1){if(!J)return;J.scrollBy({top:J.clientHeight*0.8*Q,behavior:"smooth"})}function a({onStart:J,onEnd:Q}={}){let Z=($,_)=>{let j=document.createElement("button");j.type="button",j.className=`fig-overflow fig-overflow-${$}`,j.dataset.figOverflow=$,j.setAttribute("data-fig-select-nav",$),j.setAttribute("tabindex","-1"),j.setAttribute("aria-label",$==="start"?"Scroll up":"Scroll down");let G=document.createElement("fig-icon");return G.setAttribute("name","chevron"),G.setAttribute("size","small"),G.className="fig-overflow-chevron",j.appendChild(G),j.addEventListener("click",(X)=>{X.preventDefault(),X.stopPropagation(),_?.(X)}),j};return{start:Z("start",J),end:Z("end",Q)}}class v extends HTMLElement{#Q=null;#Z=null;#J=null;#_=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#j(),this.#N(),this.addEventListener("scroll",this.#_,{passive:!0}),this.#J?.disconnect(),this.#J=new ResizeObserver(()=>this.syncOverflow()),this.#J.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#_),this.#J?.disconnect(),this.#J=null,this.#G()}syncOverflow(){return o(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(),_=Z.top-$.top+this.scrollTop,j=this.scrollHeight-this.clientHeight,G=Math.max(0,Math.min(_+Z.height/2-this.clientHeight/2,j));this.scrollTo({top:G,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()}#N(){if(this.#Q&&this.#Z&&this.contains(this.#Q)&&this.contains(this.#Z))return;this.#G();let J=a({onStart:()=>f(this,-1),onEnd:()=>f(this,1)});this.#Q=J.start,this.#Z=J.end,this.prepend(this.#Q),this.append(this.#Z)}#G(){this.#Q?.remove(),this.#Z?.remove(),this.#Q=null,this.#Z=null,this.classList.remove("overflow-start","overflow-end")}}customElements.define("fig-select-options",v);class u extends HTMLElement{#Q=null;#Z=null;#J=null;#_=null;#j=null;#N=!1;#G=-1;#$=!1;#q=!1;#X=null;#B=!1;#z=!1;#K=this.#v.bind(this);#L=this.#e.bind(this);#U=this.#$J.bind(this);#Y=this.#r.bind(this);#k=this.#w.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 K(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#N)this.#H();if(this.#T(),this.#A(),this.#t(),this.#b(),this.#x(),this.#y(),this.open)this.#_J()}disconnectedCallback(){this.#F(),document.removeEventListener("keydown",this.#U,!0),this.#j?.disconnect(),this.#j=null}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#N)return;if(J==="options"){this.#A(),this.#x();return}if(J==="value"||J==="label"){this.#x();return}if(J==="disabled"){this.#t();return}if(J==="open"){if(Z===null||Z==="false")this.#p();else this.#_J();return}if(J==="position"||J==="offset"||J==="closedby")this.#b()}focus(J){this.#Q?.focus(J)}blur(){this.#Q?.blur()}#W(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-MENU-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#T(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#M(){let Q=(this.#_?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#O(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#S(){let J=this.#M();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}#A(){if(this.#O())return;let J=this.hasAttribute("options"),Q=J?this.#S():this.#M();if(!Q)return;this.#z=!0;try{for(let _ of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))_.remove();if(!J)return;let Z=d(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let _ of Z){let j=document.createElement("fig-select-option");if(j.setAttribute("data-fig-generated",""),j.setAttribute("value",l(_)),j.textContent=i(_),$)Q.insertBefore(j,$);else Q.appendChild(j)}}finally{this.#z=!1}}#H(){this.#N=!0;let J=this.attachShadow({mode:"open"});J.innerHTML=`
50
+ `:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function l(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function i(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}class c extends HTMLElement{static get observedAttributes(){return["value","disabled","selected"]}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 K(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return K(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",c);function o(J,Q,Z=2){if(!J||!Q)return!1;let $=Q.scrollHeight-Q.clientHeight>Z,_=!$||Q.scrollTop<=Z,j=!$||Q.scrollTop+Q.clientHeight>=Q.scrollHeight-Z;return J.classList.toggle("overflow-start",!_),J.classList.toggle("overflow-end",!j),$}function f(J,Q=1){if(!J)return;J.scrollBy({top:J.clientHeight*0.8*Q,behavior:"smooth"})}function a({onStart:J,onEnd:Q}={}){let Z=($,_)=>{let j=document.createElement("button");j.type="button",j.className=`fig-overflow fig-overflow-${$}`,j.dataset.figOverflow=$,j.setAttribute("data-fig-select-nav",$),j.setAttribute("tabindex","-1"),j.setAttribute("aria-label",$==="start"?"Scroll up":"Scroll down");let G=document.createElement("fig-icon");return G.setAttribute("name","chevron"),G.setAttribute("size","small"),G.className="fig-overflow-chevron",j.appendChild(G),j.addEventListener("click",(X)=>{X.preventDefault(),X.stopPropagation(),_?.(X)}),j};return{start:Z("start",J),end:Z("end",Q)}}class v extends HTMLElement{#Q=null;#Z=null;#J=null;#_=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#j(),this.#N(),this.addEventListener("scroll",this.#_,{passive:!0}),this.#J?.disconnect(),this.#J=new ResizeObserver(()=>this.syncOverflow()),this.#J.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#_),this.#J?.disconnect(),this.#J=null,this.#X()}syncOverflow(){return o(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(),_=Z.top-$.top+this.scrollTop,j=this.scrollHeight-this.clientHeight,G=Math.max(0,Math.min(_+Z.height/2-this.clientHeight/2,j));this.scrollTo({top:G,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()}#N(){if(this.#Q&&this.#Z&&this.contains(this.#Q)&&this.contains(this.#Z))return;this.#X();let J=a({onStart:()=>f(this,-1),onEnd:()=>f(this,1)});this.#Q=J.start,this.#Z=J.end,this.prepend(this.#Q),this.append(this.#Z)}#X(){this.#Q?.remove(),this.#Z?.remove(),this.#Q=null,this.#Z=null,this.classList.remove("overflow-start","overflow-end")}}customElements.define("fig-select-options",v);class u extends HTMLElement{#Q=null;#Z=null;#J=null;#_=null;#j=null;#N=!1;#X=-1;#$=!1;#q=!1;#G=null;#B=!1;#z=!1;#U=this.#v.bind(this);#L=this.#e.bind(this);#K=this.#$J.bind(this);#Y=this.#r.bind(this);#k=this.#w.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 K(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#N)this.#P();if(this.#W(),this.#A(),this.#t(),this.#b(),this.#x(),this.#y(),this.open)this.#_J()}disconnectedCallback(){this.#T(),document.removeEventListener("keydown",this.#K,!0),this.#j?.disconnect(),this.#j=null}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#N)return;if(J==="options"){this.#A(),this.#x();return}if(J==="value"||J==="label"){this.#x();return}if(J==="disabled"){this.#t();return}if(J==="open"){if(Z===null||Z==="false")this.#p();else this.#_J();return}if(J==="position"||J==="offset"||J==="closedby")this.#b()}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")}#W(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#M(){let Q=(this.#_?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#H(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#C(){let J=this.#M();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}#A(){if(this.#H())return;let J=this.hasAttribute("options"),Q=J?this.#C():this.#M();if(!Q)return;this.#z=!0;try{for(let _ of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))_.remove();if(!J)return;let Z=d(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let _ of Z){let j=document.createElement("fig-select-option");if(j.setAttribute("data-fig-generated",""),j.setAttribute("value",l(_)),j.textContent=i(_),$)Q.insertBefore(j,$);else Q.appendChild(j)}}finally{this.#z=!1}}#P(){this.#N=!0;let J=this.attachShadow({mode:"open"});J.innerHTML=`
51
51
  <style>
52
52
  :host {
53
53
  display: inline-flex;
@@ -123,4 +123,4 @@ function K(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}class E ex
123
123
  max-height: inherit;
124
124
  }
125
125
  </style>
126
- `;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"});$.setAttribute("is","fig-popup"),$.setAttribute("part","listbox"),$.setAttribute("theme","menu"),$.setAttribute("role","listbox"),$.id=p("fig-select-list"),Q.setAttribute("aria-controls",$.id);let _=document.createElement("slot");if(_.setAttribute("name","panel"),$.appendChild(_),J.append(Q,$),this.#Q=Q,this.#J=Z,this.#Z=$,this.#_=_,$.anchor=Q,this.#T(),this.#f(),this.#C(),!this.hasAttribute("value")){let j=this.#E().find((G)=>K(G,"selected"));if(j)this.setAttribute("value",j.value)}}#C(){if(!this.#Z||this.#q)return;if(typeof this.#Z.positionPopup!=="function")return;this.#X=this.#Z.positionPopup.bind(this.#Z),this.#Z.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#R()},this.#q=!0}#h(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()}#D(){if(typeof this.#Z?.parseViewportMargins==="function")return this.#Z.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#R(){if(this.#B)return;let J=this.#Z,Q=this.#J;if(!J||!Q){this.#X?.();return}let Z=this.#E(),$=Z.find((L)=>this.#P(L)===this.value)||Z[0];if(!$){this.#X?.();return}this.#X?.();let _=J.getBoundingClientRect(),j=Q.getBoundingClientRect(),G=this.#h($);if(!_.width||!_.height||!j.width||!G)return;let X=G.left-_.left,q=G.top-_.top,B=j.left-X,Y=j.top-q,N=this.#D();if(typeof J.clampToViewport==="function")({left:B,top:Y}=J.clampToViewport({left:B,top:Y},_,N));else{let{left:L,top:z}=N,D=window.innerWidth-_.width-N.right,H=window.innerHeight-_.height-N.bottom;B=Math.min(Math.max(B,L),Math.max(L,D)),Y=Math.min(Math.max(Y,z),Math.max(z,H))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(B)}px`,"important"),J.style.setProperty("top",`${Math.round(Y)}px`,"important");let U=this.#M(),M=this.#h($);if(M&&U&&U.scrollHeight>U.clientHeight+1){let L=M.top-j.top;if(Math.abs(L)>0.5)U.scrollTop+=L;U.syncOverflow?.()}}#f(){this.#Q?.addEventListener("click",this.#K),this.#Q?.addEventListener("keydown",this.#U),this.addEventListener("click",this.#L),this.#Z?.addEventListener("keydown",this.#U),this.#Z?.addEventListener("close",this.#Y),this.#_?.addEventListener("slotchange",this.#k)}#F(){this.#Q?.removeEventListener("click",this.#K),this.#Q?.removeEventListener("keydown",this.#U),this.removeEventListener("click",this.#L),this.#Z?.removeEventListener("keydown",this.#U),this.#Z?.removeEventListener("close",this.#Y),this.#_?.removeEventListener("slotchange",this.#k)}#w(){this.#T(),this.#x()}#y(){if(this.#j)return;this.#j=new MutationObserver((J)=>{if(this.#$||this.#z)return;let Q=!1;for(let Z of J){if(Z.type==="childList"){if([...Z.addedNodes].some(($)=>this.#W($))||[...Z.removedNodes].some(($)=>this.#W($)))Q=!0}if(Z.type==="attributes"&&Z.target?.tagName==="FIG-SELECT-OPTION"&&(Z.attributeName==="value"||Z.attributeName==="disabled"))Q=!0;if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#x()}),this.#j.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected"]})}#E({enabledOnly:J=!1}={}){let Q=this.#M(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!K($,"disabled"))}#P(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()}#c(J){return(J?.textContent||"").trim()}#b(){if(!this.#Z)return;this.#Z.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#Z.setAttribute("offset",J);else this.#Z.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#Z.setAttribute("closedby",Q);else this.#Z.removeAttribute("closedby")}#t(){let J=K(this,"disabled");if(this.#Q)if(J)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(J&&this.open)this.open=!1}#u(J){if(!J.length)return null;let Q=J.find((Z)=>K(Z,"selected"));if(Q&&!K(Q,"disabled"))return Q;return J.find((Z)=>!K(Z,"disabled"))||J[0]||null}#g(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#x(){if(this.#$)return;this.#$=!0;try{let J=this.#E(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((X)=>this.#P(X)===Z):null,_=!1;if(!$){if(Q){if(!J.length){if(this.#J)this.#J.textContent=Z||this.getAttribute("label")||"";return}if($=this.#u(J),$){let X=this.#P($);if(Z!==X)this.setAttribute("value",X),_=!0}else this.removeAttribute("value"),_=!0}else if($=J.find((X)=>K(X,"selected")),$)this.setAttribute("value",this.#P($)),_=!0}for(let X of J){let q=X===$;if(X.setAttribute("aria-selected",q?"true":"false"),q)X.setAttribute("selected","");else X.removeAttribute("selected")}let j=$&&this.#c($)||this.getAttribute("label")||"";if(this.#J)this.#J.textContent=j;let G=this.getAttribute("label")||"Select";if(this.#Q?.setAttribute("aria-label",G),this.#M()?.syncOverflow?.(),_)this.#g(this.getAttribute("value")??"")}finally{this.#$=!1}}#v(J){if(K(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=this.#Z?.matches?.(":open")??!1;if(this.open&&Q)this.open=!1;else{if(this.#Z&&this.#Q)this.#Z.anchor=this.#Q;this.open=!0}}#e(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(K(Z,"disabled"))return;this.#s(Z)}#$J(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#Z?.matches?.(":open")??!1))){if(this.#Q?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" ")){if(J.preventDefault(),this.#Z&&this.#Q)this.#Z.anchor=this.#Q;this.open=!0,requestAnimationFrame(()=>{let _=this.#E({enabledOnly:!0}).findIndex((j)=>this.#P(j)===this.value);this.#I(_>=0?_:0)})}return}let Z=this.#E({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#JJ(),this.#I(this.#G+1);break;case"ArrowUp":J.preventDefault(),this.#JJ(),this.#I(this.#G-1);break;case"Home":J.preventDefault(),this.#I(0);break;case"End":J.preventDefault(),this.#I(Z.length-1);break;case"Escape":J.preventDefault(),this.open=!1,this.#Q?.focus();break;case"Enter":case" ":{this.#JJ();let $=Z[this.#G];if(!$)return;J.preventDefault(),this.#s($);break}}}#r(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Q?.setAttribute("aria-expanded","false"),this.#Q?.focus(),this.#G=-1}#s(J){let Q=this.#P(J);this.setAttribute("value",Q),this.#x(),this.#g(Q),this.open=!1}#l(){return this.#E({enabledOnly:!0})}#JJ(){let J=this.#l();if(!J.length){this.#G=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#G=Z>=0?Z:this.#G}#I(J){let Q=this.#l();if(!Q.length)return;let Z=(J%Q.length+Q.length)%Q.length;this.#G=Z,Q[Z]?.focus()}#i(){if(!this.#Z||!this.#Q)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#Q.getBoundingClientRect().width),Z=Math.max(J,Q,96);if(K(this,"full"))this.#Z.style.setProperty("width",`${Z}px`,"important"),this.#Z.style.setProperty("min-width",`${Z}px`,"important"),this.#Z.style.setProperty("max-width",`${Z}px`,"important");else this.#Z.style.setProperty("width","max-content","important"),this.#Z.style.setProperty("min-width",`${Z}px`,"important"),this.#Z.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#_J(){if(!this.#Z||K(this,"disabled"))return;if(this.#Q)this.#Z.anchor=this.#Q;this.#C(),this.#B=!1,this.#x(),this.#i(),this.#Z.open=!0,document.addEventListener("keydown",this.#U,!0),this.#Q?.setAttribute("aria-expanded","true"),this.#G=-1,requestAnimationFrame(()=>{this.#i(),this.#R();let J=this.#M(),Z=this.#l().findIndex(($)=>this.#P($)===this.value);if(Z>=0)this.#I(Z);else if(this.#Q?.hasAttribute("data-focus-visible")||this.#Q?.matches?.(":focus-visible"))this.#I(0);J?.syncOverflow?.(),this.#B=!0})}#p(){if(!this.#Z)return;this.#B=!1,document.removeEventListener("keydown",this.#U,!0),this.#Z.open=!1,this.#Q?.setAttribute("aria-expanded","false")}}customElements.define("fig-select",u);
126
+ `;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"});$.setAttribute("is","fig-popup"),$.setAttribute("part","listbox"),$.setAttribute("theme","menu"),$.setAttribute("role","listbox"),$.id=p("fig-select-list"),Q.setAttribute("aria-controls",$.id);let _=document.createElement("slot");if(_.setAttribute("name","panel"),$.appendChild(_),J.append(Q,$),this.#Q=Q,this.#J=Z,this.#Z=$,this.#_=_,$.anchor=Q,this.#W(),this.#f(),this.#O(),!this.hasAttribute("value")){let j=this.#E().find((G)=>K(G,"selected"));if(j)this.setAttribute("value",j.value)}}#O(){if(!this.#Z||this.#q)return;if(typeof this.#Z.positionPopup!=="function")return;this.#G=this.#Z.positionPopup.bind(this.#Z),this.#Z.positionPopup=()=>{if(!this.open){this.#G?.();return}this.#R()},this.#q=!0}#h(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()}#D(){if(typeof this.#Z?.parseViewportMargins==="function")return this.#Z.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#R(){if(this.#B)return;let J=this.#Z,Q=this.#J;if(!J||!Q){this.#G?.();return}let Z=this.#E(),$=Z.find((L)=>this.#S(L)===this.value)||Z[0];if(!$){this.#G?.();return}this.#G?.();let _=J.getBoundingClientRect(),j=Q.getBoundingClientRect(),G=this.#h($);if(!_.width||!_.height||!j.width||!G)return;let X=G.left-_.left,q=G.top-_.top,B=j.left-X,Y=j.top-q,N=this.#D();if(typeof J.clampToViewport==="function")({left:B,top:Y}=J.clampToViewport({left:B,top:Y},_,N));else{let{left:L,top:z}=N,D=window.innerWidth-_.width-N.right,H=window.innerHeight-_.height-N.bottom;B=Math.min(Math.max(B,L),Math.max(L,D)),Y=Math.min(Math.max(Y,z),Math.max(z,H))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(B)}px`,"important"),J.style.setProperty("top",`${Math.round(Y)}px`,"important");let U=this.#M(),M=this.#h($);if(M&&U&&U.scrollHeight>U.clientHeight+1){let L=M.top-j.top;if(Math.abs(L)>0.5)U.scrollTop+=L;U.syncOverflow?.()}}#f(){this.#Q?.addEventListener("click",this.#U),this.#Q?.addEventListener("keydown",this.#K),this.addEventListener("click",this.#L),this.#Z?.addEventListener("keydown",this.#K),this.#Z?.addEventListener("close",this.#Y),this.#_?.addEventListener("slotchange",this.#k)}#T(){this.#Q?.removeEventListener("click",this.#U),this.#Q?.removeEventListener("keydown",this.#K),this.removeEventListener("click",this.#L),this.#Z?.removeEventListener("keydown",this.#K),this.#Z?.removeEventListener("close",this.#Y),this.#_?.removeEventListener("slotchange",this.#k)}#w(){this.#W(),this.#x()}#y(){if(this.#j)return;this.#j=new MutationObserver((J)=>{if(this.#$||this.#z)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"))Q=!0;if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#x()}),this.#j.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected"]})}#E({enabledOnly:J=!1}={}){let Q=this.#M(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!K($,"disabled"))}#S(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()}#c(J){return(J?.textContent||"").trim()}#b(){if(!this.#Z)return;this.#Z.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#Z.setAttribute("offset",J);else this.#Z.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#Z.setAttribute("closedby",Q);else this.#Z.removeAttribute("closedby")}#t(){let J=K(this,"disabled");if(this.#Q)if(J)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(J&&this.open)this.open=!1}#u(J){if(!J.length)return null;let Q=J.find((Z)=>K(Z,"selected"));if(Q&&!K(Q,"disabled"))return Q;return J.find((Z)=>!K(Z,"disabled"))||J[0]||null}#g(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#x(){if(this.#$)return;this.#$=!0;try{let J=this.#E(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((X)=>this.#S(X)===Z):null,_=!1;if(!$){if(Q){if(!J.length){if(this.#J)this.#J.textContent=Z||this.getAttribute("label")||"";return}if($=this.#u(J),$){let X=this.#S($);if(Z!==X)this.setAttribute("value",X),_=!0}else this.removeAttribute("value"),_=!0}else if($=J.find((X)=>K(X,"selected")),$)this.setAttribute("value",this.#S($)),_=!0}for(let X of J){let q=X===$;if(X.setAttribute("aria-selected",q?"true":"false"),q)X.setAttribute("selected","");else X.removeAttribute("selected")}let j=$&&this.#c($)||this.getAttribute("label")||"";if(this.#J)this.#J.textContent=j;let G=this.getAttribute("label")||"Select";if(this.#Q?.setAttribute("aria-label",G),this.#M()?.syncOverflow?.(),_)this.#g(this.getAttribute("value")??"")}finally{this.#$=!1}}#v(J){if(K(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=!this.open;if(Q&&this.#Z&&this.#Q)this.#Z.anchor=this.#Q;this.open=Q}#e(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(K(Z,"disabled"))return;this.#s(Z)}#$J(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#Z?.matches?.(":open")??!1))){if(this.#Q?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" ")){if(J.preventDefault(),this.#Z&&this.#Q)this.#Z.anchor=this.#Q;this.open=!0,requestAnimationFrame(()=>{let _=this.#E({enabledOnly:!0}).findIndex((j)=>this.#S(j)===this.value);this.#I(_>=0?_:0)})}return}let Z=this.#E({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#JJ(),this.#I(this.#X+1);break;case"ArrowUp":J.preventDefault(),this.#JJ(),this.#I(this.#X-1);break;case"Home":J.preventDefault(),this.#I(0);break;case"End":J.preventDefault(),this.#I(Z.length-1);break;case"Escape":J.preventDefault(),this.open=!1,this.#Q?.focus();break;case"Enter":case" ":{this.#JJ();let $=Z[this.#X];if(!$)return;J.preventDefault(),this.#s($);break}}}#r(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Q?.setAttribute("aria-expanded","false"),this.#Q?.focus(),this.#X=-1}#s(J){let Q=this.#S(J);this.setAttribute("value",Q),this.#x(),this.#g(Q),this.open=!1}#l(){return this.#E({enabledOnly:!0})}#JJ(){let J=this.#l();if(!J.length){this.#X=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#X=Z>=0?Z:this.#X}#I(J){let Q=this.#l();if(!Q.length)return;let Z=(J%Q.length+Q.length)%Q.length;this.#X=Z,Q[Z]?.focus()}#i(){if(!this.#Z||!this.#Q)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#Q.getBoundingClientRect().width),Z=Math.max(J,Q,96);if(K(this,"full"))this.#Z.style.setProperty("width",`${Z}px`,"important"),this.#Z.style.setProperty("min-width",`${Z}px`,"important"),this.#Z.style.setProperty("max-width",`${Z}px`,"important");else this.#Z.style.setProperty("width","max-content","important"),this.#Z.style.setProperty("min-width",`${Z}px`,"important"),this.#Z.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#_J(){if(!this.#Z||K(this,"disabled"))return;if(this.#Q)this.#Z.anchor=this.#Q;this.#O(),this.#B=!1,this.#x(),this.#i(),this.#Z.open=!0,document.addEventListener("keydown",this.#K,!0),this.#Q?.setAttribute("aria-expanded","true"),this.#X=-1,requestAnimationFrame(()=>{this.#i(),this.#R();let J=this.#M(),Z=this.#l().findIndex(($)=>this.#S($)===this.value);if(Z>=0)this.#I(Z);else if(this.#Q?.hasAttribute("data-focus-visible")||this.#Q?.matches?.(":focus-visible"))this.#I(0);J?.syncOverflow?.(),this.#B=!0})}#p(){if(!this.#Z)return;this.#B=!1,document.removeEventListener("keydown",this.#K,!0),this.#Z.open=!1,this.#Q?.setAttribute("aria-expanded","false")}}customElements.define("fig-select",u);
package/fig-lab.js CHANGED
@@ -453,6 +453,9 @@ class PropskitSelect extends HTMLElement {
453
453
  #boundHandleInput = null;
454
454
  #boundHandleChange = null;
455
455
  #boundHandleClick = this.#handleClick.bind(this);
456
+ #boundHandlePointerDown = this.#handlePointerDown.bind(this);
457
+ /** True when pointerdown saw the menu open — skip click-to-open after light-dismiss. */
458
+ #closeGesture = false;
456
459
 
457
460
  static get observedAttributes() {
458
461
  return ["label", "direction", "aria-label", "options", "value"];
@@ -465,6 +468,8 @@ class PropskitSelect extends HTMLElement {
465
468
  this.#bindSelectEvents();
466
469
  this.removeEventListener("click", this.#boundHandleClick);
467
470
  this.addEventListener("click", this.#boundHandleClick);
471
+ this.removeEventListener("pointerdown", this.#boundHandlePointerDown, true);
472
+ this.addEventListener("pointerdown", this.#boundHandlePointerDown, true);
468
473
 
469
474
  if (!this.#observer) {
470
475
  this.#observer = new MutationObserver((mutations) => {
@@ -497,6 +502,7 @@ class PropskitSelect extends HTMLElement {
497
502
  this.#observer?.disconnect();
498
503
  this.#unbindSelectEvents();
499
504
  this.removeEventListener("click", this.#boundHandleClick);
505
+ this.removeEventListener("pointerdown", this.#boundHandlePointerDown, true);
500
506
  }
501
507
 
502
508
  attributeChangedCallback(name, oldValue, newValue) {
@@ -628,14 +634,44 @@ class PropskitSelect extends HTMLElement {
628
634
  );
629
635
  }
630
636
 
637
+ #isSelectMenuOpen() {
638
+ if (!this.#select) return false;
639
+ if (this.#select.open) return true;
640
+ const popup = this.#select.shadowRoot?.querySelector(
641
+ 'dialog[is="fig-popup"]',
642
+ );
643
+ return Boolean(popup?.open || popup?.matches?.(":open"));
644
+ }
645
+
646
+ #handlePointerDown(event) {
647
+ if (!(event.target instanceof Element)) return;
648
+ // fig-select owns its trigger/option clicks.
649
+ if (event.target.closest("fig-select")) {
650
+ this.#closeGesture = false;
651
+ return;
652
+ }
653
+ // Light-dismiss closes on pointerdown; remember so click doesn't reopen.
654
+ this.#closeGesture = this.#isSelectMenuOpen();
655
+ }
656
+
631
657
  #handleClick(event) {
632
658
  if (event.target instanceof Element && event.target.closest("fig-select")) {
659
+ this.#closeGesture = false;
660
+ return;
661
+ }
662
+ if (!this.#select || figLabBooleanAttribute(this.#select, "disabled")) {
663
+ this.#closeGesture = false;
633
664
  return;
634
665
  }
635
- this.#select?.focus();
636
- if (this.#select && !figLabBooleanAttribute(this.#select, "disabled")) {
637
- this.#select.open = true;
666
+ this.#select.focus();
667
+
668
+ if (this.#closeGesture || this.#isSelectMenuOpen()) {
669
+ this.#closeGesture = false;
670
+ this.#select.open = false;
671
+ return;
638
672
  }
673
+
674
+ this.#select.open = true;
639
675
  }
640
676
 
641
677
  get value() {
@@ -5606,12 +5642,11 @@ class FigSelect extends HTMLElement {
5606
5642
  if (figLabBooleanAttribute(this, "disabled")) return;
5607
5643
  e.preventDefault();
5608
5644
  e.stopPropagation();
5609
- const popupShowing = this.#popup?.matches?.(":open") ?? false;
5610
- if (this.open && popupShowing) this.open = false;
5611
- else {
5612
- if (this.#popup && this.#button) this.#popup.anchor = this.#button;
5613
- this.open = true;
5645
+ const nextOpen = !this.open;
5646
+ if (nextOpen && this.#popup && this.#button) {
5647
+ this.#popup.anchor = this.#button;
5614
5648
  }
5649
+ this.open = nextOpen;
5615
5650
  }
5616
5651
 
5617
5652
  #handleOptionClick(e) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "6.18.2",
3
+ "version": "6.18.3",
4
4
  "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
5
5
  "author": "Rogie King",
6
6
  "license": "MIT",