@rogieking/figui3 6.21.0 → 6.21.1

package/dist/fig-editor.js

@@ -1,151 +1,26 @@
-import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}class m extends HTMLElement{#Z=null;#Q=null;#J=null;#U=!1;#K=null;#k=new Set;#j=null;#Y=null;#$=this.#L.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#X();if(this.#_(),this.#G(),this.#W(),this.removeEventListener("click",this.#$),this.addEventListener("click",this.#$),!this.#K)this.#K=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.#_();if(Z)this.#G()});this.#K.observe(this,{attributes:!0})}disconnectedCallback(){this.#K?.disconnect(),this.#B(),this.removeEventListener("click",this.#$)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#_()}#X(){let Q=Array.from(this.childNodes).filter((K)=>K.nodeType!==Node.TEXT_NODE||Boolean(K.textContent?.trim())).find((K)=>K.nodeType===Node.ELEMENT_NODE&&K.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-segmented-control"),X=document.createElement("fig-segment"),Y=document.createElement("fig-segment");j.setAttribute("sizing","equal"),X.setAttribute("value","off"),X.textContent="Off",Y.setAttribute("value","on"),Y.textContent="On",j.append(X,Y),Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#U=Boolean(Q),this.replaceChildren(Z)}#_(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#U)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#N(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","checked","value"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#G(){if(!this.#J)return;let J=this.#N(),Q=new Set(J);for(let Z of this.#k)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("value",L(this,"checked")?"on":"off"),this.#k=Q}#W(){if(!this.#J)return;this.#j??=this.#q.bind(this,"input"),this.#Y??=this.#q.bind(this,"change"),this.#J.addEventListener("input",this.#j),this.#J.addEventListener("change",this.#Y)}#B(){if(!this.#J)return;if(this.#j)this.#J.removeEventListener("input",this.#j);if(this.#Y)this.#J.removeEventListener("change",this.#Y)}#q(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}))}#L(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":L(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",m);class v extends HTMLElement{#Z=null;#Q=null;#J=null;#U=!1;#K=null;#k=new Set;#j=null;#Y=null;#$=this.#z.bind(this);#X=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#_();if(this.#N(),this.#W(),this.#B(),this.#X===null)this.#X=this.getAttribute("default")??this.getAttribute("value")??"";if(this.removeEventListener("click",this.#$),this.addEventListener("click",this.#$),!this.#K)this.#K=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#N();if(Z)this.#W()});this.#K.observe(this,{attributes:!0})}disconnectedCallback(){this.#K?.disconnect(),this.#q(),this.removeEventListener("click",this.#$)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#N()}#_(){let J=Array.from(this.childNodes).filter((X)=>X.nodeType!==Node.TEXT_NODE||Boolean(X.textContent?.trim())),Q=J.find((X)=>X.nodeType===Node.ELEMENT_NODE&&X.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-color");for(let X of J)if(X!==Q)j.appendChild(X);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#U=Boolean(Q),this.replaceChildren(Z)}#N(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#U)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Color")}#G(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#W(){if(!this.#J)return;let J=this.#G(),Q=new Set(J);for(let Z of this.#k)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J){let $=this.getAttribute(Z)??"";if(Z==="value"&&this.#J.getAttribute("value")===$)continue;this.#J.setAttribute(Z,$)}this.#J.setAttribute("text","true"),this.#k=Q}#B(){if(!this.#J)return;this.#j??=this.#D.bind(this,"input"),this.#Y??=this.#D.bind(this,"change"),this.#J.addEventListener("input",this.#j),this.#J.addEventListener("change",this.#Y)}#q(){if(!this.#J)return;if(this.#j)this.#J.removeEventListener("input",this.#j);if(this.#Y)this.#J.removeEventListener("change",this.#Y)}#L(J){let Q=J instanceof CustomEvent&&J.detail!==void 0?J.detail:void 0;if(typeof Q==="string"&&Q)return Q;if(Q&&typeof Q==="object"){if(typeof Q.value==="string"&&Q.value)return Q.value;if(typeof Q.hex==="string"&&Q.hex)return Q.hex;if(typeof Q.color==="string"&&Q.color)return Q.color}if(typeof this.#J?.value==="string"&&this.#J.value)return this.#J.value;return this.#J?.getAttribute("value")??""}#D(J,Q){Q.stopImmediatePropagation();let Z=this.#L(Q);if(this.setAttribute("value",Z),this.#J&&this.#J.getAttribute("value")!==Z)this.#J.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#z(J){if(J.target instanceof Element&&J.target.closest("fig-input-color"))return;this.focus()}get value(){return this.getAttribute("value")??this.#J?.value??this.#J?.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#J?.removeAttribute("value");return}let Q=String(J);if(this.setAttribute("value",Q),this.#J&&this.#J.getAttribute("value")!==Q)this.#J.setAttribute("value",Q)}#T(J){if(!this.#J)return;if(this.#J.getAttribute("value")===J)this.#J.removeAttribute("value");this.#J.setAttribute("value",J)}#M(){return this.getAttribute("default")??this.#X??""}resetToDefault(){let J=String(this.#M());this.setAttribute("value",J),this.#T(J),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}customElements.define("propskit-color",v);class u extends HTMLElement{#Z=null;#Q=null;#J=null;#U=!1;#K=null;#k=new Set;#j=null;#Y=null;#$=this.#M.bind(this);#X=this.#T.bind(this);#_=!1;static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Z)this.#N();if(this.#G(),this.#B(),this.#q(),this.removeEventListener("click",this.#$),this.addEventListener("click",this.#$),this.removeEventListener("pointerdown",this.#X,!0),this.addEventListener("pointerdown",this.#X,!0),!this.#K)this.#K=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;let j=$.attributeName;if(j==="label"||j==="direction"||j==="aria-label")Q=!0;else Z=!0}if(Q)this.#G();if(Z)this.#B()});this.#K.observe(this,{attributes:!0})}disconnectedCallback(){this.#K?.disconnect(),this.#L(),this.removeEventListener("click",this.#$),this.removeEventListener("pointerdown",this.#X,!0)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label"){this.#G();return}if(J==="options"||J==="value")this.#B()}#N(){let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");$.setAttribute("full",""),Q.append(Z,$),this.#Z=Q,this.#Q=Z,this.#J=$,this.#U=Boolean(J),this.replaceChildren(Q)}#G(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#U)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Select"),this.#J.setAttribute("full","")}#W(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","full"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#B(){if(!this.#J)return;let J=this.#W().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.#k)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#k=Q}#q(){if(!this.#J)return;this.#j??=this.#D.bind(this,"input"),this.#Y??=this.#D.bind(this,"change"),this.#J.addEventListener("input",this.#j),this.#J.addEventListener("change",this.#Y)}#L(){if(!this.#J)return;if(this.#j)this.#J.removeEventListener("input",this.#j);if(this.#Y)this.#J.removeEventListener("change",this.#Y)}#D(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}))}#z(){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"))}#T(J){if(!(J.target instanceof Element))return;if(J.target.closest("fig-select")){this.#_=!1;return}this.#_=this.#z()}#M(J){if(J.target instanceof Element&&J.target.closest("fig-select")){this.#_=!1;return}if(!this.#J||L(this.#J,"disabled")){this.#_=!1;return}if(this.#J.focus(),this.#_||this.#z()){this.#_=!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",u);class c extends HTMLElement{#Z=null;#Q=null;#J=null;#U=!1;#K=null;#k=new Set;#j=null;#Y=null;#$=this.#L.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#X();if(this.#_(),this.#G(),this.#W(),this.removeEventListener("click",this.#$),this.addEventListener("click",this.#$),!this.#K)this.#K=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.#_();if(Z)this.#G()});this.#K.observe(this,{attributes:!0})}disconnectedCallback(){this.#K?.disconnect(),this.#B(),this.removeEventListener("click",this.#$)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#_()}#X(){let J=Array.from(this.childNodes).filter((X)=>X.nodeType!==Node.TEXT_NODE||Boolean(X.textContent?.trim())),Q=J.find((X)=>X.nodeType===Node.ELEMENT_NODE&&X.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-text");for(let X of J)if(X!==Q)j.appendChild(X);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#U=Boolean(Q),this.replaceChildren(Z)}#_(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#U)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Text")}#N(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","multiline","resizable"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#G(){if(!this.#J)return;let J=this.#N(),Q=new Set(J);for(let Z of this.#k)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#k=Q}#W(){if(!this.#J)return;this.#j??=this.#q.bind(this,"input"),this.#Y??=this.#q.bind(this,"change"),this.#J.addEventListener("input",this.#j),this.#J.addEventListener("change",this.#Y)}#B(){if(!this.#J)return;if(this.#j)this.#J.removeEventListener("input",this.#j);if(this.#Y)this.#J.removeEventListener("change",this.#Y)}#q(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}))}#L(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",c);class s extends HTMLElement{#Z=null;#Q=null;#J=null;#U=!1;#K=null;#k=new Set;#j=null;#Y=null;#$=this.#L.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#X();if(this.#_(),this.#G(),this.#W(),this.removeEventListener("click",this.#$),this.addEventListener("click",this.#$),!this.#K)this.#K=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.#_();if(Z)this.#G()});this.#K.observe(this,{attributes:!0})}disconnectedCallback(){this.#K?.disconnect(),this.#B(),this.removeEventListener("click",this.#$)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#_()}#X(){let J=Array.from(this.childNodes).filter((X)=>X.nodeType!==Node.TEXT_NODE||Boolean(X.textContent?.trim())),Q=J.find((X)=>X.nodeType===Node.ELEMENT_NODE&&X.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-number");Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#U=Boolean(Q),this.replaceChildren(Z);for(let X of J)if(X!==Q)j.appendChild(X)}#_(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#U)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#N(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#G(){if(!this.#J)return;let J=this.#N(),Q=new Set(J);for(let Z of this.#k)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#k=Q}#W(){if(!this.#J)return;this.#j??=this.#q.bind(this,"input"),this.#Y??=this.#q.bind(this,"change"),this.#J.addEventListener("input",this.#j),this.#J.addEventListener("change",this.#Y)}#B(){if(!this.#J)return;if(this.#j)this.#J.removeEventListener("input",this.#j);if(this.#Y)this.#J.removeEventListener("change",this.#Y)}#q(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}))}#L(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",s);class y extends HTMLElement{static observedAttributes=["name","open","show-reset"];static#Z=["propskit-color","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text"].join(",");#Q=null;#J=null;#U=null;#K=new WeakMap;#k=null;#j=0;#Y=()=>this.#_();connectedCallback(){this.#I(),this.#$(),requestAnimationFrame(()=>{this.#D(),this.#M()})}disconnectedCallback(){if(this.#X(),this.#j)cancelAnimationFrame(this.#j),this.#j=0;if(this.#Q)this.#Q.removeEventListener("click",this.#G),this.#Q.removeEventListener("keydown",this.#W);this.#U?.querySelector("fig-button")?.removeEventListener("click",this.#B)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){this.#Q?.setAttribute("aria-expanded",String(this.open));return}if(J==="show-reset"){this.#H(),this.#M();return}this.#I()}get open(){let J=this.getAttribute("open");return J!==null&&J!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Q?.setAttribute("aria-expanded",String(!!J)),Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}get showReset(){let J=this.getAttribute("show-reset");if(J===null)return!0;return J!=="false"}set showReset(J){if(J)this.setAttribute("show-reset","true");else this.setAttribute("show-reset","false")}get dirty(){return this.hasAttribute("data-dirty")&&this.getAttribute("data-dirty")!=="false"}resetProperties(){this.#f()}#$(){if(this.removeEventListener("input",this.#Y,!0),this.removeEventListener("change",this.#Y,!0),this.addEventListener("input",this.#Y,!0),this.addEventListener("change",this.#Y,!0),!this.#k)this.#k=new MutationObserver(()=>{this.#D(),this.#_()});this.#k.disconnect(),this.#k.observe(this,{childList:!0,subtree:!0})}#X(){this.removeEventListener("input",this.#Y,!0),this.removeEventListener("change",this.#Y,!0),this.#k?.disconnect()}#_(){if(this.#j)return;this.#j=requestAnimationFrame(()=>{this.#j=0,this.#D(),this.#M()})}#N(J){return J instanceof Element&&Boolean(J.closest(".propskit-group-reset, .propskit-group-reset-tooltip"))}#G=(J)=>{if(this.#N(J.target))return;J.stopPropagation(),this.open=!this.open};#W=(J)=>{if(this.#N(J.target))return;if(J.key!=="Enter"&&J.key!==" ")return;J.preventDefault(),J.stopPropagation(),this.open=!this.open};#B=(J)=>{J.preventDefault(),J.stopPropagation(),this.#f()};#q(){return[...this.querySelectorAll(y.#Z)].filter((J)=>J.closest("propskit-group")===this)}#L(J){if(J.localName==="propskit-switch")return{kind:"checked",value:Boolean(J.checked)};if("value"in J)return{kind:"value",value:J.value};return{kind:"value",value:J.getAttribute("value")??""}}#D(){for(let J of this.#q()){if(this.#K.has(J))continue;if(J.hasAttribute("default")){if(J.localName==="propskit-switch"){this.#K.set(J,{kind:"checked",value:L(J,"default")});continue}this.#K.set(J,{kind:"value",value:J.getAttribute("default")??""});continue}this.#K.set(J,this.#L(J))}}#z(J){let Q=this.#K.get(J);if(!Q)return!1;let Z=this.#L(J);if(Q.kind==="checked")return Boolean(Z.value)!==Boolean(Q.value);return String(Z.value??"")!==String(Q.value??"")}#T(){for(let J of this.#q())if(this.#z(J))return!0;return!1}#M(){if(this.#T())this.setAttribute("data-dirty","");else this.removeAttribute("data-dirty");this.#H()}#F(J){let Q=this.#K.get(J);if(!Q)return;if(Q.kind==="checked"){J.checked=Q.value;let $={checked:Boolean(Q.value),value:J.getAttribute("value")??""};J.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,cancelable:!0,composed:!0}));return}if(typeof J.resetToDefault==="function"){let $=J.getAttribute("default");if(J.setAttribute("default",String(Q.value??"")),J.resetToDefault(),$===null)J.removeAttribute("default");else J.setAttribute("default",$);return}J.value=Q.value;let Z=J.getAttribute?.("value")??("value"in J?J.value:Q.value);J.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#f(){this.#D();for(let J of this.#q())this.#F(J);this.#M(),this.dispatchEvent(new CustomEvent("reset",{bubbles:!0,composed:!0}))}#H(){if(!this.showReset){this.#U?.setAttribute("hidden","");return}this.#S(),this.#U?.removeAttribute("hidden")}#S(){if(!this.#Q||!this.showReset)return;let J=this.#Q.querySelector(":scope > .propskit-group-reset-tooltip");if(!J){J=document.createElement("fig-tooltip"),J.className="propskit-group-reset-tooltip",J.setAttribute("text","Reset properties");let Q=document.createElement("fig-button");Q.className="propskit-group-reset",Q.setAttribute("variant","ghost"),Q.setAttribute("icon",""),Q.setAttribute("aria-label","Reset properties");let Z=document.createElement("fig-icon");Z.setAttribute("name","reset"),Q.appendChild(Z),J.appendChild(Q),this.#Q.appendChild(J),Q.addEventListener("click",this.#B)}else{let Q=J.querySelector("fig-button");Q?.removeEventListener("click",this.#B),Q?.addEventListener("click",this.#B)}this.#U=J}#I(){let Q=this.getAttribute("name")||"Group",Z=this.querySelector(":scope > fig-header");if(Z)this.#Q=Z;else if(!this.#Q||!this.#Q.dataset.generated)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let $=this.#Q.querySelector("h3");if(!$)$=document.createElement("h3"),this.#Q.prepend($);if(!$.id)$.id=i("propskit-group");if(this.#Q.dataset.generated){let j=$.querySelector(".propskit-group-chevron");if($.textContent=Q,j)$.prepend(j)}if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",$.id);if(!$.querySelector(".propskit-group-chevron")){let j=document.createElement("fig-icon");j.setAttribute("name","chevron"),j.setAttribute("size","small"),j.className="propskit-group-chevron",$.prepend(j)}if(this.#J=$.querySelector(".propskit-group-chevron"),this.#H(),this.#Q.removeEventListener("click",this.#G),this.#Q.addEventListener("click",this.#G),this.#Q.setAttribute("role","button"),this.#Q.setAttribute("tabindex","0"),this.#Q.setAttribute("aria-expanded",String(this.open)),this.#Q.removeEventListener("keydown",this.#W),this.#Q.addEventListener("keydown",this.#W),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Q.setAttribute("aria-expanded","false")}}customElements.define("propskit-group",y);class p extends HTMLElement{#Z=null;#Q=null;#J=null;#U=!1;#K=null;#k=new Set;#j=0;#Y=0;#$=null;#X=null;#_=0;#N=null;#G=!1;#W=0;#B=null;#q=0;#L=null;#D=null;#z=null;#T=this.#l.bind(this);#M=this.#m.bind(this);#F=this.#_J.bind(this);#f=this.#e.bind(this);#H=this.#o.bind(this);#S=this.#x.bind(this);#I=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.#Z)this.#R();if(this.#P(),this.#O(),this.#$J(),this.#y(),this.removeEventListener("pointerdown",this.#T,{capture:!0}),this.addEventListener("pointerdown",this.#T,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#H),this.addEventListener("contextmenu",this.#H),!this.#K)this.#K=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName&&this.#I.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#P();if(Z)this.#O(),this.#y()});this.#K.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#K?.disconnect(),this.#j)cancelAnimationFrame(this.#j),this.#j=0;if(this.#Y)cancelAnimationFrame(this.#Y),this.#Y=0;this.#w(),this.#E(),this.#b(),this.#s(),this.#v(),this.removeEventListener("pointerdown",this.#T,{capture:!0}),this.removeEventListener("contextmenu",this.#H),this.#X?.removeEventListener("change",this.#S)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#P()}#R(){let J=Array.from(this.childNodes).filter((X)=>{return X.nodeType!==Node.TEXT_NODE||Boolean(X.textContent?.trim())}),Q=J.find((X)=>X.nodeType===Node.ELEMENT_NODE&&X.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-slider");j.setAttribute("text","true");for(let X of this.#u()){let Y=this.getAttribute(X);j.setAttribute(X,Y??"")}Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#U=Boolean(Q),this.replaceChildren(Z),this.#h();for(let X of J){if(X===Q)continue;this.#J.appendChild(X)}}#h(){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.#S),this.#X=J,this.appendChild(J)}#P(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Q.parentElement===this.#Z)this.#Q.remove()}else{if(!this.#U)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#O(){if(!this.#J)return;let J=this.#u(),Q=new Set(J.filter(($)=>$!=="text"));for(let $ of this.#k)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text")continue;let j=this.getAttribute($);this.#J.setAttribute($,j??"")}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.#k=Q,this.#g()}#u(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#I.has(Q))}#g(){if(this.#j)cancelAnimationFrame(this.#j);this.#j=requestAnimationFrame(()=>{this.#j=0,this.#i(),this.#C()})}#y(){if(this.#Y)cancelAnimationFrame(this.#Y);this.#Y=requestAnimationFrame(()=>{this.#Y=0,this.#C()})}#C(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#$)this.#c(J);J?.removeAttribute("tabindex"),Q?.setAttribute("tabindex","-1")}#c(J){if(this.#s(),this.#$=J,!this.#$)return;this.#$.addEventListener("dblclick",this.#f,{capture:!0})}#s(){if(!this.#$)return;this.#$.removeEventListener("dblclick",this.#f,{capture:!0}),this.#$=null}#e(J){J.preventDefault(),J.stopImmediatePropagation(),this.#p()}#l(J){if(J.button!==0||L(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.#$;if(!Q)return;this.#E(),this.#b(),this.#$=Q,this.#G=!0,this.#L=J.pointerId,this.#W=this.#a();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#B={left:Z.left,right:Z.right,width:Z.width},this.#q=$.width,window.addEventListener("pointermove",this.#M,{passive:!0}),window.addEventListener("pointerup",this.#F,{once:!0}),window.addEventListener("pointercancel",this.#F,{once:!0}),window.addEventListener("blur",this.#F,{once:!0})}#m(J){if(!this.#G)return;if(J.pointerId!==this.#L)return;if(J.buttons===0){this.#_J(J);return}this.#ZJ(J.clientX)}#_J(J){if(J?.pointerId!==void 0&&this.#L!==null&&J.pointerId!==this.#L)return;this.#E(),this.#b()}#E(){window.removeEventListener("pointermove",this.#M),window.removeEventListener("pointerup",this.#F),window.removeEventListener("pointercancel",this.#F),window.removeEventListener("blur",this.#F),this.#G=!1,this.#L=null}#o(J){if(L(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#w(),this.#kJ(J.clientX,J.clientY)}#kJ(J,Q){let Z=!1,$=0,j=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",j,!0),window.removeEventListener("pointercancel",j,!0),requestAnimationFrame(()=>{this.#X?.showAt?.(J,Q)})};window.addEventListener("pointerup",j,{once:!0,capture:!0}),window.addEventListener("pointercancel",j,{once:!0,capture:!0}),$=window.setTimeout(j,180)}#x(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#p()}#w(){if(this.#_)clearTimeout(this.#_),this.#_=0;this.#N=null}#a(){let J=getComputedStyle(this).getPropertyValue("--propskit-slider-elastic-distance").trim();if(J.includes("var(")||!J.endsWith("px")){let Z=document.createElement("div");Object.assign(Z.style,{position:"absolute",visibility:"hidden",pointerEvents:"none",width:"var(--propskit-slider-elastic-distance)"}),this.appendChild(Z),J=getComputedStyle(Z).width,Z.remove()}let Q=Number.parseFloat(J);return Number.isFinite(Q)?Math.max(0,Q):0}#ZJ(J){let Q=this.#B;if(!Q||!this.#W){this.#b();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#JJ();return}let $=Math.max(-this.#W,Math.min(this.#W,Z*0.5)),j=Math.abs($),X=this.#q?(this.#q+j)/this.#q:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${j}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${X}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#b(){this.#JJ(),this.#W=0,this.#B=null,this.#q=0,this.#L=null}#JJ(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#WJ(J){let Q=this.#$;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,j=Number(Q.min||0),X=Number(Q.max||100),Y=Q.step==="any"?0:Number(Q.step||1),K=j+(X-j)*$;if(!Y)return String(K);let _=Math.round((K-j)/Y)*Y+j,G=Math.max(0,`${Y}`.split(".")[1]?.length||0);return String(Number(_.toFixed(G)))}#n(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.getAttribute("value")??this.#J?.getAttribute("value")??this.#$?.min??"0"}#p(){this.#w(),this.#d(this.#n(),"input"),this.#d(this.#n(),"change")}#d(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}))}#i(){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??"")}#$J(){if(!this.#J)return;if(!this.#D)this.#D=this.#QJ.bind(this,"input");if(!this.#z)this.#z=this.#QJ.bind(this,"change");this.#J.addEventListener("input",this.#D),this.#J.addEventListener("change",this.#z)}#v(){if(!this.#J)return;if(this.#D)this.#J.removeEventListener("input",this.#D);if(this.#z)this.#J.removeEventListener("change",this.#z)}#QJ(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#b();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.#p()}}customElements.define("propskit-slider",p);class d extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Z=50;#Q=50;#J=75;#U=75;#K=0;#k=!1;#j=0;#Y=null;#$=null;#X=null;#_=null;#N=null;#G=null;#W=null;#B=null;#q=null;#L=!1;#D=!1;#z=!1;#T=!1;#M=null;#F="";#f="";#H=null;#S=null;#I=null;#R="";#h="";#P=null;get#O(){return this.getAttribute("type")||"point"}get#u(){return this.#O==="point-radius"||this.#O==="point-radius-angle"}get#g(){return this.#O==="point-radius-angle"}get#y(){return this.#O==="point-point"}get#C(){return this.#O==="point-radius-angle"||this.#O==="point-point"}get#c(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#s(){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"}#e(J){let Q=this.#s;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#l(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Z)}%, ${Math.round(this.#Q)}%`}get#m(){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.#U)}%`}get#_J(){return this.getAttribute("drag-surface")||"parent"}get#E(){let J=this.#_J;if(J==="parent")return this.parentElement;return this.closest(J)}get#o(){let J=this.#_J;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#kJ(J){if(this.#k)return this.#K/100*J;return this.#K}#x(){if(this.#k)return`Radius ${Math.round(this.#K)}%`;return`Radius ${Math.round(this.#K)}`}connectedCallback(){this.#w(),this.#a()}disconnectedCallback(){this.#SJ(),this.#JJ(),this.#d(),document.body.classList.remove("fig-lab-move-active"),document.body.classList.remove("fig-lab-rotate-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#L&&!this.#D&&!this.#z&&!this.#T)if(this.#w(),this.#Y)this.#r();else this.#a();if(J==="type")this.#w(),this.#a();if(J==="color"&&this.#Y)if(Z)this.#Y.setAttribute("color",Z);else this.#Y.removeAttribute("color");if(J==="disabled")this.#a();if(J==="tooltips")this.#a();if(J==="snapping"&&this.#Y){if(this.#Y.setAttribute("drag-snapping",Z||"false"),this.#$)this.#$.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#G)this.#G.setAttribute("text",this.#l);if(this.#W)this.#W.setAttribute("text",this.#m)}}#w(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#Z=Q.x;if(typeof Q.y==="number")this.#Q=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#k=!0,this.#K=parseFloat(Z);else this.#k=!1,this.#K=parseFloat(Z);if(!Number.isFinite(this.#K))this.#K=0}if(typeof Q.angle==="number")this.#j=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#U=Q.y2}catch{}}get value(){let J={x:this.#Z,y:this.#Q};if(this.#O==="color"){let Q=this.getAttribute("color")||this.#Y?.getAttribute("color");if(Q)J.color=Q}if(this.#u)J.radius=this.#k?`${this.#K}%`:this.#K;if(this.#g)J.angle=this.#j;if(this.#y)J.x2=this.#J,J.y2=this.#U;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#a(){this.innerHTML="",this.#Y=null,this.#$=null,this.#X=null,this.#_=null,this.#N=null,this.#G=null,this.#W=null,this.#B=null,this.#q=null;let J=L(this,"disabled"),Q=this.#O,Z=this.#c,$=this.#o,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",$),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#s),j.setAttribute("value",`${this.#Z}% ${this.#Q}%`),J)j.setAttribute("disabled","");if(Q==="color"){j.setAttribute("type","color");let X=this.getAttribute("color");if(X)j.setAttribute("color",X)}else j.setAttribute("type","canvas");if(this.#y)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#Y=j,this.#u)this.#OJ();if(this.#C)this.#TJ();if(Z){let X=document.createElement("fig-tooltip");X.setAttribute("action","manual"),X.setAttribute("theme","canvas"),X.setAttribute("pointer","false"),X.setAttribute("text",this.#l),X.appendChild(j),this.appendChild(X),this.#G=X}else this.appendChild(j);if(this.#g)this.#t(J,Z,$);if(this.#y)this.#KJ(J,Z,$);this.#ZJ(this.#Y),this.#ZJ(this.#X),this.#ZJ(this.#$),this.#RJ(),this.#v(),requestAnimationFrame(()=>this.#r())}#ZJ(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>{if(Q.target?.classList?.contains("fig-handle-hit-area")&&J.querySelector(".fig-handle-hit-area"))this.#p(Q,J);else this.#b(Q)},{capture:!0})}#b(J){if(L(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#M===null)this.#F=document.body.style.getPropertyValue("cursor"),this.#f=document.body.style.getPropertyPriority("cursor");if(this.#M=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.#M!==null&&Q.pointerId!==this.#M)return;if(Q?.type==="blur")this.#JJ();else requestAnimationFrame(()=>this.#JJ())};window.addEventListener("pointerup",this.#H),window.addEventListener("pointercancel",this.#H),window.addEventListener("blur",this.#H)}#JJ(){if(this.#M===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#F)document.body.style.setProperty("cursor",this.#F,this.#f);else document.body.style.removeProperty("cursor");if(this.#M=null,this.#F="",this.#f="",this.#H)window.removeEventListener("pointerup",this.#H),window.removeEventListener("pointercancel",this.#H),window.removeEventListener("blur",this.#H)}#WJ(J){if(!J)return 0;if(J===this.#X)return this.#j;if(!this.#y)return 0;let Q=this.#LJ();return J===this.#Y?Q+180:Q}#n(){if(this.#S===null)return;let J=this.#qJ(this.#WJ(this.#I));document.body.style.setProperty("--fig-lab-cursor-rotate",J),document.body.style.setProperty("cursor",J,"important")}#p(J,Q){if(L(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#S===null)this.#R=document.body.style.getPropertyValue("cursor"),this.#h=document.body.style.getPropertyPriority("cursor");if(this.#S=J?.pointerId??-1,this.#I=Q,document.body.classList.add("fig-lab-rotate-active"),this.#n(),!this.#P)this.#P=(Z)=>{if(Z?.pointerId!==void 0&&this.#S!==null&&Z.pointerId!==this.#S)return;if(Z?.type==="blur")this.#d();else requestAnimationFrame(()=>this.#d())};window.addEventListener("pointerup",this.#P),window.addEventListener("pointercancel",this.#P),window.addEventListener("blur",this.#P)}#d(){if(this.#S===null)return;if(document.body.classList.remove("fig-lab-rotate-active"),document.body.style.removeProperty("--fig-lab-cursor-rotate"),this.#R)document.body.style.setProperty("cursor",this.#R,this.#h);else document.body.style.removeProperty("cursor");if(this.#S=null,this.#I=null,this.#R="",this.#h="",this.#P)window.removeEventListener("pointerup",this.#P),window.removeEventListener("pointercancel",this.#P),window.removeEventListener("blur",this.#P)}#i(J,Q,Z,$){if(!J)return;let j=()=>!!$?.(),X=()=>{let _=Q();if(!_)return;_.removeAttribute("show"),_.hidePopup?.()},Y=()=>{if(j()){X();return}let _=Q();if(!_)return;if(Z)_.setAttribute("text",Z());_.setAttribute("show","true"),_.showPopup?.()},K=()=>{X()};J.addEventListener("pointerenter",Y),J.addEventListener("pointerleave",K)}#$J(){return this.#L||this.#D||this.#z||this.#T}#v(){if(this.#Y)this.#i(this.#Y,()=>this.#G,()=>this.#l,()=>this.#$J()||!!this.#Y?.querySelector("fig-color-tip"));if(this.#X)this.#i(this.#X,()=>this.#q,()=>`Angle ${Math.round(this.#j)}°`,()=>this.#$J());if(this.#$)this.#i(this.#$,()=>this.#W,()=>this.#m,()=>this.#$J());if(this.#_){let J=this.#_.querySelector(".fig-canvas-control-radius-hit");this.#GJ(J||this.#_)}if(this.#O==="color"&&this.#Y&&this.#G)new MutationObserver(()=>{if(this.#Y?.querySelector("fig-color-tip"))this.#G?.removeAttribute("show"),this.#G?.hidePopup?.()}).observe(this.#Y,{childList:!0,subtree:!0})}#QJ(J,Q){let Z=this.#B;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?.()}#GJ(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#B;if(!Z)return;Z.setAttribute("text",this.#x()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#QJ(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#z)return;this.#QJ(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#z)return;let Q=this.#B;if(!Q)return;Q.removeAttribute("show")})}#OJ(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");Q.classList.add("fig-canvas-control-radius"),Q.setAttribute("overflow","visible");let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");Z.classList.add("fig-canvas-control-radius-hit"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","circle");$.classList.add("fig-canvas-control-radius-halo"),Q.appendChild($);let j=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(j),this.#_=Q,this.#c){let X=document.createElement("fig-tooltip");X.setAttribute("action","manual"),X.setAttribute("theme","canvas"),X.setAttribute("pointer","false"),X.setAttribute("text",this.#x()),X.appendChild(Q),this.appendChild(X),this.#B=X}else this.appendChild(Q);this.#fJ(Z)}#TJ(){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.#y){let j=document.createElementNS("http://www.w3.org/2000/svg","line");j.classList.add("fig-canvas-control-angle-line-hit"),j.setAttribute("stroke","transparent"),j.setAttribute("stroke-width","12"),j.setAttribute("stroke-linecap","round"),j.style.pointerEvents="stroke",Q.appendChild(j),this.#PJ(j)}let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-halo"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","line");$.classList.add("fig-canvas-control-angle-line"),Q.appendChild($),this.#N=Q,this.appendChild(Q)}#PJ(J){J.addEventListener("pointerdown",(Q)=>{if(L(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#E;if(!Z)return;let $=Z.getBoundingClientRect(),j=Q.clientX,X=Q.clientY,Y=this.#Z,K=this.#Q,_=this.#J,G=this.#U;this.#L=!0,this.#D=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let k=(q)=>{let B=Z.getBoundingClientRect(),T=B.width>0?(q.clientX-j)/B.width*100:0,N=B.height>0?(q.clientY-X)/B.height*100:0,D=-Math.min(Y,_),z=100-Math.max(Y,_),F=-Math.min(K,G),M=100-Math.max(K,G),R=Math.max(D,Math.min(z,T)),H=Math.max(F,Math.min(M,N));this.#Z=Y+R,this.#Q=K+H,this.#J=_+R,this.#U=G+H,this.#r(),this.#XJ()},U=()=>{document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#A(),this.#YJ(),window.removeEventListener("pointermove",k),window.removeEventListener("pointerup",U),requestAnimationFrame(()=>{this.#L=!1,this.#D=!1})};window.addEventListener("pointermove",k),window.addEventListener("pointerup",U)})}#t(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 j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",`${Math.round(this.#j)}°`),j.appendChild($),this.appendChild(j),this.#q=j}else this.appendChild($)}#KJ(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.#s),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#U}%`),J)$.setAttribute("disabled","");if(this.#$=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#m),j.appendChild($),this.appendChild(j),this.#W=j}else this.appendChild($)}#BJ(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`}#qJ(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`}#jJ(J,Q){if(!J)return;J.style.setProperty("cursor",Q,"important")}#DJ(J,Q){if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(!Z)return;if(Z.setAttribute("data-cursor","rotate"),this.#jJ(Z,this.#qJ(Q)),this.#I===J)this.#n()}#FJ(){if(!this.#X||!this.#g)return;this.#DJ(this.#X,this.#j)}#LJ(){return Math.atan2(this.#U-this.#Q,this.#J-this.#Z)*180/Math.PI}#zJ(){if(!this.#y)return;let J=this.#LJ();this.#Y?.style.removeProperty("cursor"),this.#$?.style.removeProperty("cursor"),this.#DJ(this.#Y,J+180),this.#DJ(this.#$,J)}#UJ(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`}#r(){let J=this.#E;if(!J||!this.#Y)return;let Q=J.getBoundingClientRect();if(this.#UJ(this.#Y,this.#Z,this.#Q,Q),this.#_){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#kJ(Q.width),X=this.#_,Y=Math.max(j*2,1);X.style.position="absolute",X.style.width=`${Y}px`,X.style.height=`${Y}px`,X.style.left=`${Z-j}px`,X.style.top=`${$-j}px`,X.setAttribute("viewBox",`0 0 ${Y} ${Y}`);let K=X.querySelectorAll("circle");for(let _ of K)_.setAttribute("cx",String(j)),_.setAttribute("cy",String(j)),_.setAttribute("r",String(Math.max(j-1,0)))}if(this.#N&&this.#C){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j,X;if(this.#y)j=this.#J/100*Q.width,X=this.#U/100*Q.height;else{let _=this.#kJ(Q.width),G=this.#j*Math.PI/180;j=Z+_*Math.cos(G),X=$+_*Math.sin(G)}let Y=this.#N;Y.style.width=`${Q.width}px`,Y.style.height=`${Q.height}px`,Y.style.left="0",Y.style.top="0",Y.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let K=Y.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let _ of K)_.setAttribute("x1",String(Z)),_.setAttribute("y1",String($)),_.setAttribute("x2",String(j)),_.setAttribute("y2",String(X))}if(this.#X&&this.#g){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#kJ(Q.width),X=this.#j*Math.PI/180,Y=Z+j*Math.cos(X),K=$+j*Math.sin(X),_=Q.width>0?Y/Q.width*100:0,G=Q.height>0?K/Q.height*100:0;this.#UJ(this.#X,_,G,Q)}if(this.#$&&this.#y)this.#UJ(this.#$,this.#J,this.#U,Q);this.#FJ(),this.#zJ()}#XJ(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#YJ(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#A(){this.setAttribute("value",JSON.stringify(this.value))}#RJ(){if(!this.#Y)return;if(this.#Y.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#XJ();return}this.#L=!0;let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#G)this.#G.removeAttribute("show"),this.#G.hidePopup?.();this.#r(),this.#XJ()}),this.#Y.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#YJ();return}let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#G)this.#G.removeAttribute("show");this.#r(),this.#A(),this.#YJ(),requestAnimationFrame(()=>{this.#L=!1})}),this.#X)this.#X.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#E;if(!Q)return;this.#T=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Z/100*Z.width,j=this.#Q/100*Z.height,X=J.detail?.x??0,Y=J.detail?.y??0,K=this.#X.offsetWidth/2,_=this.#X.offsetHeight/2,G=X+K-$,k=Y+_-j,U=Math.atan2(k,G)*180/Math.PI;if(this.#e(J.detail?.shiftKey))U=Math.round(U/15)*15;this.#j=U;let q=Math.sqrt(G*G+k*k);if(this.#e(J.detail?.shiftKey)){let B=this.#k?5:10;if(this.#k){let T=q/Z.width*100;T=Math.round(T/B)*B,q=T/100*Z.width}else q=Math.round(q/B)*B}if(this.#k)this.#K=Math.max(0,q/Z.width*100);else this.#K=Math.max(0,q);if(this.#q)this.#q.setAttribute("text",`Angle ${Math.round(this.#j)}°`),this.#q.setAttribute("show","true"),this.#q.showPopup?.();this.#r(),this.#XJ()}),this.#X.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#q)this.#q.removeAttribute("show");this.#r(),this.#A(),this.#YJ(),requestAnimationFrame(()=>{this.#T=!1})}),this.#X.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#E;if(!Z)return;if(this.#T=!0,this.classList.add("fig-canvas-control-ring-active"),this.#X.setAttribute("selected",""),this.#q)this.#q.setAttribute("show","true"),this.#q.showPopup?.();let $=(X)=>{let Y=Z.getBoundingClientRect(),K=this.#Z/100*Y.width,_=this.#Q/100*Y.height,G=X.clientX-Y.left-K,k=X.clientY-Y.top-_,U=Math.atan2(k,G)*180/Math.PI;if(this.#e(X.shiftKey))U=Math.round(U/15)*15;if(this.#j=U,this.#q)this.#q.setAttribute("text",`Angle ${Math.round(U)}°`);this.#r(),this.#XJ()},j=()=>{if(this.#T=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#X.removeAttribute("selected"),this.#q)this.#q.removeAttribute("show");this.#A(),this.#YJ(),window.removeEventListener("pointermove",$),window.removeEventListener("pointerup",j)};window.addEventListener("pointermove",$),window.addEventListener("pointerup",j)});if(this.#$)this.#$.addEventListener("input",(J)=>{J.stopPropagation(),this.#D=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#U/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#U=Math.round(Math.max(0,Math.min(100,Z*100))),this.#W)this.#W.removeAttribute("show"),this.#W.hidePopup?.();this.#r(),this.#XJ()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#W)this.#W.removeAttribute("show");this.#r(),this.#A(),this.#YJ(),requestAnimationFrame(()=>{this.#D=!1})}),this.#VJ(this.#Y,!0),this.#VJ(this.#$,!1)}#VJ(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let j=this.#E;if(!j)return;this.#L=!0;let X=j.getBoundingClientRect(),Y=Q?this.#J:this.#Z,K=Q?this.#U:this.#Q,_=Q?this.#Z:this.#J,G=Q?this.#Q:this.#U,k=Y/100*X.width,U=K/100*X.height,q=_/100*X.width,B=G/100*X.height,T=Math.sqrt((q-k)**2+(B-U)**2),N=Q?this.#G:this.#W;if(N)N.removeAttribute("show"),N.hidePopup?.();let D=(F)=>{let M=j.getBoundingClientRect(),R=Y/100*M.width,H=K/100*M.height,P=F.clientX-M.left-R,S=F.clientY-M.top-H,V=Math.atan2(S,P);if(this.#e(F.shiftKey))V=Math.round(V*180/Math.PI/15)*15*Math.PI/180;let t=R+T*Math.cos(V),e=H+T*Math.sin(V),x=Math.max(0,Math.min(100,t/M.width*100)),b=Math.max(0,Math.min(100,e/M.height*100));if(Q)this.#Z=x,this.#Q=b;else this.#J=x,this.#U=b;this.#r(),this.#XJ()},z=()=>{if(this.#L=!1,N)N.removeAttribute("show");this.#A(),this.#YJ(),window.removeEventListener("pointermove",D),window.removeEventListener("pointerup",z)};window.addEventListener("pointermove",D),window.addEventListener("pointerup",z)})}#fJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#z)return;let $=this.#E;if(!$)return;let j=$.getBoundingClientRect(),X=this.#Z/100*j.width,Y=this.#Q/100*j.height,K=Math.atan2(Z.clientY-j.top-Y,Z.clientX-j.left-X)*180/Math.PI;this.#jJ(J,this.#BJ(K))});let Q=(Z)=>{if(L(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#E;if(!$)return;if(this.#B)this.#B.setAttribute("show","true"),this.#B.showPopup?.(),this.#QJ(Z.clientX,Z.clientY);if(this.#q)this.#q.removeAttribute("show"),this.#q.hidePopup?.();let j=this.#X?.style.pointerEvents,X=this.#X?.querySelector(".fig-handle-hit-area"),Y=X?.style.pointerEvents;if(this.#X)this.#X.style.pointerEvents="none";if(X)X.style.pointerEvents="none";let K=document.body.style.cursor;J.style.pointerEvents="none";let _=$.getBoundingClientRect(),G=this.#Z/100*_.width,k=this.#Q/100*_.height,U=Math.atan2(Z.clientY-_.top-k,Z.clientX-_.left-G)*180/Math.PI,q=Math.round(U);document.body.style.cursor=this.#BJ(q);let B=(N)=>{let D=$.getBoundingClientRect(),z=this.#Z/100*D.width,F=this.#Q/100*D.height,M=N.clientX-D.left-z,R=N.clientY-D.top-F,H=Math.round(Math.atan2(R,M)*180/Math.PI);if(H!==q)q=H,document.body.style.cursor=this.#BJ(H);let P=Math.sqrt(M*M+R*R);if(this.#e(N.shiftKey)){let S=this.#k?5:10;if(this.#k){let V=P/D.width*100;V=Math.round(V/S)*S,P=V/100*D.width}else P=Math.round(P/S)*S}if(this.#k)this.#K=Math.max(0,P/D.width*100);else this.#K=Math.max(0,P);if(this.#B)this.#B.setAttribute("text",this.#x()),this.#QJ(N.clientX,N.clientY);this.#r(),this.#XJ()},T=()=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#X)this.#X.style.pointerEvents=j??"";if(X)X.style.pointerEvents=Y??"";if(document.body.style.cursor=K,this.#B)this.#B.removeAttribute("show");this.#A(),this.#YJ(),window.removeEventListener("pointermove",B),window.removeEventListener("pointerup",T)};window.addEventListener("pointermove",B),window.addEventListener("pointerup",T)};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#SJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",d);class W extends HTMLElement{#Z=[W.#f()];#Q=0;#J=2;#U=240;#K=120;#k={min:-1,max:1};#j=null;#Y=null;#$=null;#X=null;#_=0;#N=null;#G=null;#W=null;#B=null;#q=[];#L=[];#D=[];#z=[];#T=new Set;#M=null;#F=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#f(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.#P(this.getAttribute("value")),this.#h(),this.#m(),this.#b()}disconnectedCallback(){if(this.#j=null,this.#v(),this.#M)this.#M.disconnect(),this.#M=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#P(Z),this.isConnected)this.#m();return}if(J==="precision"){if(this.#J=this.#H("precision",2),this.isConnected)this.#UJ();return}if(J==="aspect-ratio"){if(this.#h(),this.#Y)this.#i();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#m()}}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.#Z.map((J)=>this.#u(J))}}get preset(){let J=this.#g;return W.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}#S(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}#I(){return this.getAttribute("edit")!=="false"}#R(){return this.#S("disabled",!1)}#h(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#P(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.#Z=Z.map(($)=>this.#O($)),!this.#Z.length)this.#Z=[W.#f()];return this.#Q=Math.min(this.#Q,this.#Z.length-1),!0}#O(J={}){return{type:this.#y(J.type),frequency:this.#C(J.frequency,1,0.1,16),amplitude:this.#C(J.amplitude,1,-4,4),phase:this.#C(J.phase,0,-360,360),offset:this.#C(J.offset,0,-4,4)}}#u(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#g(){if(!this.#Z[this.#Q])this.#Q=0;return this.#Z[this.#Q]||W.#f()}#y(J){let Q=String(J||"").toLowerCase();return W.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#C(J,Q,Z,$){let j=Number.parseFloat(J);if(!Number.isFinite(j))return Q;return Math.min($,Math.max(Z,j))}#c(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#s(J){return String(J).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}static#e(J){return W.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let j=Q-10,X="";for(let Y=0;Y<=32;Y++){let K=Y/32,_=W.#l(J,K),G=5+K*j,k=5+(1-(_+1)/2)*j;X+=`${Y===0?"M":"L"}${G.toFixed(1)},${k.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${X}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#l(J,Q,Z=0){let $=Q+Z/360,j=$-Math.floor($),X=$*Math.PI*2;switch(J){case"square":return Math.sin(X)>=0?1:-1;case"sawtooth":return j*2-1;case"triangle":return 1-Math.abs(j*4-2);default:return Math.sin(X)}}#m(){this.#v(),this.innerHTML=this.#_J(),this.#w(),this.#JJ(),this.#i(),this.#PJ(),this.#$J()}#_J(){let J=this.#R()?" disabled":"";return`<div class="propskit-oscillator-svg-container">
-        <svg viewBox="0 0 ${this.#U} ${this.#K}" class="propskit-oscillator-svg">
-          <rect class="propskit-oscillator-bounds" x="0" y="0" width="${this.#U}" height="${this.#K}"></rect>
-          <line class="propskit-oscillator-baseline"></line>
-          <path class="propskit-oscillator-path"></path>
-          <circle class="propskit-oscillator-playhead"></circle>
-          <foreignObject class="propskit-oscillator-handle propskit-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="propskit-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle size="small" aria-label="Oscillator amplitude handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
-          <foreignObject class="propskit-oscillator-handle propskit-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="propskit-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle size="small" aria-label="Oscillator frequency handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
-        </svg>
-      </div>
-      ${this.#I()?this.#E(J):""}`}#E(J){return`<div class="propskit-oscillator-waves">
-      ${this.#Z.map((Q,Z)=>this.#o(Q,Z,J)).join("")}
-    </div>`}#o(J,Q,Z){let $=Z||this.#Z.length<=1?" disabled":"",j=Q===this.#Q?" data-active":"",X=W.#e(J.type);return`<fig-group class="propskit-oscillator-wave" collapsible borderless compact="true"${this.#T.has(Q)?' open="true"':' open="false"'} data-wave-index="${Q}">
-      <fig-header borderless>
-        <h3>${X}</h3>
-        <fig-tooltip text="Remove form">
-          <fig-button class="propskit-oscillator-remove-button" variant="ghost" icon data-wave-index="${Q}" aria-label="Remove form"${$}><fig-icon name="minus"></fig-icon></fig-button>
-        </fig-tooltip>
-        <fig-tooltip text="Add form">
-          <fig-button class="propskit-oscillator-add-type-button" type="select" variant="ghost" icon data-wave-index="${Q}" aria-label="Add form"${Z}>
-            <fig-icon name="add"></fig-icon>
-            ${this.#kJ("propskit-oscillator-add-type","sine",Z,Q)}
-          </fig-button>
-        </fig-tooltip>
-      </fig-header>
-      <div class="propskit-oscillator-fields" data-wave-index="${Q}"${j}>
-        ${this.#x(Q,"frequency","Frequency",0.1,16,0.1,"")}
-        ${this.#x(Q,"amplitude","Amplitude",-4,4,0.1,"")}
-        ${this.#x(Q,"phase","Phase",-360,360,1,"°")}
-        ${this.#x(Q,"offset","Offset",-4,4,0.1,"")}
-      </div>
-    </fig-group>`}#kJ(J,Q,Z,$=null){let j=W.TYPES.map((Y)=>{let K=Y.value===Q?" selected":"";return`<option value="${Y.value}"${K}>
-        ${W.waveIcon(Y.value,24)}
-        <label>${Y.name}</label>
-      </option>`}).join(""),X=$===null?"":` data-wave-index="${W.#s(String($))}"`;return`<fig-dropdown class="${J}" value="${Q}" experimental="modern" type="dropdown" label="Add form"${X}${Z}>${j}</fig-dropdown>`}#x(J,Q,Z,$,j,X,Y){let K=this.#R()?" disabled":"",_=Y?` units="${W.#s(Y)}"`:"",G=this.#Z[J]||W.#f();return`<propskit-slider class="propskit-oscillator-field" label="${Z}" direction="horizontal" name="${Q}" data-wave-index="${J}" value="${this.#c(G[Q])}" min="${$}" max="${j}" step="${X}" precision="${this.#J}" elastic="false"${_}${K}></propskit-slider>`}#w(){this.#Y=this.querySelector(".propskit-oscillator-svg"),this.#$=this.querySelector(".propskit-oscillator-path"),this.#X=this.querySelector(".propskit-oscillator-playhead"),this.#N=this.querySelector(".propskit-oscillator-baseline"),this.#G=this.querySelector(".propskit-oscillator-bounds"),this.#W=this.querySelector('[data-handle="amplitude"]'),this.#B=this.querySelector('[data-handle="frequency"]'),this.#L=Array.from(this.querySelectorAll(".propskit-oscillator-wave-type")),this.#q=Array.from(this.querySelectorAll("propskit-slider[name]")),this.#z=Array.from(this.querySelectorAll("fig-group.propskit-oscillator-wave")),this.#D=Array.from(this.querySelectorAll(".propskit-oscillator-fields"))}#a(J){let Q=new Set;for(let Z of this.#T)if(Z<J)Q.add(Z);else if(Z>J)Q.add(Z-1);this.#T=Q}#ZJ(J){let Q=new Set;for(let Z of this.#T)Q.add(Z>=J?Z+1:Z);Q.add(J),this.#T=Q}#b(){if(this.#M||!window.ResizeObserver)return;this.#M=new ResizeObserver(()=>{if(this.#JJ())this.#i()}),this.#M.observe(this)}#JJ(){if(!this.#Y)return!1;let J=this.#Y.getBoundingClientRect(),Q=Math.max(1,Math.round(J.width||240)),Z=Math.max(1,Math.round(J.height||120)),$=Q!==this.#U||Z!==this.#K;return this.#U=Q,this.#K=Z,this.#Y.setAttribute("viewBox",`0 0 ${Q} ${Z}`),$}#WJ(){let J=1,Q=256;for(let Z=0;Z<=Q;Z++)J=Math.max(J,Math.abs(this.#d(Z/Q)));return{min:-J,max:J}}#n(J){let{min:Q,max:Z}=this.#k;return this.#K-(J-Q)/(Z-Q)*this.#K}#p(J){let{min:Q,max:Z}=this.#k;return Q+(1-J/this.#K)*(Z-Q)}#d(J){return this.#Z.reduce((Q,Z)=>{let $=J*Z.frequency,j=W.#l(Z.type,$,Z.phase);return Q+Z.offset+j*Z.amplitude},0)}#i(){if(!this.#Y||!this.#$)return;if(this.#JJ(),this.#k=this.#WJ(),this.#G)this.#G.setAttribute("width",this.#U),this.#G.setAttribute("height",this.#K);let J=Math.max(...this.#Z.map((X)=>X.frequency)),Z=this.#Z.some((X)=>X.type==="square"||X.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),$="";for(let X=0;X<=Z;X++){let Y=X/Z,K=Y*this.#U,_=this.#n(this.#d(Y));$+=`${X===0?"M":"L"}${K.toFixed(1)},${_.toFixed(1)}`}this.#$.setAttribute("d",$);let j=this.#n(0);this.#N?.setAttribute("x1","0"),this.#N?.setAttribute("y1",j),this.#N?.setAttribute("x2",this.#U),this.#N?.setAttribute("y2",j),this.#GJ()}#$J(){if(this.#_||!this.#X)return;let J=(Q)=>{if(!this.isConnected||!this.#X){this.#_=0;return}this.#QJ(Q%1000/1000),this.#_=requestAnimationFrame(J)};this.#_=requestAnimationFrame(J)}#v(){if(!this.#_)return;cancelAnimationFrame(this.#_),this.#_=0}#QJ(J){if(!this.#X)return;let Q=J*this.#U,Z=this.#n(this.#d(J));this.#X.setAttribute("cx",Q.toFixed(1)),this.#X.setAttribute("cy",Z.toFixed(1))}#GJ(){let Q=this.#g,Z=this.#OJ(),$=Math.max(8,Math.min(this.#U-8,this.#U/Q.frequency)),j=this.#n(this.#d(Z/this.#U)),X=this.#n(this.#d($/this.#U));this.#TJ(this.#W,Z,j,8),this.#TJ(this.#B,$,X,8)}#OJ(){let J=this.#g,Q=J.phase/360,Z=Math.max(0.1,J.frequency),$=0.25;if(J.type==="triangle")$=0.5;if(J.type==="sawtooth")$=1;let j=($-Q)/Z;while(j<0)j+=1/Z;while(j>1)j-=1/Z;if(j<0||j>1||!Number.isFinite(j))j=0.25;return Math.max(8,Math.min(this.#U-8,j*this.#U))}#TJ(J,Q,Z,$){if(!J)return;J.setAttribute("x",Q-$),J.setAttribute("y",Z-$),J.setAttribute("width",$*2),J.setAttribute("height",$*2)}#PJ(){for(let Q of this.#L)Q.addEventListener("change",(Z)=>{if(this.#R())return;let $=this.#t(Q);this.#BJ($),this.#Z[$].type=this.#y(Z.detail??Z.target?.value),this.#UJ(),this.#A("input"),this.#A("change")});for(let Q of this.#q)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#F=Q;try{this.#qJ(this.#t(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}finally{this.#F=null}}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#qJ(this.#t(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#z)Q.addEventListener("pointerdown",()=>{this.#BJ(this.#t(Q))}),Q.addEventListener("focusin",()=>{this.#BJ(this.#t(Q))}),Q.addEventListener("openchange",(Z)=>{let $=this.#t(Q);if(Z.detail?.open)this.#T.add($);else this.#T.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.#R())return;let X=this.#t(Q)+1,Y=this.#y($.detail??Q.value);this.#Z.splice(X,0,W.#f(Y)),this.#ZJ(X),this.#Q=X,this.#m(),this.#A("input"),this.#A("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.#R()||this.#Z.length<=1)return;let $=this.#t(Q);this.#Z.splice($,1),this.#a($),this.#Q=Math.min(this.#Q,this.#Z.length-1),this.#m(),this.#A("input"),this.#A("change")});for(let Q of[this.#W,this.#B])this.#KJ(Q);this.querySelector(".propskit-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#R())return;if(Q.target?.closest?.(".propskit-oscillator-handle, fig-handle"))return;this.#FJ(Q,"offset")})}#t(J){let Q=Number.parseInt(J?.getAttribute("data-wave-index")||"",10);return Number.isFinite(Q)?Math.min(this.#Z.length-1,Math.max(0,Q)):0}#KJ(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",($)=>{if(this.#R())return;$.preventDefault(),$.stopImmediatePropagation(),this.#FJ($,Z)},{capture:!0}),Q.addEventListener("keydown",($)=>{if(this.#R())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!this.#jJ($,Z))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#BJ(J){let Q=Math.min(this.#Z.length-1,Math.max(0,J));if(Q===this.#Q)return;this.#Q=Q,this.#YJ(),this.#GJ()}#qJ(J,Q,Z,$){if(this.#R())return;this.#BJ(J);let j=Number.parseFloat(Z);if(!Number.isFinite(j)){if($==="change")this.#XJ();return}this.#Z[J]=this.#O({...this.#Z[J],[Q]:j}),this.#UJ({skipFieldSync:$=="input"}),this.#A($)}#jJ(J,Q){let Z=J.shiftKey?0.5:0.1,$=this.#g;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.#Z[this.#Q]=this.#O($),this.#UJ(),this.#A("input"),this.#A("change"),!0}#DJ(J){let Q=this.#Y?.getScreenCTM();if(!Q)return{x:0,y:0};let Z=Q.inverse();return{x:Z.a*J.clientX+Z.c*J.clientY+Z.e,y:Z.b*J.clientX+Z.d*J.clientY+Z.f}}#FJ(J,Q){this.#j=Q,this.#Y?.classList.add("dragging");let Z=Q==="frequency"?"ew-resize":Q==="amplitude"?"ns-resize":"",$=document.body.style.cursor;if(Z)document.body.style.cursor=Z;let j=(Y)=>{if(!this.#j)return;let K=this.#DJ(Y),_=this.#g;if(Q==="frequency"){let G=Math.max(1,Math.min(this.#U,K.x));_.frequency=this.#U/G}else if(Q==="offset"){let G=this.#C(K.x/this.#U,0,0,1),k=this.#zJ(_,G);_.offset=this.#p(K.y)-this.#LJ(this.#Q,G)-k*_.amplitude}else if(Q==="amplitude"){let G=this.#C(K.x/this.#U,0,0,1),k=this.#zJ(_,G),U=this.#p(K.y)-this.#LJ(this.#Q,G)-_.offset;_.amplitude=Math.abs(k)<0.001?_.amplitude:U/k}this.#Z[this.#Q]=this.#O(_),this.#UJ(),this.#A("input")},X=()=>{if(this.#j=null,this.#Y?.classList.remove("dragging"),Z)document.body.style.cursor=$;document.removeEventListener("pointermove",j),document.removeEventListener("pointerup",X),this.#A("change")};document.addEventListener("pointermove",j),document.addEventListener("pointerup",X)}#LJ(J,Q){return this.#Z.reduce((Z,$,j)=>{if(j===J)return Z;let X=Q*$.frequency,Y=W.#l($.type,X,$.phase);return Z+$.offset+Y*$.amplitude},0)}#zJ(J,Q){return W.#l(J.type,Q*J.frequency,J.phase)}#UJ({skipFieldSync:J=!1}={}){if(this.#r(),!J)this.#XJ();this.#YJ(),this.#i()}#r(){for(let J of this.#L){let Q=this.#t(J);J.value=this.#Z[Q]?.type||"sine"}}#XJ(){for(let J of this.#q){if(J===this.#F)continue;let Q=this.#t(J),Z=J.getAttribute("name"),$=this.#c(this.#Z[Q]?.[Z]??0),j=J.querySelector("fig-slider");if(j)j.value=$;else J.setAttribute("value",String($))}}#YJ(){for(let J of this.#D)if(this.#t(J)===this.#Q)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#A(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:W.#e(this.#g.type)}}))}}customElements.define("propskit-oscillator",W);class r extends HTMLElement{#Z;#Q;#J=null;#U;#K;#k;#j;#Y;#$;constructor(){super();this.angle=0,this.#Z=1,this.#Q=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.#U=this.#F.bind(this),this.#K=this.#u.bind(this),this.#k=this.#g.bind(this),this.#j=this.#y.bind(this),this.#Y=this.#C.bind(this),this.#$=this.#f.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.#_("dial",!0),this.showRotations=this.#N(),this.#X(),this.#T(),this.#O(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#M()}#X(){this.innerHTML=this.#G()}#_(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let $=Z.trim().toLowerCase();if($===""||$==="true")return!0;if($==="false")return!1;return!0}#N(){if(this.hasAttribute("rotations"))return this.#_("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#_("show-rotations",!1);return!1}#G(){let J=this.#q(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
-        ${this.dial?`<div class="fig-input-angle-plane" tabindex="0">
-          <div class="fig-input-angle-handle"></div>
-        </div>`:""}
-        ${this.text?`<fig-input-number
-                name="angle"
-                step="${J}"
-                value="${this.angle}"
-                ${Q}
-                ${Z}
-                units="${this.units}">
-                ${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
-              </fig-input-number>`:""}
-    `}#W(){let J=Math.abs(this.#L(this.angle));return Math.floor(J/360)}#B(){if(!this.rotationSpan)return;let J=this.#W();if(J>1)this.rotationSpan.textContent=`×${J}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#q(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#L(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#D(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#z(J,Q,Z){let $;switch(Q){case"rad":$=J*180/Math.PI;break;case"turn":$=J*360;break;default:$=J}switch(Z){case"rad":return $*Math.PI/180;case"turn":return $/360;default:return $}}#T(){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.#B(),this.plane?.addEventListener("mousedown",this.#K),this.plane?.addEventListener("touchstart",this.#k),window.addEventListener("keydown",this.#j),window.addEventListener("keyup",this.#Y),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#$);this.addEventListener("change",this.#U,!0)}#M(){if(this.plane?.removeEventListener("mousedown",this.#K),this.plane?.removeEventListener("touchstart",this.#k),window.removeEventListener("keydown",this.#j),window.removeEventListener("keyup",this.#Y),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#$);this.removeEventListener("change",this.#U,!0)}#F(J){if(!J.target?.matches?.("input"))return;let Z=J.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(Z){let $=parseFloat(Z[1]),j=Z[2].toLowerCase();if(j==="deg")j="°";if(j!==this.units){let X=this.#z($,j,this.units);J.target.value=String(X)}}}#f(J){J.stopPropagation(),this.angle=Number(J.target.value),this.#H(),this.#O(),this.#B(),this.#h(),this.#P()}#H(){let Q=this.#L(this.angle)*Math.PI/180;this.#Z=Math.cos(Q),this.#Q=Math.sin(Q)}#S(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#I(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,$=Q.top+Q.height/2,j=J.clientX-Z,X=J.clientY-$;return Math.atan2(X,j)*180/Math.PI}#R(J){let Z=(this.#I(J)%360+360)%360;if(Z=this.#S(Z),this.min!==null||this.max!==null)this.angle=this.#D(Z);else if(this.#J===null){this.#J=Z;let X=(this.#L(this.angle)%360+360)%360,Y=Z-X;if(Y>180)Y-=360;if(Y<-180)Y+=360;this.angle+=this.#D(Y)}else{let j=Z-this.#J;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#D(j),this.#J=Z}if(this.#H(),this.#O(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#B(),this.#h()}#h(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#P(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#O(){if(this.handle){let Q=this.#L(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,$=Math.cos(Q)*Z,j=Math.sin(Q)*Z;this.handle.style.transform=`translate(${$}px, ${j}px)`}}#u(J){this.isDragging=!0,this.#J=null,this.#R(J);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#R($)},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",Z),this.#P()};window.addEventListener("mousemove",Q),window.addEventListener("mouseup",Z)}#g(J){J.preventDefault(),this.isDragging=!0,this.#J=null,this.#R(J.touches[0]);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#R($.touches[0])},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",Z),this.#P()};window.addEventListener("touchmove",Q),window.addEventListener("touchend",Z)}#y(J){if(J.key==="Shift")this.isShiftHeld=!0}#C(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.#Z}get opposite(){return this.#Q}set value(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}if(this.angle=J,this.#H(),this.#O(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#B()}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.#T(),this.#O()}break;case"dial":if(this.dial=this.#_("dial",!0),this.isConnected)this.#X(),this.#T(),this.#O();break;case"units":{let $=Z||"°";if($==="deg")$="°";if(this.units=$,this.isConnected)this.#X(),this.#T(),this.#O();break}case"min":if(this.min=Z!==null?Number(Z):null,this.isConnected)this.#X(),this.#T(),this.#O();break;case"max":if(this.max=Z!==null?Number(Z):null,this.isConnected)this.#X(),this.#T(),this.#O();break;case"rotations":case"show-rotations":if(this.showRotations=this.#N(),this.isConnected)this.#X(),this.#T(),this.#O();break}}}customElements.define("fig-input-angle",r);class f extends HTMLElement{static observedAttributes=["axis","handle","disabled"];static#Z=6;static#Q=["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;#U=new Map;#K=null;#k=null;connectedCallback(){this.style.display="contents",this.#_(),this.#J=new MutationObserver(()=>this.#_()),this.#J.observe(this,{childList:!0})}disconnectedCallback(){this.#J?.disconnect(),this.#J=null,this.#O(),this.#u(),this.#R()}attributeChangedCallback(){if(this.isConnected)this.#_()}get#j(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#Y(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#$(){return(this.getAttribute("handle")||"").trim()}#X(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE)}#_(){let J=this.#X(),Q=new Set(J);for(let[Z,$]of this.#U)if(!Q.has(Z))$.target.removeEventListener("pointerdown",$.onPointerDown,!0),this.#U.delete(Z);if(this.#W(J),this.#N(J),this.#j||J.length<2){this.#O();return}for(let Z of J){let $=this.#q(Z),j=this.#U.get(Z);if(j&&j.target===$)continue;if(j)j.target.removeEventListener("pointerdown",j.onPointerDown,!0),this.#U.delete(Z);if(!$)continue;this.#L(Z,$)}this.#B(J),this.#G(J)}#N(J){for(let Q of J)Q.removeAttribute("data-reorder-item")}#G(J){for(let Q of J)Q.setAttribute("data-reorder-item","")}#W(J){for(let Q of J)Q.querySelectorAll("[data-reorder-handle]").forEach((Z)=>Z.removeAttribute("data-reorder-handle"))}#B(J){if(!this.#$)return;for(let Q of J){let Z=Q.querySelector(this.#$);if(Z)Z.setAttribute("data-reorder-handle","")}}#q(J){if(this.#$)return J.querySelector(this.#$);return J}#L(J,Q){let Z=($)=>{if(this.#j||this.#X().length<2)return;if($.button!==0)return;if(!this.#$&&this.#D($.target,J))return;this.#M($,J,Q)};Q.addEventListener("pointerdown",Z,!0),this.#U.set(J,{target:Q,onPointerDown:Z})}#D(J,Q){let Z=J;while(Z&&Z!==Q){if(Z instanceof Element){for(let $ of f.#Q)if(Z.matches($))return!0}Z=Z.parentElement}return!1}static#z="fig-reorder-dragging";static#T(J){document.body.classList.toggle(f.#z,J)}#M(J,Q,Z){this.#u(),f.#T(!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=(j)=>{if(j.pointerId!==$.pointerId)return;let X=j.clientX-$.startX,Y=j.clientY-$.startY;if(!$.active){if(X*X+Y*Y<f.#Z*f.#Z)return;$.active=!0,J.preventDefault(),J.stopPropagation(),Q.classList.add("dragging");try{Z.setPointerCapture($.pointerId)}catch{}}j.preventDefault();let K=this.#Y==="horizontal"?j.clientX:j.clientY,_=this.#F(K);$.targetIndex=_,this.#I(_,Q)},$.onKeyDown=(j)=>{if(j.key!=="Escape"||!$.active)return;j.preventDefault(),this.#P($,!0)},$.onUp=(j)=>{if(j.pointerId!==$.pointerId)return;this.#P($,j.type==="pointercancel")},this.#K=$,window.addEventListener("pointermove",$.onMove),window.addEventListener("pointerup",$.onUp),window.addEventListener("pointercancel",$.onUp),window.addEventListener("keydown",$.onKeyDown)}#F(J){let Q=this.#X(),Z=this.#Y==="horizontal";for(let $=0;$<Q.length;$++){let j=Q[$].getBoundingClientRect(),X=Z?j.left+j.width/2:j.top+j.height/2;if(J<X)return $}return Q.length}#f(J,Q){let Z=this.#X(),$=Z.indexOf(J);if($===-1)return!1;let j=Math.max(0,Math.min(Q,Z.length));if(Q===$)return!1;if(j>=Z.length&&$===Z.length-1)return!1;return!0}#H(J){if(!J.length)return null;let Q=1/0,Z=-1/0,$=1/0,j=-1/0;for(let X of J){let Y=X.getBoundingClientRect();Q=Math.min(Q,Y.left),Z=Math.max(Z,Y.right),$=Math.min($,Y.top),j=Math.max(j,Y.bottom)}return{left:Q,top:$,width:Z-Q,height:j-$}}#S(){if(this.#k)return this.#k;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#Y),document.body.appendChild(J),this.#k=J,J}#I(J,Q){let Z=this.#X();if(!this.#f(Q,J)){this.#R();return}let $=this.#H(Z);if(!$){this.#R();return}let j=this.#S();if(j.setAttribute("data-axis",this.#Y),this.#Y==="horizontal"){let Y;if(J<=0)Y=Z[0].getBoundingClientRect().left;else if(J>=Z.length)Y=Z[Z.length-1].getBoundingClientRect().right;else Y=Z[J].getBoundingClientRect().left;j.style.left=`${Y-1}px`,j.style.top=`${$.top}px`,j.style.width="2px",j.style.height=`${$.height}px`;return}let X;if(J<=0)X=Z[0].getBoundingClientRect().top;else if(J>=Z.length)X=Z[Z.length-1].getBoundingClientRect().bottom;else X=Z[J].getBoundingClientRect().top;j.style.left=`${$.left}px`,j.style.top=`${X-1}px`,j.style.width=`${$.width}px`,j.style.height="2px"}#R(){this.#k?.remove(),this.#k=null}#h(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 j=Z[$];if(j!==J)this.insertBefore(J,j)}#P(J,Q){let{item:Z,oldIndex:$,active:j,onMove:X,onUp:Y,onKeyDown:K}=J;if(window.removeEventListener("pointermove",X),window.removeEventListener("pointerup",Y),window.removeEventListener("pointercancel",Y),window.removeEventListener("keydown",K),j){if(!Q){this.#h(Z,J.targetIndex);let _=this.#X().indexOf(Z);if(_!==-1&&_!==$)this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:$,newIndex:_,item:Z}}))}}if(Z.classList.remove("dragging"),f.#T(!1),this.#R(),this.#K===J)this.#K=null}#O(){for(let[,J]of this.#U)J.target.removeEventListener("pointerdown",J.onPointerDown,!0);this.#U.clear()}#u(){if(!this.#K)return;this.#P(this.#K,!0)}}customElements.define("fig-reorder",f);var g=0;function i(J="fig-select"){return g+=1,`${J}-${g}`}function JJ(J){let Q=J||"";if(Q.startsWith("["))try{let $=JSON.parse(Q);return Array.isArray($)?$:[]}catch{}let Z=Q.includes(`
-`)?`
-`:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function QJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function ZJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}class l extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let J=this.getAttribute("value");if(J!==null)return J;return(this.textContent||"").trim()}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get disabled(){return L(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return L(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.#Z()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="disabled")this.#Z()}#Z(){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",l);function $J(J,Q,Z=2){if(!J||!Q)return!1;let $=Q.scrollHeight-Q.clientHeight>Z,j=!$||Q.scrollTop<=Z,X=!$||Q.scrollTop+Q.clientHeight>=Q.scrollHeight-Z;return J.classList.toggle("overflow-start",!j),J.classList.toggle("overflow-end",!X),$}function h(J,Q=1){if(!J)return;J.scrollBy({top:J.clientHeight*0.8*Q,behavior:"smooth"})}function jJ({onStart:J,onEnd:Q}={}){let Z=($,j)=>{let X=document.createElement("button");X.type="button",X.className=`fig-overflow fig-overflow-${$}`,X.dataset.figOverflow=$,X.setAttribute("data-fig-select-nav",$),X.setAttribute("tabindex","-1"),X.setAttribute("aria-label",$==="start"?"Scroll up":"Scroll down");let Y=document.createElement("fig-icon");return Y.setAttribute("name","chevron"),Y.setAttribute("size","small"),Y.className="fig-overflow-chevron",X.appendChild(Y),X.addEventListener("click",(K)=>{K.preventDefault(),K.stopPropagation(),j?.(K)}),X};return{start:Z("start",J),end:Z("end",Q)}}class o extends HTMLElement{#Z=null;#Q=null;#J=null;#U=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#K(),this.#k(),this.addEventListener("scroll",this.#U,{passive:!0}),this.#J?.disconnect(),this.#J=new ResizeObserver(()=>this.syncOverflow()),this.#J.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#U),this.#J?.disconnect(),this.#J=null,this.#j()}syncOverflow(){return $J(this,this)}scrollToOption(J,Q="auto"){if(!J||!this.contains(J))return;requestAnimationFrame(()=>{if(!J.isConnected)return;if(this.scrollHeight<=this.clientHeight+1){this.syncOverflow();return}let Z=J.getBoundingClientRect(),$=this.getBoundingClientRect(),j=Z.top-$.top+this.scrollTop,X=this.scrollHeight-this.clientHeight,Y=Math.max(0,Math.min(j+Z.height/2-this.clientHeight/2,X));this.scrollTo({top:Y,behavior:Q}),this.syncOverflow()})}#K(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#k(){if(this.#Z&&this.#Q&&this.contains(this.#Z)&&this.contains(this.#Q))return;this.#j();let J=jJ({onStart:()=>h(this,-1),onEnd:()=>h(this,1)});this.#Z=J.start,this.#Q=J.end,this.prepend(this.#Z),this.append(this.#Q)}#j(){this.#Z?.remove(),this.#Q?.remove(),this.#Z=null,this.#Q=null,this.classList.remove("overflow-start","overflow-end")}}customElements.define("fig-select-options",o);class a extends HTMLElement{#Z=null;#Q=null;#J=null;#U=null;#K=null;#k=!1;#j=-1;#Y=!1;#$=!1;#X=null;#_=!1;#N=null;#G=null;#W=!1;#B=this.#JJ.bind(this);#q=this.#WJ.bind(this);#L=this.#n.bind(this);#D=this.#p.bind(this);#z=this.#m.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 L(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#k)this.#I();if(this.#M(),this.#S(),this.#w(),this.#x(),this.#b(),this.#_J(),this.open)this.#GJ()}disconnectedCallback(){this.#l(),document.removeEventListener("keydown",this.#L,!0),this.#K?.disconnect(),this.#K=null}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#k)return;if(J==="options"){this.#S(),this.#b();return}if(J==="value"||J==="label"){this.#b();return}if(J==="disabled"){this.#w();return}if(J==="open"){if(Z===null||Z==="false")this.#OJ();else this.#GJ();return}if(J==="position"||J==="offset"||J==="closedby")this.#x()}focus(J){this.#Z?.focus(J)}blur(){this.#Z?.blur()}#T(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-MENU-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#M(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#F(){let Q=(this.#U?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#f(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#H(){let J=this.#F();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}#S(){if(this.#f())return;let J=this.hasAttribute("options"),Q=J?this.#H():this.#F();if(!Q)return;this.#W=!0;try{for(let j of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))j.remove();if(!J)return;let Z=JJ(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let j of Z){let X=document.createElement("fig-select-option");if(X.setAttribute("data-fig-generated",""),X.setAttribute("value",QJ(j)),X.textContent=ZJ(j),$)Q.insertBefore(X,$);else Q.appendChild(X)}}finally{this.#W=!1}}#I(){this.#k=!0;let J=this.attachShadow({mode:"open"});J.innerHTML=`
-      <style>
-        :host {
-          display: inline-flex;
-          position: relative;
-          align-items: center;
-          min-width: 0;
-        }
-        :host([full]:not([full="false"])) {
-          display: flex;
-          width: 100%;
-        }
-        .fig-select-trigger {
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          flex: 1;
-          min-width: 0;
-          width: var(--fig-select-trigger-width, 100%);
-          height: 100%;
-          margin: 0;
-          padding: 0 var(--spacer-4, 1rem) 0 var(--spacer-2, 0.5rem);
-          border: 0;
-          border-radius: inherit;
-          background: transparent;
-          box-shadow: none;
-          color: inherit;
-          font: inherit;
-          font-weight: inherit;
-          text-align: left;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          cursor: default;
-        }
-        .fig-select-trigger:hover,
-        .fig-select-trigger:active,
-        .fig-select-trigger:active:hover {
-          background: transparent;
-          box-shadow: none;
-          color: inherit;
-        }
-        .fig-select-trigger:focus-visible,
-        .fig-select-trigger[data-focus-visible] {
-          outline: var(--figma-focus-outline);
-          outline-offset: var(--figma-focus-outline-offset);
-        }
-        :host([disabled]:not([disabled="false"])) .fig-select-trigger,
-        :host([disabled]:not([disabled="false"])) .fig-select-label {
-          color: var(--figma-color-text-tertiary);
-        }
-        .fig-select-label {
-          display: block;
-          width: 100%;
-          min-width: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          text-align: left;
-        }
-        /* Listbox chrome from document fig-select::part(listbox).
-           Overflow UI lives on slotted fig-select-options.
-           Never set display except when open — closed <dialog> must stay display:none. */
-        dialog[is="fig-popup"] {
-          flex-direction: column;
-          overflow: hidden;
-        }
-        dialog[is="fig-popup"][open] {
-          display: flex;
-        }
-        ::slotted(fig-select-options) {
-          flex: 1 1 auto;
-          min-height: 0;
-          max-height: inherit;
-        }
-      </style>
-    `;let Q=document.createElement("fig-button");Q.className="fig-select-trigger",Q.setAttribute("part","trigger"),Q.setAttribute("variant","ghost"),Q.setAttribute("aria-haspopup","listbox"),Q.setAttribute("aria-expanded","false");let Z=document.createElement("span");Z.className="fig-select-label",Z.setAttribute("part","label"),Q.appendChild(Z);let $=document.createElement("dialog",{is:"fig-popup"});if($.setAttribute("is","fig-popup"),$.setAttribute("part","listbox"),$.setAttribute("theme","menu"),$.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)$.setAttribute("popover","manual");$.id=i("fig-select-list"),Q.setAttribute("aria-controls",$.id);let j=document.createElement("slot");if(j.setAttribute("name","panel"),$.appendChild(j),J.append(Q,$),this.#Z=Q,this.#J=Z,this.#Q=$,this.#U=j,$.anchor=Q,this.#M(),this.#e(),this.#R(),!this.hasAttribute("value")){let X=this.#E().find((Y)=>L(Y,"selected"));if(X)this.setAttribute("value",X.value)}}#R(){if(!this.#Q||this.#$)return;if(typeof this.#Q.positionPopup!=="function")return;this.#X=this.#Q.positionPopup.bind(this.#Q),this.#Q.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#s()},this.#$=!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()}#P(){if(typeof this.#Q?.parseViewportMargins==="function")return this.#Q.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#O(){let J=this.#J?.getBoundingClientRect();if(!J)return null;return{x:J.x,y:J.y,width:J.width,height:J.height}}#u(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#g(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.x-Q.x)>Z||Math.abs(J.y-Q.y)>Z||Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z}#y(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z||Math.abs(J.offsetLeft-Q.offsetLeft)>Z||Math.abs(J.offsetTop-Q.offsetTop)>Z}#C(){if(!this.#_)return!1;let J=this.#g(this.#N,this.#O()),Q=this.#y(this.#G,this.#u());return!J&&!Q}#c(){this.#N=this.#O(),this.#G=this.#u()}#s(){if(this.#C())return;let J=this.#Q,Q=this.#J;if(!J||!Q){this.#X?.();return}let Z=this.#E(),$=Z.find((N)=>this.#o(N)===this.value)||Z[0];if(!$){this.#X?.();return}this.#X?.();let j=J.getBoundingClientRect(),X=Q.getBoundingClientRect(),Y=this.#h($);if(!j.width||!j.height||!X.width||!Y)return;let K=Y.left-j.left,_=Y.top-j.top,k=L(this,"full")?this.getBoundingClientRect().left:X.left-K,U=X.top-_,q=this.#P();if(typeof J.clampToViewport==="function")({left:k,top:U}=J.clampToViewport({left:k,top:U},j,q));else{let{left:N,top:D}=q,z=window.innerWidth-j.width-q.right,F=window.innerHeight-j.height-q.bottom;k=Math.min(Math.max(k,N),Math.max(N,z)),U=Math.min(Math.max(U,D),Math.max(D,F))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(k)}px`,"important"),J.style.setProperty("top",`${Math.round(U)}px`,"important");let B=this.#F(),T=this.#h($);if(T&&B&&B.scrollHeight>B.clientHeight+1){let N=T.top-X.top;if(Math.abs(N)>0.5)B.scrollTop+=N;B.syncOverflow?.()}if(this.#_||this.open)this.#c()}#e(){this.#Z?.addEventListener("click",this.#B),this.#Z?.addEventListener("keydown",this.#L),this.addEventListener("click",this.#q),this.#Q?.addEventListener("keydown",this.#L),this.#Q?.addEventListener("close",this.#D),this.#U?.addEventListener("slotchange",this.#z)}#l(){this.#Z?.removeEventListener("click",this.#B),this.#Z?.removeEventListener("keydown",this.#L),this.removeEventListener("click",this.#q),this.#Q?.removeEventListener("keydown",this.#L),this.#Q?.removeEventListener("close",this.#D),this.#U?.removeEventListener("slotchange",this.#z)}#m(){this.#M(),this.#b()}#_J(){if(this.#K)return;this.#K=new MutationObserver((J)=>{if(this.#Y||this.#W)return;let Q=!1;for(let Z of J){if(Z.type==="childList"){if([...Z.addedNodes].some(($)=>this.#T($))||[...Z.removedNodes].some(($)=>this.#T($)))Q=!0}if(Z.type==="attributes"&&Z.target?.tagName==="FIG-SELECT-OPTION"&&(Z.attributeName==="value"||Z.attributeName==="disabled"||Z.attributeName==="label"))Q=!0;if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#b()}),this.#K.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#E({enabledOnly:J=!1}={}){let Q=this.#F(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!L($,"disabled"))}#o(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()}#kJ(J){if(!J)return"";let Q=J.getAttribute?.("label");if(Q!=null&&Q!=="")return Q.trim();let Z=[];for(let $ of J.childNodes){if($.nodeType===Node.TEXT_NODE){let Y=$.textContent?.trim();if(Y)Z.push(Y);continue}if(!($ instanceof Element))continue;let j=$.getAttribute("slot");if(j==="prepend"||j==="append")continue;let X=$.textContent?.trim();if(X)Z.push(X)}if(Z.length)return Z.join(" ").trim();return(J.textContent||"").trim()}#x(){if(!this.#Q)return;this.#Q.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#Q.setAttribute("offset",J);else this.#Q.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#Q.setAttribute("closedby",Q);else this.#Q.removeAttribute("closedby")}#w(){let J=L(this,"disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(J&&this.open)this.open=!1}#a(J){if(!J.length)return null;let Q=J.find((Z)=>L(Z,"selected"));if(Q&&!L(Q,"disabled"))return Q;return J.find((Z)=>!L(Z,"disabled"))||J[0]||null}#ZJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#b(){if(this.#Y)return;this.#Y=!0;try{let J=this.#E(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((K)=>this.#o(K)===Z):null,j=!1;if(!$){if(Q){if(!J.length){if(this.#J)this.#J.textContent=Z||this.getAttribute("label")||"";return}if($=this.#a(J),$){let K=this.#o($);if(Z!==K)this.setAttribute("value",K),j=!0}else this.removeAttribute("value"),j=!0}else if($=J.find((K)=>L(K,"selected")),$)this.setAttribute("value",this.#o($)),j=!0}for(let K of J){let _=K===$;if(K.setAttribute("aria-selected",_?"true":"false"),_)K.setAttribute("selected","");else K.removeAttribute("selected")}let X=$&&this.#kJ($)||this.getAttribute("label")||"";if(this.#J)this.#J.textContent=X;let Y=this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",Y),this.#F()?.syncOverflow?.(),j)this.#ZJ(this.getAttribute("value")??"")}finally{this.#Y=!1}}#JJ(J){if(L(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=!this.open;if(Q&&this.#Q&&this.#Z)this.#Q.anchor=this.#Z;this.open=Q}#WJ(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(L(Z,"disabled"))return;this.#d(Z)}#n(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#Q?.matches?.(":open")??!1))){if(this.#Z?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" ")){if(J.preventDefault(),this.#Q&&this.#Z)this.#Q.anchor=this.#Z;this.open=!0,requestAnimationFrame(()=>{let j=this.#E({enabledOnly:!0}).findIndex((X)=>this.#o(X)===this.value);this.#v(j>=0?j:0)})}return}let Z=this.#E({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#$J(),this.#v(this.#j+1);break;case"ArrowUp":J.preventDefault(),this.#$J(),this.#v(this.#j-1);break;case"Home":J.preventDefault(),this.#v(0);break;case"End":J.preventDefault(),this.#v(Z.length-1);break;case"Escape":J.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#$J();let $=Z[this.#j];if(!$)return;J.preventDefault(),this.#d($);break}}}#p(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#j=-1}#d(J){let Q=this.#o(J);this.setAttribute("value",Q),this.#b(),this.#ZJ(Q),this.open=!1}#i(){return this.#E({enabledOnly:!0})}#$J(){let J=this.#i();if(!J.length){this.#j=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#j=Z>=0?Z:this.#j}#v(J){let Q=this.#i();if(!Q.length)return;let Z=(J%Q.length+Q.length)%Q.length;this.#j=Z,Q[Z]?.focus()}#QJ(){if(!this.#Q||!this.#Z)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#Z.getBoundingClientRect().width),Z=Math.max(J,Q,96);if(L(this,"full"))this.#Q.style.setProperty("width",`${Z}px`,"important"),this.#Q.style.setProperty("min-width",`${Z}px`,"important"),this.#Q.style.setProperty("max-width",`${Z}px`,"important");else this.#Q.style.setProperty("width","max-content","important"),this.#Q.style.setProperty("min-width",`${Z}px`,"important"),this.#Q.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#GJ(){if(!this.#Q||L(this,"disabled"))return;if(this.#Z)this.#Q.anchor=this.#Z;this.#R(),this.#_=!1,this.#N=null,this.#G=null,this.#b(),this.#QJ(),this.#Q.open=!0,document.addEventListener("keydown",this.#L,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#j=-1,requestAnimationFrame(()=>{this.#QJ(),this.#s();let J=this.#F(),Z=this.#i().findIndex(($)=>this.#o($)===this.value);if(Z>=0)this.#v(Z);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#v(0);J?.syncOverflow?.(),this.#_=!0,this.#c()})}#OJ(){if(!this.#Q)return;this.#_=!1,this.#N=null,this.#G=null,document.removeEventListener("keydown",this.#L,!0),this.#Q.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}customElements.define("fig-select",a);function O(J){return String(J??"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var XJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],YJ=["shorter","longer","increasing","decreasing"],A=new Set(["oklch","hsl"]);function C(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase();if(!XJ.includes(Z))Z="srgb";Q.interpolationSpace=Z;let $=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=YJ.includes($)?$:"shorter",Q}function E(J){let Q=C(J),Z={...Q,interpolationSpace:Q.interpolationSpace};if(A.has(Q.interpolationSpace))Z.hueInterpolation=Q.hueInterpolation;else delete Z.hueInterpolation;return Z}function KJ(J){let Q=C(J);if(Q.interpolationSpace==="srgb")return"";if(A.has(Q.interpolationSpace))return`in ${Q.interpolationSpace} ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}function n(J){let Q=C(J);if(A.has(Q.interpolationSpace))return`${Q.interpolationSpace}-${Q.hueInterpolation||"shorter"}`;return Q.interpolationSpace}function w(J){let Q=String(J??"");for(let Z of A){let $=`${Z}-`;if(Q.startsWith($))return{interpolationSpace:Z,hueInterpolation:Q.slice($.length)||"shorter"}}return{interpolationSpace:Q||"srgb",hueInterpolation:"shorter"}}class I extends HTMLElement{#Z=null;#Q=null;#J=null;#U="solid";anchorElement=null;#K="solid";#k="srgb";#j={h:0,s:0,v:85,a:1};#Y="hex";#$={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#_={url:null,scaleMode:"fill",scale:50};#N={stream:null,snapshot:null};#G={};#W={};#B=null;#q=null;#L=null;#D=null;#z=!1;#T=!1;#M=null;#F=null;#f=null;#H=null;#S=0;#I=null;#R=null;constructor(){super();this.#I=this.#u.bind(this),this.#R=this.#g.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","experimental","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#h(),this.#y(),this.#C()})}disconnectedCallback(){if(this.#l(),this.#N.snapshot?.startsWith("blob:")){if(URL.revokeObjectURL(this.#N.snapshot),this.#X.url===this.#N.snapshot)this.#X.url=null;this.#N.snapshot=null}if(this.#_.url&&this.#_.url.startsWith("blob:"))URL.revokeObjectURL(this.#_.url);if(this.#Q)this.#Q.removeAttribute("selected");if(this.#Z)this.#Z.removeEventListener("click",this.#I),this.#Z.removeEventListener("keydown",this.#R)}#h(){let J=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#Q=document.createElement("fig-swatch"),this.#Q.setAttribute("background","#D9D9D9"),this.appendChild(this.#Q),this.#Z=this.#Q;else if(J.matches("fig-swatch"))this.#Q=J,this.#Z=J;else this.#Z=J,this.#Q=null;if(this.#O(),this.#Z.removeEventListener("click",this.#I),this.#Z.addEventListener("click",this.#I),this.#Z.removeEventListener("keydown",this.#R),this.#Z.addEventListener("keydown",this.#R),this.#Q)requestAnimationFrame(()=>{let Q=this.#Q.querySelector('input[type="color"]');if(Q)Q.remove();this.#O()})}#P(){return this.getAttribute("aria-label")||"Fill picker"}#O(){if(!this.#Z)return;let J=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",Q=this.getAttribute("aria-labelledby");if(!this.#Z.hasAttribute("role"))this.#Z.setAttribute("role","button");if(this.#Z.setAttribute("tabindex",J?"-1":"0"),this.#Z.setAttribute("aria-disabled",J?"true":"false"),Q)this.#Z.setAttribute("aria-labelledby",Q),this.#Z.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#Z.setAttribute("aria-label",`Open ${this.#P()}`),this.#Z.removeAttribute("aria-labelledby");else if(this.#Z.removeAttribute("aria-labelledby"),!this.#Z.hasAttribute("aria-label"))this.#Z.setAttribute("aria-label",`Open ${this.#P()}`);let Z=this.getAttribute("aria-describedby");if(Z)this.#Z.setAttribute("aria-describedby",Z);else this.#Z.removeAttribute("aria-describedby")}#u(J){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;J.stopPropagation(),J.preventDefault(),this.#s()}#g(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;J.preventDefault(),J.stopPropagation(),this.#s()}#y(){let J=this.getAttribute("value");if(!J)return;let Q=["solid","gradient","image","video","webcam"];try{let Z=JSON.parse(J);if(Z.type)this.#K=Z.type;if(Z.color){if(typeof Z.color==="string")this.#j=this.#CJ(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#j=Z.color}if(Z.opacity!==void 0)this.#j.a=Z.opacity/100;if(this.#k="srgb",Z.gradient)this.#$=C({...this.#$,...Z.gradient});if(Z.image)this.#X={...this.#X,...Z.image};if(Z.video)this.#_={...this.#_,...Z.video};if(Z.type&&!Q.includes(Z.type)){let{type:$,...j}=Z;this.#W[Z.type]=j}}catch(Z){if(J.startsWith("#"))this.#K="solid",this.#j=this.#CJ(J)}}#C(){if(!this.#Q)return;let J,Q="cover",Z="center";switch(this.#K){case"solid":J=this.#MJ(this.#j);break;case"gradient":J=this.#r();break;case"image":if(this.#X.url){J=`url(${this.#X.url})`;let j=this.#c(this.#X.scaleMode,this.#X.scale);Q=j.size,Z=j.position}else J="";break;case"video":if(this.#_.url){J=`url(${this.#_.url})`;let j=this.#c(this.#_.scaleMode,this.#_.scale);Q=j.size,Z=j.position}else J="";break;default:J=this.#G[this.#K]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#Q.setAttribute("background",J),this.#Q.style.setProperty("--swatch-bg-size",Q),this.#Q.style.setProperty("--swatch-bg-position",Z),this.#K==="solid")this.#Q.setAttribute("alpha",this.#j.a);else this.#Q.removeAttribute("alpha")}#c(J,Q){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#s(){if(!this.#J)this.#_J();if(this.#f=JSON.stringify(this.value),this.#E(this.#K,{emit:!1}),this.#Q)this.#Q.setAttribute("selected","true");this.#J.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#x(),this.#w()})})}open(){this.#s()}close(){if(this.#J)this.#J.open=!1}#e(){if(!this.#J)return;for(let[J,{element:Q}]of Object.entries(this.#G)){let Z=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find(($)=>$.dataset.tab===J);if(!Z)continue;while(Z.firstChild)Q.appendChild(Z.firstChild)}}#l(){if(this.#M)this.#M(),this.#M=null;if(this.#F?.disconnect(),this.#F=null,this.#m(),!this.#J)return;this.#e(),this.#J.remove(),this.#J=null,this.#H=null,this.#f=null}#m(){if(this.#S+=1,this.#N.stream)this.#N.stream.getTracks().forEach((Q)=>Q.stop()),this.#N.stream=null;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#_J(){this.#G={},this.querySelectorAll('[slot^="mode-"]').forEach((U)=>{let q=U.getAttribute("slot").slice(5);this.#G[q]={element:U,label:U.getAttribute("label")||q.charAt(0).toUpperCase()+q.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#Z;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},$=this.getAttribute("mode"),j;if($){if(j=$.split(",").map((q)=>q.trim().toLowerCase()).filter((q)=>Q.includes(q)||this.#G[q]),j.length===0)j=[...Q]}else j=[...Q];let X={...Z};for(let[U,{label:q}]of Object.entries(this.#G))X[U]=q;if(!j.includes(this.#K))this.#K=j[0],this.#U=j[0];let Y;if(j.length===1)Y=`<h3 class="fig-fill-picker-type-label">${O(X[j[0]])}</h3>`;else{let U=j.map((q)=>`<fig-select-option value="${O(q)}">${O(X[q])}</fig-select-option>`).join(`
-            `);Y=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${O(this.#K)}">
+import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))customElements.define(j,J)}function L(j){return String(j??"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var M=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],y=["shorter","longer","increasing","decreasing"],k=new Set(["oklch","hsl"]);function f(j){let J={...j??{}},K=String(J.interpolationSpace??"srgb").toLowerCase();if(!M.includes(K))K="srgb";J.interpolationSpace=K;let U=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=y.includes(U)?U:"shorter",J}function D(j){let J=f(j),K={...J,interpolationSpace:J.interpolationSpace};if(k.has(J.interpolationSpace))K.hueInterpolation=J.hueInterpolation;else delete K.hueInterpolation;return K}function E(j){let J=f(j);if(J.interpolationSpace==="srgb")return"";if(k.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function H(j){let J=f(j);if(k.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function q(j){let J=String(j??"");for(let K of k){let U=`${K}-`;if(J.startsWith(U))return{interpolationSpace:K,hueInterpolation:J.slice(U.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}class F extends HTMLElement{#U=null;#Y=null;#j=null;#x="solid";anchorElement=null;#O="solid";#A="srgb";#K={h:0,s:0,v:85,a:1};#B="hex";#J={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#Z={url:null,scaleMode:"fill",scale:50};#$={stream:null,snapshot:null};#R={};#v={};#T=null;#G=null;#_=null;#z=null;#q=!1;#L=!1;#H=null;#P=null;#S=null;#c=null;#I=0;#u=null;#g=null;constructor(){super();this.#u=this.#Oj.bind(this),this.#g=this.#Tj.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","experimental","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#Wj(),this.#t(),this.#W()})}disconnectedCallback(){if(this.#jj(),this.#$.snapshot?.startsWith("blob:")){if(URL.revokeObjectURL(this.#$.snapshot),this.#X.url===this.#$.snapshot)this.#X.url=null;this.#$.snapshot=null}if(this.#Z.url&&this.#Z.url.startsWith("blob:"))URL.revokeObjectURL(this.#Z.url);if(this.#Y)this.#Y.removeAttribute("selected");if(this.#U)this.#U.removeEventListener("click",this.#u),this.#U.removeEventListener("keydown",this.#g)}#Wj(){let j=Array.from(this.children).find((J)=>!J.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#Y=document.createElement("fig-swatch"),this.#Y.setAttribute("background","#D9D9D9"),this.appendChild(this.#Y),this.#U=this.#Y;else if(j.matches("fig-swatch"))this.#Y=j,this.#U=j;else this.#U=j,this.#Y=null;if(this.#b(),this.#U.removeEventListener("click",this.#u),this.#U.addEventListener("click",this.#u),this.#U.removeEventListener("keydown",this.#g),this.#U.addEventListener("keydown",this.#g),this.#Y)requestAnimationFrame(()=>{let J=this.#Y.querySelector('input[type="color"]');if(J)J.remove();this.#b()})}#a(){return this.getAttribute("aria-label")||"Fill picker"}#b(){if(!this.#U)return;let j=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.getAttribute("aria-labelledby");if(!this.#U.hasAttribute("role"))this.#U.setAttribute("role","button");if(this.#U.setAttribute("tabindex",j?"-1":"0"),this.#U.setAttribute("aria-disabled",j?"true":"false"),J)this.#U.setAttribute("aria-labelledby",J),this.#U.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#U.setAttribute("aria-label",`Open ${this.#a()}`),this.#U.removeAttribute("aria-labelledby");else if(this.#U.removeAttribute("aria-labelledby"),!this.#U.hasAttribute("aria-label"))this.#U.setAttribute("aria-label",`Open ${this.#a()}`);let K=this.getAttribute("aria-describedby");if(K)this.#U.setAttribute("aria-describedby",K);else this.#U.removeAttribute("aria-describedby")}#Oj(j){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;j.stopPropagation(),j.preventDefault(),this.#h()}#Tj(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;j.preventDefault(),j.stopPropagation(),this.#h()}#t(){let j=this.getAttribute("value");if(!j)return;let J=["solid","gradient","image","video","webcam"];try{let K=JSON.parse(j);if(K.type)this.#O=K.type;if(K.color){if(typeof K.color==="string")this.#K=this.#E(K.color);else if(typeof K.color==="object"&&K.color.h!==void 0)this.#K=K.color}if(K.opacity!==void 0)this.#K.a=K.opacity/100;if(this.#A="srgb",K.gradient)this.#J=f({...this.#J,...K.gradient});if(K.image)this.#X={...this.#X,...K.image};if(K.video)this.#Z={...this.#Z,...K.video};if(K.type&&!J.includes(K.type)){let{type:U,...Q}=K;this.#v[K.type]=Q}}catch(K){if(j.startsWith("#"))this.#O="solid",this.#K=this.#E(j)}}#W(){if(!this.#Y)return;let j,J="cover",K="center";switch(this.#O){case"solid":j=this.#V(this.#K);break;case"gradient":j=this.#Yj();break;case"image":if(this.#X.url){j=`url(${this.#X.url})`;let Q=this.#e(this.#X.scaleMode,this.#X.scale);J=Q.size,K=Q.position}else j="";break;case"video":if(this.#Z.url){j=`url(${this.#Z.url})`;let Q=this.#e(this.#Z.scaleMode,this.#Z.scale);J=Q.size,K=Q.position}else j="";break;default:j=this.#R[this.#O]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#Y.setAttribute("background",j),this.#Y.style.setProperty("--swatch-bg-size",J),this.#Y.style.setProperty("--swatch-bg-position",K),this.#O==="solid")this.#Y.setAttribute("alpha",this.#K.a);else this.#Y.removeAttribute("alpha")}#e(j,J){switch(j){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${J}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#h(){if(!this.#j)this.#zj();if(this.#S=JSON.stringify(this.value),this.#s(this.#O,{emit:!1}),this.#Y)this.#Y.setAttribute("selected","true");this.#j.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#N(),this.#f()})})}open(){this.#h()}close(){if(this.#j)this.#j.open=!1}#Rj(){if(!this.#j)return;for(let[j,{element:J}]of Object.entries(this.#R)){let K=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((U)=>U.dataset.tab===j);if(!K)continue;while(K.firstChild)J.appendChild(K.firstChild)}}#jj(){if(this.#H)this.#H(),this.#H=null;if(this.#P?.disconnect(),this.#P=null,this.#m(),!this.#j)return;this.#Rj(),this.#j.remove(),this.#j=null,this.#c=null,this.#S=null}#m(){if(this.#I+=1,this.#$.stream)this.#$.stream.getTracks().forEach((J)=>J.stop()),this.#$.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#zj(){this.#R={},this.querySelectorAll('[slot^="mode-"]').forEach((Y)=>{let W=Y.getAttribute("slot").slice(5);this.#R[W]={element:Y,label:Y.getAttribute("label")||W.charAt(0).toUpperCase()+W.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.setAttribute("drag","true"),this.#j.setAttribute("handle","fig-header"),this.#j.setAttribute("autoresize","false"),this.#j.classList.add("fig-fill-picker-dialog"),this.#j.anchor=this.anchorElement||this.#U;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let J=["solid","gradient","image","video","webcam"],K={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},U=this.getAttribute("mode"),Q;if(U){if(Q=U.split(",").map((W)=>W.trim().toLowerCase()).filter((W)=>J.includes(W)||this.#R[W]),Q.length===0)Q=[...J]}else Q=[...J];let X={...K};for(let[Y,{label:W}]of Object.entries(this.#R))X[Y]=W;if(!Q.includes(this.#O))this.#O=Q[0],this.#x=Q[0];let Z;if(Q.length===1)Z=`<h3 class="fig-fill-picker-type-label">${L(X[Q[0]])}</h3>`;else{let Y=Q.map((W)=>`<fig-select-option value="${L(W)}">${L(X[W])}</fig-select-option>`).join(`
+            `);Z=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${L(this.#O)}">
           <fig-select-options>
-            ${U}
+            ${Y}
           </fig-select-options>
-        </fig-select>`}let K=j.map((U)=>`<div class="fig-fill-picker-tab" data-tab="${O(U)}"></div>`).join(`
-        `);this.#J.innerHTML=`
+        </fig-select>`}let $=Q.map((Y)=>`<div class="fig-fill-picker-tab" data-tab="${L(Y)}"></div>`).join(`
+        `);this.#j.innerHTML=`
       <fig-header>
-        ${Y}
+        ${Z}
         <fig-button icon variant="ghost" class="fig-fill-picker-close" aria-label="Close fill picker">
           <fig-icon name="close"></fig-icon>
         </fig-button>
       </fig-header>
       <fig-content>
-        ${K}
+        ${$}
       </fig-content>
-    `,document.body.appendChild(this.#J);for(let[U,{element:q}]of Object.entries(this.#G)){let B=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((T)=>T.dataset.tab===U);if(!B)continue;while(q.firstChild)B.appendChild(q.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:U,container:B}}))}let _=this.#J.querySelector(".fig-fill-picker-type");if(_)_.addEventListener("change",(U)=>{let q=typeof U.detail==="string"?U.detail:U.target?.value;if(q)this.#E(q)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let G=()=>{if(this.#Q)this.#Q.removeAttribute("selected");if(this.#m(),this.#f!==null&&this.#f!==JSON.stringify(this.value))this.#NJ();this.#f=null,this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",G);let k={solid:()=>this.#o(),gradient:()=>this.#d(),image:()=>this.#XJ(),video:()=>this.#VJ(),webcam:()=>this.#SJ()};for(let[U,q]of Object.entries(k))if(!this.#G[U]&&j.includes(U))q();for(let U of Object.keys(this.#G)){if(Q.includes(U))continue;let q=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((B)=>B.dataset.tab===U);if(!q)continue;q.addEventListener("input",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#W[U]=B.detail;this.#V()}),q.addEventListener("change",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#W[U]=B.detail;this.#NJ()})}}#E(J,{emit:Q=!0}={}){let Z=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!Z)return;let $=this.#U;if(this.#U=J,this.#K=J,$==="webcam"&&J!=="webcam")this.#m();let j=this.#J.querySelector(".fig-fill-picker-type");if(j&&j.value!==J)j.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((K)=>{if(K.dataset.tab===J)K.style.display="block";else K.style.display="none"});let Y=this.#J.querySelector("fig-content");if(Y)Y.style.padding=this.#G[J]?"0":"";if(J==="gradient")requestAnimationFrame(()=>{this.#KJ();let K=Z.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),requestAnimationFrame(()=>{K?.refreshLayout?.()})});if(J==="webcam")this.#H?.();if(this.#C(),Q)this.#V()}#o(){let J=this.#J.querySelector('[data-tab="solid"]'),Q=this.getAttribute("alpha")!=="false";if(J.innerHTML=`
+    `,document.body.appendChild(this.#j);for(let[Y,{element:W}]of Object.entries(this.#R)){let z=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((G)=>G.dataset.tab===Y);if(!z)continue;while(W.firstChild)z.appendChild(W.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:Y,container:z}}))}let T=this.#j.querySelector(".fig-fill-picker-type");if(T)T.addEventListener("change",(Y)=>{let W=typeof Y.detail==="string"?Y.detail:Y.target?.value;if(W)this.#s(W)});this.#j.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#j.open=!1});let O=()=>{if(this.#Y)this.#Y.removeAttribute("selected");if(this.#m(),this.#S!==null&&this.#S!==JSON.stringify(this.value))this.#k();this.#S=null,this.dispatchEvent(new CustomEvent("close"))};this.#j.addEventListener("close",O);let R={solid:()=>this.#Lj(),gradient:()=>this.#Dj(),image:()=>this.#Mj(),video:()=>this.#Ej(),webcam:()=>this.#Pj()};for(let[Y,W]of Object.entries(R))if(!this.#R[Y]&&Q.includes(Y))W();for(let Y of Object.keys(this.#R)){if(J.includes(Y))continue;let W=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((z)=>z.dataset.tab===Y);if(!W)continue;W.addEventListener("input",(z)=>{if(z.target===this)return;if(z.stopPropagation(),z.detail)this.#v[Y]=z.detail;this.#Q()}),W.addEventListener("change",(z)=>{if(z.target===this)return;if(z.stopPropagation(),z.detail)this.#v[Y]=z.detail;this.#k()})}}#s(j,{emit:J=!0}={}){let K=Array.from(this.#j?.querySelectorAll(".fig-fill-picker-tab")??[]).find(($)=>$.dataset.tab===j);if(!K)return;let U=this.#x;if(this.#x=j,this.#O=j,U==="webcam"&&j!=="webcam")this.#m();let Q=this.#j.querySelector(".fig-fill-picker-type");if(Q&&Q.value!==j)Q.value=j;this.#j.querySelectorAll(".fig-fill-picker-tab").forEach(($)=>{if($.dataset.tab===j)$.style.display="block";else $.style.display="none"});let Z=this.#j.querySelector("fig-content");if(Z)Z.style.padding=this.#R[j]?"0":"";if(j==="gradient")requestAnimationFrame(()=>{this.#D();let $=K.querySelector(".fig-fill-picker-gradient-bar-input");$?.refreshLayout?.(),requestAnimationFrame(()=>{$?.refreshLayout?.()})});if(j==="webcam")this.#c?.();if(this.#W(),J)this.#Q()}#Lj(){let j=this.#j.querySelector('[data-tab="solid"]'),J=this.getAttribute("alpha")!=="false";if(j.innerHTML=`
       <fig-preview class="fig-fill-picker-color-area">
         <canvas width="200" height="200"></canvas>
         <fig-handle
           aria-label="Color saturation and brightness"
           type="color"
-          color="${this.#MJ({...this.#j,a:1})}"
+          color="${this.#V({...this.#K,a:1})}"
           data-no-color-picker
           drag
           drag-surface=".fig-fill-picker-color-area"
@@ -153,13 +28,13 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
           drag-snapping="modifier"
         ></fig-handle>
       </fig-preview>
-      <div class="fig-fill-picker-sliders${Q?"":" is-hue-only"}">
+      <div class="fig-fill-picker-sliders${J?"":" is-hue-only"}">
         <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" aria-label="Sample color"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
-        <fig-slider type="hue" variant="classic" text="false" min="0" max="360" aria-label="Hue" value="${this.#j.h}"></fig-slider>
-        ${Q?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#j.a*100}" color="${this.#MJ(this.#j)}"></fig-slider>`:""}
+        <fig-slider type="hue" variant="classic" text="false" min="0" max="360" aria-label="Hue" value="${this.#K.h}"></fig-slider>
+        ${J?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#K.a*100}" color="${this.#V(this.#K)}"></fig-slider>`:""}
       </div>
       <fig-field class="fig-fill-picker-inputs">
-        <fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${O(this.#Y)}">
+        <fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${L(this.#B)}">
           <fig-select-options>
             <fig-select-option value="hex">Hex</fig-select-option>
             <fig-select-option value="rgb">RGB</fig-select-option>
@@ -172,37 +47,37 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
         </fig-select>
         <span class="fig-fill-picker-input-fields"></span>
       </fig-field>
-    `,this.#B=J.querySelector("canvas"),this.#q=J.querySelector("fig-handle"),this.#x(),this.#w(),this.#ZJ(),this.#L=J.querySelector('fig-slider[type="hue"]'),this.#L.addEventListener("input",(j)=>{this.#j.h=parseFloat(j.target.value),this.#x(),this.#w(),this.#p(),this.#V()}),this.#L.addEventListener("change",()=>{this.#NJ()}),Q)this.#D=J.querySelector('fig-slider[type="opacity"]'),this.#D.addEventListener("input",(j)=>{this.#j.a=parseFloat(j.target.value)/100,this.#p(),this.#V()}),this.#D.addEventListener("change",()=>{this.#NJ()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(j)=>{let X=typeof j.detail==="string"?j.detail:j.target?.value;if(!X)return;this.#Y=X,this.#b()}),this.#b();let $=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)$.addEventListener("click",async()=>{try{let X=await new EyeDropper().open();this.#j={...this.#CJ(X.sRGBHex),a:this.#j.a},this.#x(),this.#w(),this.#p(),this.#V()}catch(j){}});else $.setAttribute("disabled",""),$.title="EyeDropper not supported in this browser"}#kJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Q=J.querySelector("canvas");if(Q){let Z=document.createElement("canvas");Z.width=Q.width,Z.height=Q.height,Q.replaceWith(Z),this.#B=Z,this.#ZJ()}this.#x(),this.#w()}this.#jJ(),this.#V()}#x(){if(!this.#B&&this.#J)this.#B=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#B)return;let J=this.#k==="display-p3"?"display-p3":"srgb",Q=this.#B.getContext("2d",{colorSpace:J});if(!Q)return;let Z=this.#B.width,$=this.#B.height;Q.clearRect(0,0,Z,$);let j=this.#j.h,X=this.#k==="display-p3",Y=Q.createLinearGradient(0,0,Z,0);if(X){Y.addColorStop(0,"color(display-p3 1 1 1)");let[_,G,k]=hslToP3(j,100,50);Y.addColorStop(1,`color(display-p3 ${_} ${G} ${k})`)}else Y.addColorStop(0,"#FFFFFF"),Y.addColorStop(1,`hsl(${j}, 100%, 50%)`);Q.fillStyle=Y,Q.fillRect(0,0,Z,$);let K=Q.createLinearGradient(0,0,0,$);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=K,Q.fillRect(0,0,Z,$)}#w(J=0){if(!this.#q||!this.#B)return;let Q=this.#B.getBoundingClientRect();if((Q.width===0||Q.height===0)&&J<5){requestAnimationFrame(()=>this.#w(J+1));return}let Z=Math.max(0,Math.min(100,this.#j.s)),$=Math.max(0,Math.min(100,100-this.#j.v));this.#q.setAttribute("value",`${Z}% ${$}%`),this.#q.setAttribute("color",this.#MJ({...this.#j,a:1}))}#a(J,Q,Z={}){let{updateHandle:$=!0,emitInput:j=!0,emitChange:X=!1}=Z;if(this.#j.s=Math.max(0,Math.min(100,J*100)),this.#j.v=Math.max(0,Math.min(100,(1-Q)*100)),this.#q)this.#q.setAttribute("color",this.#MJ({...this.#j,a:1}));if($)this.#w();if(this.#p(),j)this.#V();if(X)this.#NJ()}#ZJ(){if(this.#M)this.#M(),this.#M=null;if(!this.#B||!this.#q)return;let J=this.#B.parentElement||this.#B,Q=this.#q,Z=!1,$=(G,k={})=>{let U=J.getBoundingClientRect();if(U.width===0||U.height===0)return;let q=Math.max(0,Math.min(G.clientX-U.left,U.width)),B=Math.max(0,Math.min(G.clientY-U.top,U.height));this.#a(q/U.width,B/U.height,k)},j=(G)=>{if(G.button!==0)return;if(G.target===Q||Q.contains(G.target))return;Z=!0,this.#z=!0,J.setPointerCapture(G.pointerId),$(G,{updateHandle:!0,emitInput:!0})},X=(G)=>{if(!Z)return;if(G.buttons===0){Y();return}$(G,{updateHandle:!0,emitInput:!0})},Y=()=>{if(!Z)return;Z=!1,this.#z=!1,this.#NJ()},K=(G)=>{this.#z=!0;let k=G.detail?.px,U=G.detail?.py;if(!Number.isFinite(k)||!Number.isFinite(U))return;Q.setAttribute("value",`${k*100}% ${U*100}%`),this.#a(k,U,{updateHandle:!1,emitInput:!0})},_=(G)=>{let k=G.detail?.px,U=G.detail?.py;if(Number.isFinite(k)&&Number.isFinite(U))Q.setAttribute("value",`${k*100}% ${U*100}%`),this.#a(k,U,{updateHandle:!1,emitInput:!1});this.#z=!1,this.#NJ()};J.addEventListener("pointerdown",j),J.addEventListener("pointermove",X),J.addEventListener("pointerup",Y),J.addEventListener("pointercancel",Y),J.addEventListener("lostpointercapture",Y),Q.addEventListener("input",K),Q.addEventListener("change",_),this.#M=()=>{J.removeEventListener("pointerdown",j),J.removeEventListener("pointermove",X),J.removeEventListener("pointerup",Y),J.removeEventListener("pointercancel",Y),J.removeEventListener("lostpointercapture",Y),Q.removeEventListener("input",K),Q.removeEventListener("change",_),this.#z=!1}}#b(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=(Y,K)=>`<fig-tooltip text="${Y}">${K}</fig-tooltip>`,Z=(Y,K,_,G,k,U)=>`<fig-input-number class="${Y}" aria-label="${K}" min="${_}" max="${G}"${k!=null?` step="${k}"`:""}${U?` units="${U}"`:""}></fig-input-number>`,$=this.getAttribute("alpha")!=="false",j=()=>$?Q("Alpha",Z("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):"",X;switch(this.#Y){case"rgb":X=`<div class="input-combo">
-          ${Q("Red",Z("fig-fill-picker-ci-r","Red",0,255))}
-          ${Q("Green",Z("fig-fill-picker-ci-g","Green",0,255))}
-          ${Q("Blue",Z("fig-fill-picker-ci-b","Blue",0,255))}
-          ${j()}
+    `,this.#T=j.querySelector("canvas"),this.#G=j.querySelector("fig-handle"),this.#N(),this.#f(),this.#Jj(),this.#_=j.querySelector('fig-slider[type="hue"]'),this.#_.addEventListener("input",(Q)=>{this.#K.h=parseFloat(Q.target.value),this.#N(),this.#f(),this.#C(),this.#Q()}),this.#_.addEventListener("change",()=>{this.#k()}),J)this.#z=j.querySelector('fig-slider[type="opacity"]'),this.#z.addEventListener("input",(Q)=>{this.#K.a=parseFloat(Q.target.value)/100,this.#C(),this.#Q()}),this.#z.addEventListener("change",()=>{this.#k()});j.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(Q)=>{let X=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!X)return;this.#B=X,this.#Kj()}),this.#Kj();let U=j.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)U.addEventListener("click",async()=>{try{let X=await new EyeDropper().open();this.#K={...this.#E(X.sRGBHex),a:this.#K.a},this.#N(),this.#f(),this.#C(),this.#Q()}catch(Q){}});else U.setAttribute("disabled",""),U.title="EyeDropper not supported in this browser"}#dj(){let j=this.#j?.querySelector('[data-tab="solid"]');if(j){let J=j.querySelector("canvas");if(J){let K=document.createElement("canvas");K.width=J.width,K.height=J.height,J.replaceWith(K),this.#T=K,this.#Jj()}this.#N(),this.#f()}this.#F(),this.#Q()}#N(){if(!this.#T&&this.#j)this.#T=this.#j.querySelector('[data-tab="solid"] canvas');if(!this.#T)return;let j=this.#A==="display-p3"?"display-p3":"srgb",J=this.#T.getContext("2d",{colorSpace:j});if(!J)return;let K=this.#T.width,U=this.#T.height;J.clearRect(0,0,K,U);let Q=this.#K.h,X=this.#A==="display-p3",Z=J.createLinearGradient(0,0,K,0);if(X){Z.addColorStop(0,"color(display-p3 1 1 1)");let[T,O,R]=hslToP3(Q,100,50);Z.addColorStop(1,`color(display-p3 ${T} ${O} ${R})`)}else Z.addColorStop(0,"#FFFFFF"),Z.addColorStop(1,`hsl(${Q}, 100%, 50%)`);J.fillStyle=Z,J.fillRect(0,0,K,U);let $=J.createLinearGradient(0,0,0,U);$.addColorStop(0,"rgba(0,0,0,0)"),$.addColorStop(1,"rgba(0,0,0,1)"),J.fillStyle=$,J.fillRect(0,0,K,U)}#f(j=0){if(!this.#G||!this.#T)return;let J=this.#T.getBoundingClientRect();if((J.width===0||J.height===0)&&j<5){requestAnimationFrame(()=>this.#f(j+1));return}let K=Math.max(0,Math.min(100,this.#K.s)),U=Math.max(0,Math.min(100,100-this.#K.v));this.#G.setAttribute("value",`${K}% ${U}%`),this.#G.setAttribute("color",this.#V({...this.#K,a:1}))}#p(j,J,K={}){let{updateHandle:U=!0,emitInput:Q=!0,emitChange:X=!1}=K;if(this.#K.s=Math.max(0,Math.min(100,j*100)),this.#K.v=Math.max(0,Math.min(100,(1-J)*100)),this.#G)this.#G.setAttribute("color",this.#V({...this.#K,a:1}));if(U)this.#f();if(this.#C(),Q)this.#Q();if(X)this.#k()}#Jj(){if(this.#H)this.#H(),this.#H=null;if(!this.#T||!this.#G)return;let j=this.#T.parentElement||this.#T,J=this.#G,K=!1,U=(O,R={})=>{let Y=j.getBoundingClientRect();if(Y.width===0||Y.height===0)return;let W=Math.max(0,Math.min(O.clientX-Y.left,Y.width)),z=Math.max(0,Math.min(O.clientY-Y.top,Y.height));this.#p(W/Y.width,z/Y.height,R)},Q=(O)=>{if(O.button!==0)return;if(O.target===J||J.contains(O.target))return;K=!0,this.#q=!0,j.setPointerCapture(O.pointerId),U(O,{updateHandle:!0,emitInput:!0})},X=(O)=>{if(!K)return;if(O.buttons===0){Z();return}U(O,{updateHandle:!0,emitInput:!0})},Z=()=>{if(!K)return;K=!1,this.#q=!1,this.#k()},$=(O)=>{this.#q=!0;let R=O.detail?.px,Y=O.detail?.py;if(!Number.isFinite(R)||!Number.isFinite(Y))return;J.setAttribute("value",`${R*100}% ${Y*100}%`),this.#p(R,Y,{updateHandle:!1,emitInput:!0})},T=(O)=>{let R=O.detail?.px,Y=O.detail?.py;if(Number.isFinite(R)&&Number.isFinite(Y))J.setAttribute("value",`${R*100}% ${Y*100}%`),this.#p(R,Y,{updateHandle:!1,emitInput:!1});this.#q=!1,this.#k()};j.addEventListener("pointerdown",Q),j.addEventListener("pointermove",X),j.addEventListener("pointerup",Z),j.addEventListener("pointercancel",Z),j.addEventListener("lostpointercapture",Z),J.addEventListener("input",$),J.addEventListener("change",T),this.#H=()=>{j.removeEventListener("pointerdown",Q),j.removeEventListener("pointermove",X),j.removeEventListener("pointerup",Z),j.removeEventListener("pointercancel",Z),j.removeEventListener("lostpointercapture",Z),J.removeEventListener("input",$),J.removeEventListener("change",T),this.#q=!1}}#Kj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=(Z,$)=>`<fig-tooltip text="${Z}">${$}</fig-tooltip>`,K=(Z,$,T,O,R,Y)=>`<fig-input-number class="${Z}" aria-label="${$}" min="${T}" max="${O}"${R!=null?` step="${R}"`:""}${Y?` units="${Y}"`:""}></fig-input-number>`,U=this.getAttribute("alpha")!=="false",Q=()=>U?J("Alpha",K("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):"",X;switch(this.#B){case"rgb":X=`<div class="input-combo">
+          ${J("Red",K("fig-fill-picker-ci-r","Red",0,255))}
+          ${J("Green",K("fig-fill-picker-ci-g","Green",0,255))}
+          ${J("Blue",K("fig-fill-picker-ci-b","Blue",0,255))}
+          ${Q()}
         </div>`;break;case"hsl":X=`<div class="input-combo">
-          ${Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360))}
-          ${Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100))}
-          ${Q("Lightness",Z("fig-fill-picker-ci-l","Lightness",0,100))}
-          ${j()}
+          ${J("Hue",K("fig-fill-picker-ci-h","Hue",0,360))}
+          ${J("Saturation",K("fig-fill-picker-ci-s","Saturation",0,100))}
+          ${J("Lightness",K("fig-fill-picker-ci-l","Lightness",0,100))}
+          ${Q()}
         </div>`;break;case"hsb":X=`<div class="input-combo">
-          ${Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360))}
-          ${Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100))}
-          ${Q("Brightness",Z("fig-fill-picker-ci-v","Brightness",0,100))}
-          ${j()}
+          ${J("Hue",K("fig-fill-picker-ci-h","Hue",0,360))}
+          ${J("Saturation",K("fig-fill-picker-ci-s","Saturation",0,100))}
+          ${J("Brightness",K("fig-fill-picker-ci-v","Brightness",0,100))}
+          ${Q()}
         </div>`;break;case"lab":X=`<div class="input-combo">
-          ${Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100))}
-          ${Q("Green-Red axis",Z("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001))}
-          ${Q("Blue-Yellow axis",Z("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001))}
-          ${j()}
+          ${J("Lightness",K("fig-fill-picker-ci-okl","Lightness",0,100))}
+          ${J("Green-Red axis",K("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001))}
+          ${J("Blue-Yellow axis",K("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001))}
+          ${Q()}
         </div>`;break;case"lch":X=`<div class="input-combo">
-          ${Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100))}
-          ${Q("Chroma",Z("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001))}
-          ${Q("Hue",Z("fig-fill-picker-ci-okh","Hue",0,360))}
-          ${j()}
-        </div>`;break;case"css":X='<fig-input-text class="fig-fill-picker-ci-css" aria-label="CSS color" placeholder="rgba(0, 0, 0, 1)"></fig-input-text>';break;default:X=$?`<div class="input-combo fig-fill-picker-ci-hex-row">
+          ${J("Lightness",K("fig-fill-picker-ci-okl","Lightness",0,100))}
+          ${J("Chroma",K("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001))}
+          ${J("Hue",K("fig-fill-picker-ci-okh","Hue",0,360))}
+          ${Q()}
+        </div>`;break;case"css":X='<fig-input-text class="fig-fill-picker-ci-css" aria-label="CSS color" placeholder="rgba(0, 0, 0, 1)"></fig-input-text>';break;default:X=U?`<div class="input-combo fig-fill-picker-ci-hex-row">
           <fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>
-          ${j()}
-        </div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}J.innerHTML=X,this.#JJ(),requestAnimationFrame(()=>this.#p())}#JJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=()=>{if(this.#z)return;let j=this.#n();if(!j)return;let X=Number.isFinite(j.a)?j.a:this.#j.a;if(this.#j={...j,a:X},this.#x(),this.#w(),this.#L)this.#L.setAttribute("value",this.#j.h);if(this.#D&&Number.isFinite(j.a))this.#D.setAttribute("value",this.#j.a*100);this.#V()},Z=()=>this.#NJ();J.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",Q),j.addEventListener("change",Z)})}#WJ(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Q=parseFloat(J.value);if(!Number.isFinite(Q))return;return Math.max(0,Math.min(1,Q/100))}#n(){let J=($)=>this.#J?.querySelector(`.${$}`),Q=($)=>parseFloat(J($)?.value??0),Z=($)=>{if(!$)return null;let j=this.#WJ();return{...$,a:j??$.a??this.#j.a}};switch(this.#Y){case"rgb":return Z(this.#HJ({r:Q("fig-fill-picker-ci-r"),g:Q("fig-fill-picker-ci-g"),b:Q("fig-fill-picker-ci-b")}));case"hsl":{let $=this.#vJ({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),l:Q("fig-fill-picker-ci-l")});return Z(this.#HJ($))}case"hsb":return Z({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),v:Q("fig-fill-picker-ci-v")});case"lab":{let $=this.#IJ({l:Q("fig-fill-picker-ci-okl")/100,a:Q("fig-fill-picker-ci-oka"),b:Q("fig-fill-picker-ci-okb")});return Z(this.#HJ($))}case"lch":{let $=this.#cJ({l:Q("fig-fill-picker-ci-okl")/100,c:Q("fig-fill-picker-ci-okc"),h:Q("fig-fill-picker-ci-okh")});return Z(this.#HJ($))}case"css":{let $=J("fig-fill-picker-ci-css");if(!$)return null;return this.#gJ($.value)}default:{let $=J("fig-fill-picker-ci-hex");if(!$)return null;let j=$.value.replace(/^#/,"");if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];if(j.length===8){let X=parseInt(j.slice(6,8),16)/255;if(j=j.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(j))return null;return{...this.#CJ(`#${j}`),a:X}}if(j.length!==6||!/^[0-9a-fA-F]{6}$/.test(j))return null;return Z(this.#CJ(`#${j}`))}}}#p(){if(!this.#J)return;let J=this.#MJ(this.#j),Q=this.#AJ(this.#j),Z=(j)=>this.#J.querySelector(`.${j}`),$=(j,X)=>{let Y=Z(j);if(Y)Y.setAttribute("value",X)};switch(this.#Y){case"rgb":$("fig-fill-picker-ci-r",Q.r),$("fig-fill-picker-ci-g",Q.g),$("fig-fill-picker-ci-b",Q.b);break;case"hsl":{let j=this.#mJ(Q);$("fig-fill-picker-ci-h",Math.round(j.h)),$("fig-fill-picker-ci-s",Math.round(j.s)),$("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":$("fig-fill-picker-ci-h",Math.round(this.#j.h)),$("fig-fill-picker-ci-s",Math.round(this.#j.s)),$("fig-fill-picker-ci-v",Math.round(this.#j.v));break;case"lab":{let j=this.#EJ(Q);$("fig-fill-picker-ci-okl",Math.round(j.l*100)),$("fig-fill-picker-ci-oka",+j.a.toFixed(3)),$("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{let j=this.#uJ(Q);$("fig-fill-picker-ci-okl",Math.round(j.l*100)),$("fig-fill-picker-ci-okc",+j.c.toFixed(3)),$("fig-fill-picker-ci-okh",Math.round(j.h));break}case"css":$("fig-fill-picker-ci-css",this.#bJ(this.#j));break;default:$("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#Y!=="css"){let j=Math.round(this.#j.a*1000)/10;$("fig-fill-picker-ci-a",Number.isInteger(j)?j:+j.toFixed(1))}if(this.#D)this.#D.setAttribute("color",J);this.#C()}#d(){let J=this.#J.querySelector('[data-tab="gradient"]'),Q=n(this.#$);J.innerHTML=`
+          ${Q()}
+        </div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}j.innerHTML=X,this.#fj(),requestAnimationFrame(()=>this.#C())}#fj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=()=>{if(this.#q)return;let Q=this.#Gj();if(!Q)return;let X=Number.isFinite(Q.a)?Q.a:this.#K.a;if(this.#K={...Q,a:X},this.#N(),this.#f(),this.#_)this.#_.setAttribute("value",this.#K.h);if(this.#z&&Number.isFinite(Q.a))this.#z.setAttribute("value",this.#K.a*100);this.#Q()},K=()=>this.#k();j.querySelectorAll("fig-input-number, fig-input-text").forEach((Q)=>{Q.addEventListener("input",J),Q.addEventListener("change",K)})}#kj(){let j=this.#j?.querySelector(".fig-fill-picker-ci-a");if(!j)return;let J=parseFloat(j.value);if(!Number.isFinite(J))return;return Math.max(0,Math.min(1,J/100))}#Gj(){let j=(U)=>this.#j?.querySelector(`.${U}`),J=(U)=>parseFloat(j(U)?.value??0),K=(U)=>{if(!U)return null;let Q=this.#kj();return{...U,a:Q??U.a??this.#K.a}};switch(this.#B){case"rgb":return K(this.#y({r:J("fig-fill-picker-ci-r"),g:J("fig-fill-picker-ci-g"),b:J("fig-fill-picker-ci-b")}));case"hsl":{let U=this.#bj({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),l:J("fig-fill-picker-ci-l")});return K(this.#y(U))}case"hsb":return K({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),v:J("fig-fill-picker-ci-v")});case"lab":{let U=this.#$j({l:J("fig-fill-picker-ci-okl")/100,a:J("fig-fill-picker-ci-oka"),b:J("fig-fill-picker-ci-okb")});return K(this.#y(U))}case"lch":{let U=this.#mj({l:J("fig-fill-picker-ci-okl")/100,c:J("fig-fill-picker-ci-okc"),h:J("fig-fill-picker-ci-okh")});return K(this.#y(U))}case"css":{let U=j("fig-fill-picker-ci-css");if(!U)return null;return this.#vj(U.value)}default:{let U=j("fig-fill-picker-ci-hex");if(!U)return null;let Q=U.value.replace(/^#/,"");if(Q.length===3)Q=Q[0]+Q[0]+Q[1]+Q[1]+Q[2]+Q[2];if(Q.length===8){let X=parseInt(Q.slice(6,8),16)/255;if(Q=Q.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(Q))return null;return{...this.#E(`#${Q}`),a:X}}if(Q.length!==6||!/^[0-9a-fA-F]{6}$/.test(Q))return null;return K(this.#E(`#${Q}`))}}}#C(){if(!this.#j)return;let j=this.#V(this.#K),J=this.#n(this.#K),K=(Q)=>this.#j.querySelector(`.${Q}`),U=(Q,X)=>{let Z=K(Q);if(Z)Z.setAttribute("value",X)};switch(this.#B){case"rgb":U("fig-fill-picker-ci-r",J.r),U("fig-fill-picker-ci-g",J.g),U("fig-fill-picker-ci-b",J.b);break;case"hsl":{let Q=this.#gj(J);U("fig-fill-picker-ci-h",Math.round(Q.h)),U("fig-fill-picker-ci-s",Math.round(Q.s)),U("fig-fill-picker-ci-l",Math.round(Q.l));break}case"hsb":U("fig-fill-picker-ci-h",Math.round(this.#K.h)),U("fig-fill-picker-ci-s",Math.round(this.#K.s)),U("fig-fill-picker-ci-v",Math.round(this.#K.v));break;case"lab":{let Q=this.#Zj(J);U("fig-fill-picker-ci-okl",Math.round(Q.l*100)),U("fig-fill-picker-ci-oka",+Q.a.toFixed(3)),U("fig-fill-picker-ci-okb",+Q.b.toFixed(3));break}case"lch":{let Q=this.#hj(J);U("fig-fill-picker-ci-okl",Math.round(Q.l*100)),U("fig-fill-picker-ci-okc",+Q.c.toFixed(3)),U("fig-fill-picker-ci-okh",Math.round(Q.h));break}case"css":U("fig-fill-picker-ci-css",this.#xj(this.#K));break;default:U("fig-fill-picker-ci-hex",j.replace(/^#/,"").toUpperCase());break}if(this.#B!=="css"){let Q=Math.round(this.#K.a*1000)/10;U("fig-fill-picker-ci-a",Number.isInteger(Q)?Q:+Q.toFixed(1))}if(this.#z)this.#z.setAttribute("color",j);this.#W()}#Dj(){let j=this.#j.querySelector('[data-tab="gradient"]'),J=H(this.#J);j.innerHTML=`
       <fig-field class="fig-fill-picker-gradient-header">
-        <fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${O(this.#$.type)}">
+        <fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${L(this.#J.type)}">
           <fig-select-options>
             <fig-select-option value="linear">Linear</fig-select-option>
             <fig-select-option value="radial">Radial</fig-select-option>
@@ -210,11 +85,11 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
           </fig-select-options>
         </fig-select>
         <fig-tooltip text="Gradient angle">
-          <fig-input-number class="fig-fill-picker-gradient-angle" aria-label="Gradient angle" value="${(this.#$.angle-90+360)%360}" min="0" max="360" units="°" wrap></fig-input-number>
+          <fig-input-number class="fig-fill-picker-gradient-angle" aria-label="Gradient angle" value="${(this.#J.angle-90+360)%360}" min="0" max="360" units="°" wrap></fig-input-number>
         </fig-tooltip>
         <div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
-          <fig-input-number min="0" max="100" aria-label="Gradient center X" value="${this.#$.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
-          <fig-input-number min="0" max="100" aria-label="Gradient center Y" value="${this.#$.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
+          <fig-input-number min="0" max="100" aria-label="Gradient center X" value="${this.#J.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
+          <fig-input-number min="0" max="100" aria-label="Gradient center Y" value="${this.#J.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
         </div>
         <div class="fig-fill-picker-gradient-actions">
           <fig-tooltip text="Flip gradient">
@@ -230,7 +105,7 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
         </div>
       </fig-field>
       <fig-preview class="fig-fill-picker-gradient-preview">
-        <fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:E(this.#$)})}'></fig-input-gradient>
+        <fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:D(this.#J)})}'></fig-input-gradient>
       </fig-preview>
       <div class="fig-fill-picker-gradient-stops">
         <fig-header class="fig-fill-picker-gradient-stops-header" borderless>
@@ -248,28 +123,28 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
           <span>Color interpolation</span>
         </fig-header>
         <fig-field class="fig-fill-picker-gradient-interpolation-field">
-          <fig-select class="fig-fill-picker-gradient-space" label="Color interpolation" full value="${O(Q)}">
+          <fig-select class="fig-fill-picker-gradient-space" label="Color interpolation" full value="${L(J)}">
             <fig-select-options>
-              ${this.#i()}
+              ${this.#Fj()}
             </fig-select-options>
           </fig-select>
         </fig-field>
       </div>
-    `,this.#KJ(),this.#$J(J)}#i(){let J=["shorter","longer","increasing","decreasing"];return[{label:"Linear",options:[{value:"srgb",label:"sRGB"}]},{label:"",options:[{value:"oklab",label:"OKLAB"}]},{label:"Polar",options:J.map((Z)=>({value:`oklch-${Z}`,label:`OKLCH ${Z.charAt(0).toUpperCase()}${Z.slice(1)}`}))},{label:"",separator:!0,options:J.map((Z)=>({value:`hsl-${Z}`,label:`HSL ${Z.charAt(0).toUpperCase()}${Z.slice(1)}`}))}].map((Z)=>{let $=Z.options.map((X)=>{let Y=X.method?X.method.charAt(0).toUpperCase()+X.method.slice(1):"",K=X.append||Y;return`<fig-select-option value="${O(X.value)}" label="${O(X.label)}">
+    `,this.#D(),this.#Vj(j)}#Fj(){let j=["shorter","longer","increasing","decreasing"];return[{label:"Linear",options:[{value:"srgb",label:"sRGB"}]},{label:"",options:[{value:"oklab",label:"OKLAB"}]},{label:"Polar",options:j.map((K)=>({value:`oklch-${K}`,label:`OKLCH ${K.charAt(0).toUpperCase()}${K.slice(1)}`}))},{label:"",separator:!0,options:j.map((K)=>({value:`hsl-${K}`,label:`HSL ${K.charAt(0).toUpperCase()}${K.slice(1)}`}))}].map((K)=>{let U=K.options.map((X)=>{let Z=X.method?X.method.charAt(0).toUpperCase()+X.method.slice(1):"",$=X.append||Z;return`<fig-select-option value="${L(X.value)}" label="${L(X.label)}">
           <fig-interpolation-swatch slot="prepend" size="large" aria-hidden="true"></fig-interpolation-swatch>
-          ${O(X.label)}
-          ${K?`<span slot="append">${O(K)}</span>`:""}
-        </fig-select-option>`}).join("");return`${Z.label||Z.separator?`<fig-menu-separator${Z.label?` label="${O(Z.label)}"`:""}></fig-menu-separator>`:""}${$}`}).join("")}#$J(J){let Q=(U)=>typeof U.detail==="string"?U.detail:U.target?.value,Z=J.querySelector(".fig-fill-picker-gradient-bar-input"),$=(U)=>{if(!Z)return;this.#T=!0;try{Z.setAttribute("value",JSON.stringify({type:"gradient",gradient:E(U)}))}finally{this.#T=!1}},j=()=>{$(this.#$)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(U)=>{let q=Q(U);if(!q)return;this.#$.type=q,this.#KJ(),this.#V()});let Y=J.querySelector(".fig-fill-picker-gradient-space");if(Y?.querySelectorAll("fig-select-option").forEach((U)=>{let q=()=>{let B=w(U.getAttribute("value")||"srgb");$(C({...this.#$,...B}))};U.addEventListener("pointerenter",q),U.addEventListener("pointerleave",()=>{if(document.activeElement!==U)j()}),U.addEventListener("focus",q),U.addEventListener("blur",()=>{if(!U.matches(":hover"))j()})}),this.#F?.disconnect(),Y)this.#F=new MutationObserver(()=>{if(!Y.hasAttribute("open"))j()}),this.#F.observe(Y,{attributes:!0,attributeFilter:["open"]});Y?.addEventListener("change",(U)=>{let q=Q(U);if(!q)return;let B=w(q);this.#$=C({...this.#$,...B}),this.#KJ(),this.#V()}),J.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(U)=>{let q=parseFloat(U.target.value)||0;this.#$.angle=(q+90)%360,this.#jJ(),this.#V()});let _=J.querySelector(".fig-fill-picker-gradient-cx"),G=J.querySelector(".fig-fill-picker-gradient-cy");if(_?.addEventListener("input",(U)=>{let q=Number.parseFloat(U.target.value);this.#$.centerX=Number.isFinite(q)?q:50,this.#jJ(),this.#V()}),G?.addEventListener("input",(U)=>{let q=Number.parseFloat(U.target.value);this.#$.centerY=Number.isFinite(q)?q:50,this.#jJ(),this.#V()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#$.angle=(Number(this.#$.angle)+90)%360,this.#KJ(),this.#V()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#$.stops.forEach((U)=>{U.position=100-U.position}),this.#$.stops.sort((U,q)=>U.position-q.position),this.#KJ(),this.#V()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#$.stops.push({position:50,color:"#888888",opacity:100}),this.#$.stops.sort((q,B)=>q.position-B.position),this.#KJ(),this.#V()}),Z){let U=(q)=>{if(q.stopPropagation(),this.#T)return;let B=q.detail;if(!B?.gradient)return;this.#$=C({...this.#$,...B.gradient}),this.#C(),this.#qJ(),this.#DJ()};Z.addEventListener("input",(q)=>{U(q),this.#V()}),Z.addEventListener("change",(q)=>{U(q),this.#NJ()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(U)=>{this.#t(U)})}#v(J){let Q=String(J.color||"#888888").replace(/^#/,"").slice(0,6),Z=J.opacity??100;if(Z>=100)return`#${Q}`;let $=Math.round(Z/100*255).toString(16).padStart(2,"0");return`#${Q}${$}`}#QJ(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#GJ(J.hexOpaque);let Q=J.value;if(typeof Q==="string"&&Q.startsWith("#"))return this.#GJ(Q.length>7?Q.slice(0,7):Q);let Z=J.querySelector('fig-input-text:not([type="number"])'),$=String(Z?.value??Z?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test($))return`#${$.toUpperCase()}`;let j=J.getAttribute("value");if(typeof j==="string"&&j.startsWith("#"))return this.#GJ(j.length>7?j.slice(0,7):j);return"#888888"}#GJ(J){let Q=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Q))return"#888888";return`#${Q.toUpperCase()}`}#OJ(J){let Q=J.querySelector(".fig-fill-picker-stop-position"),Z=J.querySelector(".fig-fill-picker-stop-color"),$=parseFloat(Q?.value??Q?.getAttribute("value")??"0")||0,j=this.#QJ(Z),X=100;if(Z instanceof HTMLElement&&Z.rgba?.a!==void 0)X=Math.round(Z.rgba.a*100);else{let Y=parseInt(J.dataset.index,10);if(!isNaN(Y)&&this.#$.stops[Y])X=this.#$.stops[Y].opacity??100}return{position:$,color:j,opacity:X}}#TJ(J){let Q=parseInt(J.dataset.index,10);if(isNaN(Q)||Q<0||Q>=this.#$.stops.length)return;let Z={...this.#$.stops[Q],...this.#OJ(J)};this.#$.stops[Q]=Z,this.#PJ(J,Z)}#PJ(J,Q){let Z=J.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",String(Q.position));let $=J.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#v(Q))}#t(J){let{oldIndex:Q,newIndex:Z}=J.detail??{};if(Q==null||Z==null||Q===Z||Q<0||Z<0||Q>=this.#$.stops.length||Z>=this.#$.stops.length)return;let j=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");j.forEach((Y)=>this.#TJ(Y));let[X]=this.#$.stops.splice(Q,1);this.#$.stops.splice(Z,0,X),j.forEach((Y,K)=>{Y.dataset.index=String(K)}),this.#T=!0;try{this.#qJ(),this.#jJ(),this.#V()}finally{this.#T=!1}}#KJ(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#$=C(this.#$);let Q=J.querySelector(".fig-fill-picker-gradient-angle"),Z=J.querySelector(".fig-fill-picker-gradient-rotate"),$=J.querySelector(".fig-fill-picker-gradient-center");if(this.#$.type==="radial"){if(Q.style.display="none",Z)Z.style.display="none";$.style.display="flex"}else{Q.style.removeProperty("display"),Z?.style.removeProperty("display"),$.style.display="none";let X=(this.#$.angle-90+360)%360;Q.setAttribute("value",X)}let j=J.querySelector(".fig-fill-picker-gradient-space");if(j)j.value=n(this.#$);this.#qJ(),this.#jJ(),this.#DJ()}#BJ(){let J=Array.isArray(this.#$.stops)?[...this.#$.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Q)=>({color:String(Q.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q.position??0}))}#qJ(){if(!this.#J)return;let J=this.#BJ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Q)=>{let Z=Q.closest("fig-select-option")?.getAttribute("value")||"srgb",$=w(Z),j={type:"linear",stops:J,interpolationSpace:$.interpolationSpace};if(A.has($.interpolationSpace))j.hueInterpolation=$.hueInterpolation;Q.value={type:"gradient",gradient:j}})}#jJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#T=!0,J.setAttribute("value",JSON.stringify({type:"gradient",gradient:E(this.#$)})),this.#T=!1;this.#C()}#DJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Q=J?.querySelector("fig-reorder");if(!J||!Q)return;let Z=Q.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Z.length===this.#$.stops.length){this.#$.stops.forEach(($,j)=>{let X=Z[j];X.dataset.index=j;let Y=X.querySelector(".fig-fill-picker-stop-position");if(Y)Y.setAttribute("value",$.position);let K=X.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#v($));let _=X.querySelector(".fig-fill-picker-stop-remove");if(_)if(this.#$.stops.length<=2)_.setAttribute("disabled","");else _.removeAttribute("disabled")});return}this.#FJ(J)}#FJ(J){let Q=J.querySelector("fig-reorder");if(!Q)return;Q.innerHTML=this.#$.stops.map((Z,$)=>`
-      <fig-field class="fig-fill-picker-gradient-stop-row" data-index="${$}">
-        <fig-input-number class="fig-fill-picker-stop-position" aria-label="Gradient stop position" min="0" max="100" value="${Z.position}" units="%"></fig-input-number>
-        <fig-input-color class="fig-fill-picker-stop-color" aria-label="Gradient stop color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${this.#v(Z)}"></fig-input-color>
-        <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#$.stops.length<=2?"disabled":""} aria-label="Remove gradient stop">
+          ${L(X.label)}
+          ${$?`<span slot="append">${L($)}</span>`:""}
+        </fig-select-option>`}).join("");return`${K.label||K.separator?`<fig-menu-separator${K.label?` label="${L(K.label)}"`:""}></fig-menu-separator>`:""}${U}`}).join("")}#Vj(j){let J=(Y)=>typeof Y.detail==="string"?Y.detail:Y.target?.value,K=j.querySelector(".fig-fill-picker-gradient-bar-input"),U=(Y)=>{if(!K)return;this.#L=!0;try{K.setAttribute("value",JSON.stringify({type:"gradient",gradient:D(Y)}))}finally{this.#L=!1}},Q=()=>{U(this.#J)};j.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(Y)=>{let W=J(Y);if(!W)return;this.#J.type=W,this.#D(),this.#Q()});let Z=j.querySelector(".fig-fill-picker-gradient-space");if(Z?.querySelectorAll("fig-select-option").forEach((Y)=>{let W=()=>{let z=q(Y.getAttribute("value")||"srgb");U(f({...this.#J,...z}))};Y.addEventListener("pointerenter",W),Y.addEventListener("pointerleave",()=>{if(document.activeElement!==Y)Q()}),Y.addEventListener("focus",W),Y.addEventListener("blur",()=>{if(!Y.matches(":hover"))Q()})}),this.#P?.disconnect(),Z)this.#P=new MutationObserver(()=>{if(!Z.hasAttribute("open"))Q()}),this.#P.observe(Z,{attributes:!0,attributeFilter:["open"]});Z?.addEventListener("change",(Y)=>{let W=J(Y);if(!W)return;let z=q(W);this.#J=f({...this.#J,...z}),this.#D(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(Y)=>{let W=parseFloat(Y.target.value)||0;this.#J.angle=(W+90)%360,this.#F(),this.#Q()});let T=j.querySelector(".fig-fill-picker-gradient-cx"),O=j.querySelector(".fig-fill-picker-gradient-cy");if(T?.addEventListener("input",(Y)=>{let W=Number.parseFloat(Y.target.value);this.#J.centerX=Number.isFinite(W)?W:50,this.#F(),this.#Q()}),O?.addEventListener("input",(Y)=>{let W=Number.parseFloat(Y.target.value);this.#J.centerY=Number.isFinite(W)?W:50,this.#F(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#J.angle=(Number(this.#J.angle)+90)%360,this.#D(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#J.stops.forEach((Y)=>{Y.position=100-Y.position}),this.#J.stops.sort((Y,W)=>Y.position-W.position),this.#D(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#J.stops.push({position:50,color:"#888888",opacity:100}),this.#J.stops.sort((W,z)=>W.position-z.position),this.#D(),this.#Q()}),K){let Y=(W)=>{if(W.stopPropagation(),this.#L)return;let z=W.detail;if(!z?.gradient)return;this.#J=f({...this.#J,...z.gradient}),this.#W(),this.#w(),this.#Qj()};K.addEventListener("input",(W)=>{Y(W),this.#Q()}),K.addEventListener("change",(W)=>{Y(W),this.#k()})}j.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(Y)=>{this.#Bj(Y)})}#i(j){let J=String(j.color||"#888888").replace(/^#/,"").slice(0,6),K=j.opacity??100;if(K>=100)return`#${J}`;let U=Math.round(K/100*255).toString(16).padStart(2,"0");return`#${J}${U}`}#_j(j){if(!(j instanceof HTMLElement))return"#888888";if(j.hexOpaque)return this.#r(j.hexOpaque);let J=j.value;if(typeof J==="string"&&J.startsWith("#"))return this.#r(J.length>7?J.slice(0,7):J);let K=j.querySelector('fig-input-text:not([type="number"])'),U=String(K?.value??K?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(U))return`#${U.toUpperCase()}`;let Q=j.getAttribute("value");if(typeof Q==="string"&&Q.startsWith("#"))return this.#r(Q.length>7?Q.slice(0,7):Q);return"#888888"}#r(j){let J=String(j||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(J))return"#888888";return`#${J.toUpperCase()}`}#qj(j){let J=j.querySelector(".fig-fill-picker-stop-position"),K=j.querySelector(".fig-fill-picker-stop-color"),U=parseFloat(J?.value??J?.getAttribute("value")??"0")||0,Q=this.#_j(K),X=100;if(K instanceof HTMLElement&&K.rgba?.a!==void 0)X=Math.round(K.rgba.a*100);else{let Z=parseInt(j.dataset.index,10);if(!isNaN(Z)&&this.#J.stops[Z])X=this.#J.stops[Z].opacity??100}return{position:U,color:Q,opacity:X}}#l(j){let J=parseInt(j.dataset.index,10);if(isNaN(J)||J<0||J>=this.#J.stops.length)return;let K={...this.#J.stops[J],...this.#qj(j)};this.#J.stops[J]=K,this.#Hj(j,K)}#Hj(j,J){let K=j.querySelector(".fig-fill-picker-stop-position");if(K)K.setAttribute("value",String(J.position));let U=j.querySelector(".fig-fill-picker-stop-color");if(U)U.setAttribute("value",this.#i(J))}#Bj(j){let{oldIndex:J,newIndex:K}=j.detail??{};if(J==null||K==null||J===K||J<0||K<0||J>=this.#J.stops.length||K>=this.#J.stops.length)return;let Q=j.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Q.forEach((Z)=>this.#l(Z));let[X]=this.#J.stops.splice(J,1);this.#J.stops.splice(K,0,X),Q.forEach((Z,$)=>{Z.dataset.index=String($)}),this.#L=!0;try{this.#w(),this.#F(),this.#Q()}finally{this.#L=!1}}#D(){if(!this.#j)return;let j=this.#j.querySelector('[data-tab="gradient"]');if(!j)return;this.#J=f(this.#J);let J=j.querySelector(".fig-fill-picker-gradient-angle"),K=j.querySelector(".fig-fill-picker-gradient-rotate"),U=j.querySelector(".fig-fill-picker-gradient-center");if(this.#J.type==="radial"){if(J.style.display="none",K)K.style.display="none";U.style.display="flex"}else{J.style.removeProperty("display"),K?.style.removeProperty("display"),U.style.display="none";let X=(this.#J.angle-90+360)%360;J.setAttribute("value",X)}let Q=j.querySelector(".fig-fill-picker-gradient-space");if(Q)Q.value=H(this.#J);this.#w(),this.#F(),this.#Qj()}#Nj(){let j=Array.isArray(this.#J.stops)?[...this.#J.stops].sort((J,K)=>(J.position??0)-(K.position??0)):[];if(j.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return j.map((J)=>({color:String(J.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:J.position??0}))}#w(){if(!this.#j)return;let j=this.#Nj();this.#j.querySelectorAll("fig-interpolation-swatch").forEach((J)=>{let K=J.closest("fig-select-option")?.getAttribute("value")||"srgb",U=q(K),Q={type:"linear",stops:j,interpolationSpace:U.interpolationSpace};if(k.has(U.interpolationSpace))Q.hueInterpolation=U.hueInterpolation;J.value={type:"gradient",gradient:Q}})}#F(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-bar-input");if(j)this.#L=!0,j.setAttribute("value",JSON.stringify({type:"gradient",gradient:D(this.#J)})),this.#L=!1;this.#W()}#Qj(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-stops-list"),J=j?.querySelector("fig-reorder");if(!j||!J)return;let K=J.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(K.length===this.#J.stops.length){this.#J.stops.forEach((U,Q)=>{let X=K[Q];X.dataset.index=Q;let Z=X.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",U.position);let $=X.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#i(U));let T=X.querySelector(".fig-fill-picker-stop-remove");if(T)if(this.#J.stops.length<=2)T.setAttribute("disabled","");else T.removeAttribute("disabled")});return}this.#Cj(j)}#Cj(j){let J=j.querySelector("fig-reorder");if(!J)return;J.innerHTML=this.#J.stops.map((K,U)=>`
+      <fig-field class="fig-fill-picker-gradient-stop-row" data-index="${U}">
+        <fig-input-number class="fig-fill-picker-stop-position" aria-label="Gradient stop position" min="0" max="100" value="${K.position}" units="%"></fig-input-number>
+        <fig-input-color class="fig-fill-picker-stop-color" aria-label="Gradient stop color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${this.#i(K)}"></fig-input-color>
+        <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#J.stops.length<=2?"disabled":""} aria-label="Remove gradient stop">
           <fig-icon name="minus"></fig-icon>
         </fig-button>
       </fig-field>
-    `).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((Z)=>{Z.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#TJ(Z),this.#qJ(),this.#jJ(),this.#V()});let $=Z.querySelector(".fig-fill-picker-stop-color"),j=$.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#J;else requestAnimationFrame(()=>{let Y=$.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J});let X=()=>{this.#TJ(Z),this.#T=!0;try{this.#qJ(),this.#jJ(),this.#V()}finally{this.#T=!1}};$.addEventListener("input",X),$.addEventListener("change",X),Z.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let Y=parseInt(Z.dataset.index,10);if(this.#$.stops.length>2)this.#$.stops.splice(Y,1),this.#KJ(),this.#V()})})}#LJ(J,Q=!0){let Z=C({...this.#$,interpolationSpace:J??this.#$.interpolationSpace}),$=this.#k==="display-p3",j=Z.stops.map((K)=>{let _=(K.opacity??100)/100;return`${$?this.#hJ(K.color,_):this.#wJ(K.color,_)} ${K.position}%`}).join(", "),X=KJ(Z),Y=Q&&X?` ${X}`:"";switch(Z.type){case"linear":return`linear-gradient(${Z.angle}deg${Y}, ${j})`;case"radial":return`radial-gradient(circle at ${Z.centerX}% ${Z.centerY}%${Y}, ${j})`;case"angular":return`conic-gradient(from ${Z.angle}deg${Y}, ${j})`;default:return`linear-gradient(${Z.angle}deg${Y}, ${j})`}}static#zJ=new Map;#UJ(J){let Q=I.#zJ.get(J);if(Q!==void 0)return Q;let Z=document.createElement("div");Z.style.background=J;let $=!!Z.style.background;return I.#zJ.set(J,$),$}#r(){let J=this.#LJ(void 0,!0);if(this.#UJ(J))return J;let Q=this.#LJ("oklab",!0);if(this.#UJ(Q))return Q;return this.#LJ("oklab",!1)}#XJ(){let J=this.#J.querySelector('[data-tab="image"]');J.innerHTML=`
+    `).join(""),J.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((K)=>{K.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#l(K),this.#w(),this.#F(),this.#Q()});let U=K.querySelector(".fig-fill-picker-stop-color"),Q=U.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#j;else requestAnimationFrame(()=>{let Z=U.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#j});let X=()=>{this.#l(K),this.#L=!0;try{this.#w(),this.#F(),this.#Q()}finally{this.#L=!1}};U.addEventListener("input",X),U.addEventListener("change",X),K.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let Z=parseInt(K.dataset.index,10);if(this.#J.stops.length>2)this.#J.stops.splice(Z,1),this.#D(),this.#Q()})})}#o(j,J=!0){let K=f({...this.#J,interpolationSpace:j??this.#J.interpolationSpace}),U=this.#A==="display-p3",Q=K.stops.map(($)=>{let T=($.opacity??100)/100;return`${U?this.#uj($.color,T):this.#Ij($.color,T)} ${$.position}%`}).join(", "),X=E(K),Z=J&&X?` ${X}`:"";switch(K.type){case"linear":return`linear-gradient(${K.angle}deg${Z}, ${Q})`;case"radial":return`radial-gradient(circle at ${K.centerX}% ${K.centerY}%${Z}, ${Q})`;case"angular":return`conic-gradient(from ${K.angle}deg${Z}, ${Q})`;default:return`linear-gradient(${K.angle}deg${Z}, ${Q})`}}static#Uj=new Map;#Xj(j){let J=F.#Uj.get(j);if(J!==void 0)return J;let K=document.createElement("div");K.style.background=j;let U=!!K.style.background;return F.#Uj.set(j,U),U}#Yj(){let j=this.#o(void 0,!0);if(this.#Xj(j))return j;let J=this.#o("oklab",!0);if(this.#Xj(J))return J;return this.#o("oklab",!1)}#Mj(){let j=this.#j.querySelector('[data-tab="image"]');j.innerHTML=`
       <fig-field class="fig-fill-picker-media-header">
-        <fig-select class="fig-fill-picker-scale-mode" label="Image scale mode" value="${O(this.#X.scaleMode)}">
+        <fig-select class="fig-fill-picker-scale-mode" label="Image scale mode" value="${L(this.#X.scaleMode)}">
           <fig-select-options>
             <fig-select-option value="fill">Fill</fig-select-option>
             <fig-select-option value="fit">Fit</fig-select-option>
@@ -283,9 +158,9 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
         </fig-button>
       </fig-field>
       <fig-image class="fig-fill-picker-media-preview fig-fill-picker-image-preview" upload="true" label="Upload from computer" alt="Image fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true"></fig-image>
-    `,this.#YJ(J)}#YJ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-scale"),$=J.querySelector(".fig-fill-picker-image-preview");Q.addEventListener("change",(j)=>{let X=typeof j.detail==="string"?j.detail:j.target?.value;if(!X)return;this.#X.scaleMode=X,Z.style.display=X==="tile"?"block":"none",this.#A($),this.#C(),this.#V()}),Z.addEventListener("input",(j)=>{this.#X.scale=parseFloat(j.target.value)||100,this.#A($),this.#C(),this.#V()}),$.addEventListener("loaded",(j)=>{let X=j.detail?.src||$.src;if(!X)return;this.#X.url=X,this.#A($),this.#C(),this.#V()}),$.addEventListener("change",()=>{if($.src)return;this.#X.url=null,this.#A($),this.#C(),this.#V()}),this.#A($)}#A(J){if(!this.#X.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#X.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#X.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#X.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#X.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#RJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#_.url){J.removeAttribute("src"),J.classList.remove("has-media");return}J.setAttribute("src",this.#_.url),J.classList.add("has-media");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#_.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#_.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#VJ(){let J=this.#J.querySelector('[data-tab="video"]');J.innerHTML=`
+    `,this.#yj(j)}#yj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-scale"),U=j.querySelector(".fig-fill-picker-image-preview");J.addEventListener("change",(Q)=>{let X=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!X)return;this.#X.scaleMode=X,K.style.display=X==="tile"?"block":"none",this.#M(U),this.#W(),this.#Q()}),K.addEventListener("input",(Q)=>{this.#X.scale=parseFloat(Q.target.value)||100,this.#M(U),this.#W(),this.#Q()}),U.addEventListener("loaded",(Q)=>{let X=Q.detail?.src||U.src;if(!X)return;this.#X.url=X,this.#M(U),this.#W(),this.#Q()}),U.addEventListener("change",()=>{if(U.src)return;this.#X.url=null,this.#M(U),this.#W(),this.#Q()}),this.#M(U)}#M(j){if(!this.#X.url){j.removeAttribute("src"),j.classList.remove("has-media","is-tiled"),j.style.backgroundImage="",j.style.backgroundPosition="",j.style.backgroundRepeat="",j.style.backgroundSize="";return}j.setAttribute("src",this.#X.url),j.classList.add("has-media"),j.style.backgroundImage="",j.style.backgroundPosition="",j.style.backgroundRepeat="",j.style.backgroundSize="",j.mediaEl?.style.removeProperty("opacity");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#X.scaleMode){case"fill":j.classList.remove("is-tiled"),j.setAttribute("fit","cover");break;case"crop":j.classList.remove("is-tiled"),j.setAttribute("fit","cover");break;case"fit":j.classList.remove("is-tiled"),j.setAttribute("fit","contain");break;case"tile":if(j.classList.add("is-tiled"),j.setAttribute("fit","none"),j.style.backgroundImage=`url(${this.#X.url})`,j.style.backgroundPosition="top left",j.style.backgroundSize=`${this.#X.scale}%`,j.style.backgroundRepeat="repeat",j.mediaEl)j.mediaEl.style.opacity="0";break}}#d(j){if(j.tagName==="FIG-MEDIA"){if(!this.#Z.url){j.removeAttribute("src"),j.classList.remove("has-media");return}j.setAttribute("src",this.#Z.url),j.classList.add("has-media");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#Z.scaleMode){case"fill":case"crop":j.setAttribute("fit","cover");break;case"fit":j.setAttribute("fit","contain");break}return}switch(j.style.objectPosition="center",j.style.width="100%",j.style.height="100%",this.#Z.scaleMode){case"fill":case"crop":j.style.objectFit="cover";break;case"fit":j.style.objectFit="contain";break}}#Ej(){let j=this.#j.querySelector('[data-tab="video"]');j.innerHTML=`
       <fig-field class="fig-fill-picker-media-header">
-        <fig-select class="fig-fill-picker-scale-mode" label="Video scale mode" value="${O(this.#_.scaleMode)}">
+        <fig-select class="fig-fill-picker-scale-mode" label="Video scale mode" value="${L(this.#Z.scaleMode)}">
           <fig-select-options>
             <fig-select-option value="fill">Fill</fig-select-option>
             <fig-select-option value="fit">Fit</fig-select-option>
@@ -297,7 +172,7 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
         </fig-button>
       </fig-field>
       <fig-media class="fig-fill-picker-media-preview fig-fill-picker-video-preview" type="video" upload="true" label="Upload from computer" aria-label="Video fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" controls muted="true" loop="true"></fig-media>
-    `,this.#fJ(J)}#fJ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-video-preview");Q.addEventListener("change",($)=>{let j=typeof $.detail==="string"?$.detail:$.target?.value;if(!j)return;this.#_.scaleMode=j,this.#RJ(Z),this.#C(),this.#V()}),Z.addEventListener("loaded",($)=>{let j=$.detail?.src||Z.src;if(!j)return;this.#_.url=j,this.#RJ(Z),Z.play?.(),this.#C(),this.#V()}),Z.addEventListener("change",()=>{if(Z.src)return;this.#_.url=null,this.#RJ(Z),this.#C(),this.#V()}),this.#RJ(Z)}#SJ(){let J=this.#J.querySelector('[data-tab="webcam"]');J.innerHTML=`
+    `,this.#Aj(j)}#Aj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-video-preview");J.addEventListener("change",(U)=>{let Q=typeof U.detail==="string"?U.detail:U.target?.value;if(!Q)return;this.#Z.scaleMode=Q,this.#d(K),this.#W(),this.#Q()}),K.addEventListener("loaded",(U)=>{let Q=U.detail?.src||K.src;if(!Q)return;this.#Z.url=Q,this.#d(K),K.play?.(),this.#W(),this.#Q()}),K.addEventListener("change",()=>{if(K.src)return;this.#Z.url=null,this.#d(K),this.#W(),this.#Q()}),this.#d(K)}#Pj(){let j=this.#j.querySelector('[data-tab="webcam"]');j.innerHTML=`
       <fig-field class="fig-fill-picker-webcam-camera" style="display: none;">
         <fig-select class="fig-fill-picker-camera-select" label="Camera" full>
           <fig-select-options></fig-select-options>
@@ -314,4 +189,4 @@ import"./fig.js";function L(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="
           Capture
         </fig-button>
       </div>
-    `,this.#yJ(J)}#yJ(J){let Q=J.querySelector(".fig-fill-picker-webcam-video"),Z=J.querySelector(".fig-fill-picker-webcam-status"),$=J.querySelector(".fig-fill-picker-webcam-capture"),j=J.querySelector(".fig-fill-picker-webcam-camera"),X=J.querySelector(".fig-fill-picker-camera-select"),Y=async(K=null)=>{this.#m();let _=this.#S;try{let G={video:K?{deviceId:{exact:K}}:!0},k=await navigator.mediaDevices.getUserMedia(G);if(_!==this.#S||!this.isConnected||this.#U!=="webcam"){k.getTracks().forEach((B)=>B.stop());return}this.#N.stream=k,Q.srcObject=k,Q.style.display="block",Z.style.display="none";let U=await navigator.mediaDevices.enumerateDevices();if(_!==this.#S)return;let q=U.filter((B)=>B.kind==="videoinput");if(q.length>1){j.style.display="";let B=X.querySelector(":scope > fig-select-options");if(!B)B=document.createElement("fig-select-options"),X.append(B);if(B.replaceChildren(),q.forEach((T,N)=>{let D=document.createElement("fig-select-option");D.value=T.deviceId;let z=T.label||(q.length>1?`Camera ${N+1}`:"Camera");D.textContent=z.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(F,M)=>{return` ${/^\d+$/.test(M)?Number.parseInt(M,10).toString():M.replace(/^0+/,"")||"0"}`}),B.append(D)}),K)X.value=K}else j.style.display="none",X.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(G){if(_!==this.#S)return;console.error("Webcam error:",G.name,G.message);let k="Camera access denied";if(G.name==="NotAllowedError")k="Camera permission denied";else if(G.name==="NotFoundError")k="No camera found";else if(G.name==="NotReadableError")k="Camera in use by another app";else if(G.name==="OverconstrainedError")k="Camera constraints not supported";else if(!window.isSecureContext)k="Camera requires secure context";Z.replaceChildren();let U=document.createElement("span");U.textContent=k,Z.appendChild(U),Z.style.display="flex",Q.style.display="none"}};this.#H=Y,X.addEventListener("change",(K)=>{let _=typeof K.detail==="string"?K.detail:K.target?.value;if(_)Y(_)}),$.addEventListener("click",async()=>{if(!this.#N.stream)return;if(!Q.videoWidth||!Q.videoHeight)return;let K=document.createElement("canvas");K.width=Q.videoWidth,K.height=Q.videoHeight,K.getContext("2d").drawImage(Q,0,0,K.width,K.height);let _=await new Promise((k)=>K.toBlob(k,"image/png"));if(!_)return;if(this.#N.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#N.snapshot);this.#N.snapshot=URL.createObjectURL(_),this.#X.url=this.#N.snapshot;let G=this.#J.querySelector(".fig-fill-picker-image-preview");if(G)this.#A(G);this.#E("image")})}#AJ(J){let Q=J.h/360,Z=J.s/100,$=J.v/100,j,X,Y,K=Math.floor(Q*6),_=Q*6-K,G=$*(1-Z),k=$*(1-_*Z),U=$*(1-(1-_)*Z);switch(K%6){case 0:j=$,X=U,Y=G;break;case 1:j=k,X=$,Y=G;break;case 2:j=G,X=$,Y=U;break;case 3:j=G,X=k,Y=$;break;case 4:j=U,X=G,Y=$;break;case 5:j=$,X=G,Y=k;break}return{r:Math.round(j*255),g:Math.round(X*255),b:Math.round(Y*255)}}#HJ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,j=Math.max(Q,Z,$),X=Math.min(Q,Z,$),Y=j-X,K=0,_=j===0?0:Y/j,G=j;if(j!==X){switch(j){case Q:K=(Z-$)/Y+(Z<$?6:0);break;case Z:K=($-Q)/Y+2;break;case $:K=(Q-Z)/Y+4;break}K/=6}return{h:K*360,s:_*100,v:G*100,a:1}}#MJ(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Q=this.#AJ(J),Z=($)=>{return(isNaN($)?217:Math.max(0,Math.min(255,Math.round($)))).toString(16).padStart(2,"0")};return`#${Z(Q.r)}${Z(Q.g)}${Z(Q.b)}`}#CJ(J){let Q=parseInt(J.slice(1,3),16),Z=parseInt(J.slice(3,5),16),$=parseInt(J.slice(5,7),16);return this.#HJ({r:Q,g:Z,b:$})}#wJ(J,Q=1){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),j=parseInt(J.slice(5,7),16);return`rgba(${Z}, ${$}, ${j}, ${Q})`}#xJ(J){let Q=Math.max(0,Math.min(1,Number(J)||0)),Z=Math.round(Q*1000)/1000;return String(Z)}#bJ(J=this.#j){let Q=this.#AJ(J);return`rgba(${Q.r}, ${Q.g}, ${Q.b}, ${this.#xJ(J.a)})`}#gJ(J){let Q=String(J??"").trim();if(!Q)return null;let Z=Q.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(Z){let j=Z[1];if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];let X=1;if(j.length===8)X=parseInt(j.slice(6,8),16)/255,j=j.slice(0,6);return{...this.#CJ(`#${j}`),a:X}}let $=Q.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if($){let j=Math.max(0,Math.min(255,Math.round(parseFloat($[1])))),X=Math.max(0,Math.min(255,Math.round(parseFloat($[2])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat($[3])))),K=$[4]!==void 0?Math.max(0,Math.min(1,parseFloat($[4]))):1;if(![j,X,Y,K].every(Number.isFinite))return null;return{...this.#HJ({r:j,g:X,b:Y}),a:K}}return null}#hJ(J,Q=1){let Z=+(parseInt(J.slice(1,3),16)/255).toFixed(4),$=+(parseInt(J.slice(3,5),16)/255).toFixed(4),j=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${Z} ${$} ${j} / ${Q})`}#mJ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,j=Math.max(Q,Z,$),X=Math.min(Q,Z,$),Y,K,_=(j+X)/2;if(j===X)Y=K=0;else{let G=j-X;switch(K=_>0.5?G/(2-j-X):G/(j+X),j){case Q:Y=((Z-$)/G+(Z<$?6:0))/6;break;case Z:Y=(($-Q)/G+2)/6;break;case $:Y=((Q-Z)/G+4)/6;break}}return{h:Y*360,s:K*100,l:_*100}}#vJ(J){let Q=J.h/360,Z=J.s/100,$=J.l/100,j,X,Y;if(Z===0)j=X=Y=$;else{let K=(k,U,q)=>{if(q<0)q+=1;if(q>1)q-=1;if(q<0.16666666666666666)return k+(U-k)*6*q;if(q<0.5)return U;if(q<0.6666666666666666)return k+(U-k)*(0.6666666666666666-q)*6;return k},_=$<0.5?$*(1+Z):$+Z-$*Z,G=2*$-_;j=K(G,_,Q+0.3333333333333333),X=K(G,_,Q),Y=K(G,_,Q-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(X*255),b:Math.round(Y*255)}}#EJ(J){let Q=(U)=>{return U=U/255,U<=0.04045?U/12.92:Math.pow((U+0.055)/1.055,2.4)},Z=Q(J.r),$=Q(J.g),j=Q(J.b),X=0.4122214708*Z+0.5363325363*$+0.0514459929*j,Y=0.2119034982*Z+0.6806995451*$+0.1073969566*j,K=0.0883024619*Z+0.2817188376*$+0.6299787005*j,_=Math.cbrt(X),G=Math.cbrt(Y),k=Math.cbrt(K);return{l:0.2104542553*_+0.793617785*G-0.0040720468*k,a:1.9779984951*_-2.428592205*G+0.4505937099*k,b:0.0259040371*_+0.7827717662*G-0.808675766*k}}#uJ(J){let Q=this.#EJ(J);return{l:Q.l,c:Math.sqrt(Q.a*Q.a+Q.b*Q.b),h:(Math.atan2(Q.b,Q.a)*180/Math.PI+360)%360}}#IJ(J){let Q=J.l+0.3963377774*J.a+0.2158037573*J.b,Z=J.l-0.1055613458*J.a-0.0638541728*J.b,$=J.l-0.0894841775*J.a-1.291485548*J.b,j=Q*Q*Q,X=Z*Z*Z,Y=$*$*$,K=(_)=>{let G=_<=0.0031308?12.92*_:1.055*Math.pow(_,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,G))*255)};return{r:K(4.0767416621*j-3.3077115913*X+0.2309699292*Y),g:K(-1.2684380046*j+2.6097574011*X-0.3413193965*Y),b:K(-0.0041960863*j-0.7034186147*X+1.707614701*Y)}}#cJ(J){let Q=J.h*Math.PI/180;return this.#IJ({l:J.l,a:J.c*Math.cos(Q),b:J.c*Math.sin(Q)})}#V(){this.#C(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#NJ(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#K,colorSpace:this.#k};switch(this.#K){case"solid":return{...J,color:this.#MJ(this.#j),alpha:this.#j.a,hsv:{...this.#j}};case"gradient":return{...J,gradient:E(this.#$),css:this.#r()};case"image":return{...J,image:{...this.#X}};case"video":return{...J,video:{...this.#_}};case"webcam":return{...J,image:{url:this.#N.snapshot,scaleMode:"fill",scale:50}};default:return{...J,...this.#W[this.#K]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":if(this.#y(),this.#C(),this.#J){if(!this.#z){if(this.#w(),this.#p(),this.#L)this.#L.setAttribute("value",this.#j.h);if(this.#D)this.#D.setAttribute("value",this.#j.a*100),this.#D.setAttribute("color",this.#MJ(this.#j))}}break;case"disabled":this.#O();break;case"alpha":case"mode":case"experimental":{if(!this.#J)break;let $=this.#J.open;if(this.#l(),$&&this.isConnected)this.#s();break}case"aria-label":case"aria-labelledby":case"aria-describedby":this.#O();break}}}customElements.define("fig-fill-picker",I);
+    `,this.#Sj(j)}#Sj(j){let J=j.querySelector(".fig-fill-picker-webcam-video"),K=j.querySelector(".fig-fill-picker-webcam-status"),U=j.querySelector(".fig-fill-picker-webcam-capture"),Q=j.querySelector(".fig-fill-picker-webcam-camera"),X=j.querySelector(".fig-fill-picker-camera-select"),Z=async($=null)=>{this.#m();let T=this.#I;try{let O={video:$?{deviceId:{exact:$}}:!0},R=await navigator.mediaDevices.getUserMedia(O);if(T!==this.#I||!this.isConnected||this.#x!=="webcam"){R.getTracks().forEach((z)=>z.stop());return}this.#$.stream=R,J.srcObject=R,J.style.display="block",K.style.display="none";let Y=await navigator.mediaDevices.enumerateDevices();if(T!==this.#I)return;let W=Y.filter((z)=>z.kind==="videoinput");if(W.length>1){Q.style.display="";let z=X.querySelector(":scope > fig-select-options");if(!z)z=document.createElement("fig-select-options"),X.append(z);if(z.replaceChildren(),W.forEach((G,B)=>{let V=document.createElement("fig-select-option");V.value=G.deviceId;let N=G.label||(W.length>1?`Camera ${B+1}`:"Camera");V.textContent=N.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(A,_)=>{return` ${/^\d+$/.test(_)?Number.parseInt(_,10).toString():_.replace(/^0+/,"")||"0"}`}),z.append(V)}),$)X.value=$}else Q.style.display="none",X.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(O){if(T!==this.#I)return;console.error("Webcam error:",O.name,O.message);let R="Camera access denied";if(O.name==="NotAllowedError")R="Camera permission denied";else if(O.name==="NotFoundError")R="No camera found";else if(O.name==="NotReadableError")R="Camera in use by another app";else if(O.name==="OverconstrainedError")R="Camera constraints not supported";else if(!window.isSecureContext)R="Camera requires secure context";K.replaceChildren();let Y=document.createElement("span");Y.textContent=R,K.appendChild(Y),K.style.display="flex",J.style.display="none"}};this.#c=Z,X.addEventListener("change",($)=>{let T=typeof $.detail==="string"?$.detail:$.target?.value;if(T)Z(T)}),U.addEventListener("click",async()=>{if(!this.#$.stream)return;if(!J.videoWidth||!J.videoHeight)return;let $=document.createElement("canvas");$.width=J.videoWidth,$.height=J.videoHeight,$.getContext("2d").drawImage(J,0,0,$.width,$.height);let T=await new Promise((R)=>$.toBlob(R,"image/png"));if(!T)return;if(this.#$.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#$.snapshot);this.#$.snapshot=URL.createObjectURL(T),this.#X.url=this.#$.snapshot;let O=this.#j.querySelector(".fig-fill-picker-image-preview");if(O)this.#M(O);this.#s("image")})}#n(j){let J=j.h/360,K=j.s/100,U=j.v/100,Q,X,Z,$=Math.floor(J*6),T=J*6-$,O=U*(1-K),R=U*(1-T*K),Y=U*(1-(1-T)*K);switch($%6){case 0:Q=U,X=Y,Z=O;break;case 1:Q=R,X=U,Z=O;break;case 2:Q=O,X=U,Z=Y;break;case 3:Q=O,X=R,Z=U;break;case 4:Q=Y,X=O,Z=U;break;case 5:Q=U,X=O,Z=R;break}return{r:Math.round(Q*255),g:Math.round(X*255),b:Math.round(Z*255)}}#y(j){let J=j.r/255,K=j.g/255,U=j.b/255,Q=Math.max(J,K,U),X=Math.min(J,K,U),Z=Q-X,$=0,T=Q===0?0:Z/Q,O=Q;if(Q!==X){switch(Q){case J:$=(K-U)/Z+(K<U?6:0);break;case K:$=(U-J)/Z+2;break;case U:$=(J-K)/Z+4;break}$/=6}return{h:$*360,s:T*100,v:O*100,a:1}}#V(j){if(!j||typeof j.h!=="number"||typeof j.s!=="number"||typeof j.v!=="number")return"#D9D9D9";let J=this.#n(j),K=(U)=>{return(isNaN(U)?217:Math.max(0,Math.min(255,Math.round(U)))).toString(16).padStart(2,"0")};return`#${K(J.r)}${K(J.g)}${K(J.b)}`}#E(j){let J=parseInt(j.slice(1,3),16),K=parseInt(j.slice(3,5),16),U=parseInt(j.slice(5,7),16);return this.#y({r:J,g:K,b:U})}#Ij(j,J=1){let K=parseInt(j.slice(1,3),16),U=parseInt(j.slice(3,5),16),Q=parseInt(j.slice(5,7),16);return`rgba(${K}, ${U}, ${Q}, ${J})`}#wj(j){let J=Math.max(0,Math.min(1,Number(j)||0)),K=Math.round(J*1000)/1000;return String(K)}#xj(j=this.#K){let J=this.#n(j);return`rgba(${J.r}, ${J.g}, ${J.b}, ${this.#wj(j.a)})`}#vj(j){let J=String(j??"").trim();if(!J)return null;let K=J.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(K){let Q=K[1];if(Q.length===3)Q=Q[0]+Q[0]+Q[1]+Q[1]+Q[2]+Q[2];let X=1;if(Q.length===8)X=parseInt(Q.slice(6,8),16)/255,Q=Q.slice(0,6);return{...this.#E(`#${Q}`),a:X}}let U=J.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(U){let Q=Math.max(0,Math.min(255,Math.round(parseFloat(U[1])))),X=Math.max(0,Math.min(255,Math.round(parseFloat(U[2])))),Z=Math.max(0,Math.min(255,Math.round(parseFloat(U[3])))),$=U[4]!==void 0?Math.max(0,Math.min(1,parseFloat(U[4]))):1;if(![Q,X,Z,$].every(Number.isFinite))return null;return{...this.#y({r:Q,g:X,b:Z}),a:$}}return null}#uj(j,J=1){let K=+(parseInt(j.slice(1,3),16)/255).toFixed(4),U=+(parseInt(j.slice(3,5),16)/255).toFixed(4),Q=+(parseInt(j.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${K} ${U} ${Q} / ${J})`}#gj(j){let J=j.r/255,K=j.g/255,U=j.b/255,Q=Math.max(J,K,U),X=Math.min(J,K,U),Z,$,T=(Q+X)/2;if(Q===X)Z=$=0;else{let O=Q-X;switch($=T>0.5?O/(2-Q-X):O/(Q+X),Q){case J:Z=((K-U)/O+(K<U?6:0))/6;break;case K:Z=((U-J)/O+2)/6;break;case U:Z=((J-K)/O+4)/6;break}}return{h:Z*360,s:$*100,l:T*100}}#bj(j){let J=j.h/360,K=j.s/100,U=j.l/100,Q,X,Z;if(K===0)Q=X=Z=U;else{let $=(R,Y,W)=>{if(W<0)W+=1;if(W>1)W-=1;if(W<0.16666666666666666)return R+(Y-R)*6*W;if(W<0.5)return Y;if(W<0.6666666666666666)return R+(Y-R)*(0.6666666666666666-W)*6;return R},T=U<0.5?U*(1+K):U+K-U*K,O=2*U-T;Q=$(O,T,J+0.3333333333333333),X=$(O,T,J),Z=$(O,T,J-0.3333333333333333)}return{r:Math.round(Q*255),g:Math.round(X*255),b:Math.round(Z*255)}}#Zj(j){let J=(Y)=>{return Y=Y/255,Y<=0.04045?Y/12.92:Math.pow((Y+0.055)/1.055,2.4)},K=J(j.r),U=J(j.g),Q=J(j.b),X=0.4122214708*K+0.5363325363*U+0.0514459929*Q,Z=0.2119034982*K+0.6806995451*U+0.1073969566*Q,$=0.0883024619*K+0.2817188376*U+0.6299787005*Q,T=Math.cbrt(X),O=Math.cbrt(Z),R=Math.cbrt($);return{l:0.2104542553*T+0.793617785*O-0.0040720468*R,a:1.9779984951*T-2.428592205*O+0.4505937099*R,b:0.0259040371*T+0.7827717662*O-0.808675766*R}}#hj(j){let J=this.#Zj(j);return{l:J.l,c:Math.sqrt(J.a*J.a+J.b*J.b),h:(Math.atan2(J.b,J.a)*180/Math.PI+360)%360}}#$j(j){let J=j.l+0.3963377774*j.a+0.2158037573*j.b,K=j.l-0.1055613458*j.a-0.0638541728*j.b,U=j.l-0.0894841775*j.a-1.291485548*j.b,Q=J*J*J,X=K*K*K,Z=U*U*U,$=(T)=>{let O=T<=0.0031308?12.92*T:1.055*Math.pow(T,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,O))*255)};return{r:$(4.0767416621*Q-3.3077115913*X+0.2309699292*Z),g:$(-1.2684380046*Q+2.6097574011*X-0.3413193965*Z),b:$(-0.0041960863*Q-0.7034186147*X+1.707614701*Z)}}#mj(j){let J=j.h*Math.PI/180;return this.#$j({l:j.l,a:j.c*Math.cos(J),b:j.c*Math.sin(J)})}#Q(){this.#W(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let j={type:this.#O,colorSpace:this.#A};switch(this.#O){case"solid":return{...j,color:this.#V(this.#K),alpha:this.#K.a,hsv:{...this.#K}};case"gradient":return{...j,gradient:D(this.#J),css:this.#Yj()};case"image":return{...j,image:{...this.#X}};case"video":return{...j,video:{...this.#Z}};case"webcam":return{...j,image:{url:this.#$.snapshot,scaleMode:"fill",scale:50}};default:return{...j,...this.#v[this.#O]}}}set value(j){if(typeof j==="string")this.setAttribute("value",j);else this.setAttribute("value",JSON.stringify(j))}attributeChangedCallback(j,J,K){if(J===K)return;switch(j){case"value":if(this.#t(),this.#W(),this.#j){if(!this.#q){if(this.#f(),this.#C(),this.#_)this.#_.setAttribute("value",this.#K.h);if(this.#z)this.#z.setAttribute("value",this.#K.a*100),this.#z.setAttribute("color",this.#V(this.#K))}}break;case"disabled":this.#b();break;case"alpha":case"mode":case"experimental":{if(!this.#j)break;let U=this.#j.open;if(this.#jj(),U&&this.isConnected)this.#h();break}case"aria-label":case"aria-labelledby":case"aria-describedby":this.#b();break}}}C("fig-fill-picker",F);