@rogieking/figui3 2.22.2 → 2.23.0

package/components.css

@@ -779,6 +779,8 @@ fig-button {
   &[size="large"][icon],
   &[size="large"][icon] > button {
     width: var(--spacer-5);
+    flex-basis: var(--spacer-5);
+    padding: 0;
   }
 
   /* Full width */

package/fig.js

@@ -75,7 +75,6 @@ class FigButton extends HTMLElement {
                 }
                 :host([size="large"]) button {
                     height: var(--spacer-5);
-                    padding: 0 var(--spacer-3);
                 }
                 :host([size="large"][icon]) button {
                     padding: 0;
@@ -1056,7 +1055,6 @@ customElements.define("fig-dialog", FigDialog, { extends: "dialog" });
  * @attr {boolean|string} open - Open when present and not "false".
  */
 class FigPopup extends HTMLDialogElement {
-  #viewportPadding = 8;
   #anchorObserver = null;
   #contentObserver = null;
   #mutationObserver = null;
@@ -1079,7 +1077,9 @@ class FigPopup extends HTMLDialogElement {
   constructor() {
     super();
     this.#boundReposition = this.#queueReposition.bind(this);
-    this.#boundScroll = () => { if (this.open) this.#positionPopup(); };
+    this.#boundScroll = (e) => {
+      if (this.open && !this.contains(e.target)) this.#positionPopup();
+    };
     this.#boundOutsidePointerDown = this.#handleOutsidePointerDown.bind(this);
     this.#boundPointerDown = this.#handlePointerDown.bind(this);
     this.#boundPointerMove = this.#handlePointerMove.bind(this);
@@ -1087,7 +1087,7 @@ class FigPopup extends HTMLDialogElement {
   }
 
   static get observedAttributes() {
-    return ["open", "anchor", "position", "offset", "variant", "theme", "drag", "handle", "autoresize"];
+    return ["open", "anchor", "position", "offset", "variant", "theme", "drag", "handle", "autoresize", "viewport-margin"];
   }
 
   get open() {
@@ -1545,6 +1545,17 @@ class FigPopup extends HTMLDialogElement {
     };
   }
 
+  #parseViewportMargins() {
+    const raw = (this.getAttribute("viewport-margin") || "8").trim();
+    const tokens = raw.split(/\s+/).map(Number).filter(n => !Number.isNaN(n));
+    const d = 8;
+    if (tokens.length === 0) return { top: d, right: d, bottom: d, left: d };
+    if (tokens.length === 1) return { top: tokens[0], right: tokens[0], bottom: tokens[0], left: tokens[0] };
+    if (tokens.length === 2) return { top: tokens[0], right: tokens[1], bottom: tokens[0], left: tokens[1] };
+    if (tokens.length === 3) return { top: tokens[0], right: tokens[1], bottom: tokens[2], left: tokens[1] };
+    return { top: tokens[0], right: tokens[1], bottom: tokens[2], left: tokens[3] };
+  }
+
   #getPlacementCandidates(vertical, horizontal, shorthand) {
     const opp = { top: "bottom", bottom: "top", left: "right", right: "left", center: "center" };
 
@@ -1689,31 +1700,29 @@ class FigPopup extends HTMLDialogElement {
     this.style.setProperty("--beak-offset", `${beakOffset}px`);
   }
 
-  #overflowScore(coords, popupRect) {
+  #overflowScore(coords, popupRect, m) {
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     const right = coords.left + popupRect.width;
     const bottom = coords.top + popupRect.height;
-    const pad = this.#viewportPadding;
 
-    const overflowLeft = Math.max(0, pad - coords.left);
-    const overflowTop = Math.max(0, pad - coords.top);
-    const overflowRight = Math.max(0, right - (vw - pad));
-    const overflowBottom = Math.max(0, bottom - (vh - pad));
+    const overflowLeft = Math.max(0, m.left - coords.left);
+    const overflowTop = Math.max(0, m.top - coords.top);
+    const overflowRight = Math.max(0, right - (vw - m.right));
+    const overflowBottom = Math.max(0, bottom - (vh - m.bottom));
 
     return overflowLeft + overflowTop + overflowRight + overflowBottom;
   }
 
-  #fits(coords, popupRect) {
-    return this.#overflowScore(coords, popupRect) === 0;
+  #fits(coords, popupRect, m) {
+    return this.#overflowScore(coords, popupRect, m) === 0;
   }
 
-  #clamp(coords, popupRect) {
-    const pad = this.#viewportPadding;
-    const minLeft = pad;
-    const minTop = pad;
-    const maxLeft = Math.max(pad, window.innerWidth - popupRect.width - pad);
-    const maxTop = Math.max(pad, window.innerHeight - popupRect.height - pad);
+  #clamp(coords, popupRect, m) {
+    const minLeft = m.left;
+    const minTop = m.top;
+    const maxLeft = Math.max(m.left, window.innerWidth - popupRect.width - m.right);
+    const maxTop = Math.max(m.top, window.innerHeight - popupRect.height - m.bottom);
 
     return {
       left: Math.min(maxLeft, Math.max(minLeft, coords.left)),
@@ -1728,14 +1737,15 @@ class FigPopup extends HTMLDialogElement {
     const offset = this.#parseOffset();
     const { vertical, horizontal, shorthand } = this.#parsePosition();
     const anchor = this.#resolveAnchor();
+    const m = this.#parseViewportMargins();
 
     if (!anchor) {
       this.#updatePopoverBeak(null, popupRect, 0, 0, "top");
       const centered = {
-        left: (window.innerWidth - popupRect.width) / 2,
-        top: (window.innerHeight - popupRect.height) / 2,
+        left: (m.left + (window.innerWidth - m.right - m.left - popupRect.width) / 2),
+        top: (m.top + (window.innerHeight - m.bottom - m.top - popupRect.height) / 2),
       };
-      const clamped = this.#clamp(centered, popupRect);
+      const clamped = this.#clamp(centered, popupRect, m);
       this.style.left = `${clamped.left}px`;
       this.style.top = `${clamped.top}px`;
       return;
@@ -1752,31 +1762,30 @@ class FigPopup extends HTMLDialogElement {
       const placementSide = this.#getPlacementSide(v, h, s);
 
       if (s) {
-        // Shorthand: clamp cross-axis to viewport, check primary axis fit
-        const clamped = this.#clamp(coords, popupRect);
+        const clamped = this.#clamp(coords, popupRect, m);
         const primaryFits = (s === "left" || s === "right")
-          ? (coords.left >= this.#viewportPadding && coords.left + popupRect.width <= window.innerWidth - this.#viewportPadding)
-          : (coords.top >= this.#viewportPadding && coords.top + popupRect.height <= window.innerHeight - this.#viewportPadding);
+          ? (coords.left >= m.left && coords.left + popupRect.width <= window.innerWidth - m.right)
+          : (coords.top >= m.top && coords.top + popupRect.height <= window.innerHeight - m.bottom);
         if (primaryFits) {
           this.style.left = `${clamped.left}px`;
           this.style.top = `${clamped.top}px`;
           this.#updatePopoverBeak(anchorRect, popupRect, clamped.left, clamped.top, placementSide);
           return;
         }
-        const score = this.#overflowScore(coords, popupRect);
+        const score = this.#overflowScore(coords, popupRect, m);
         if (score < bestScore) {
           bestScore = score;
           best = clamped;
           bestSide = placementSide;
         }
       } else {
-        if (this.#fits(coords, popupRect)) {
+        if (this.#fits(coords, popupRect, m)) {
           this.style.left = `${coords.left}px`;
           this.style.top = `${coords.top}px`;
           this.#updatePopoverBeak(anchorRect, popupRect, coords.left, coords.top, placementSide);
           return;
         }
-        const score = this.#overflowScore(coords, popupRect);
+        const score = this.#overflowScore(coords, popupRect, m);
         if (score < bestScore) {
           bestScore = score;
           best = coords;
@@ -1785,7 +1794,7 @@ class FigPopup extends HTMLDialogElement {
       }
     }
 
-    const clamped = this.#clamp(best || { left: 0, top: 0 }, popupRect);
+    const clamped = this.#clamp(best || { left: 0, top: 0 }, popupRect, m);
     this.style.left = `${clamped.left}px`;
     this.style.top = `${clamped.top}px`;
     this.#updatePopoverBeak(anchorRect, popupRect, clamped.left, clamped.top, bestSide);

package/index.html

@@ -468,16 +468,16 @@
                 <label>Large icon</label>
                 <fig-button icon="true"
                             size="large">
-                    <svg width="16"
-                         height="16"
-                         viewBox="0 0 16 16"
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd"
-                              clip-rule="evenodd"
-                              d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
-                              fill="currentColor" />
+                        <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
+                              fill="black"
+                              fill-opacity="0.9" />
                     </svg>
+
                 </fig-button>
             </fig-field>
             <fig-field direction="horizontal">
@@ -485,16 +485,16 @@
                 <fig-button variant="secondary"
                             icon="true"
                             size="large">
-                    <svg width="16"
-                         height="16"
-                         viewBox="0 0 16 16"
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd"
-                              clip-rule="evenodd"
-                              d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
-                              fill="currentColor" />
+                        <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
+                              fill="black"
+                              fill-opacity="0.9" />
                     </svg>
+
                 </fig-button>
             </fig-field>
             <fig-field direction="horizontal">
@@ -502,16 +502,16 @@
                 <fig-button variant="ghost"
                             icon="true"
                             size="large">
-                    <svg width="16"
-                         height="16"
-                         viewBox="0 0 16 16"
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd"
-                              clip-rule="evenodd"
-                              d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
-                              fill="currentColor" />
+                        <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
+                              fill="black"
+                              fill-opacity="0.9" />
                     </svg>
+
                 </fig-button>
             </fig-field>
             <fig-field direction="horizontal">
@@ -520,7 +520,7 @@
                             icon="true"
                             size="large">
                     <span class="fig-mask-icon"
-                          style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                          style="--icon: var(--icon-chevron); --size: 1.5rem"></span>
                 </fig-button>
             </fig-field>
             <fig-field direction="horizontal">
@@ -528,16 +528,16 @@
                 <fig-button variant="link"
                             icon="true"
                             size="large">
-                    <svg width="16"
-                         height="16"
-                         viewBox="0 0 16 16"
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd"
-                              clip-rule="evenodd"
-                              d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
-                              fill="currentColor" />
+                        <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
+                              fill="black"
+                              fill-opacity="0.9" />
                     </svg>
+
                 </fig-button>
             </fig-field>
 
@@ -3272,6 +3272,26 @@
   ...
 &lt;/dialog&gt;</code></pre>
 
+            <h3>Viewport Margin</h3>
+            <p class="description">Use <code>viewport-margin</code> to define safe areas the popup should avoid (e.g. a bottom toolbar). Uses CSS margin shorthand: <code>top right bottom left</code>.</p>
+            <fig-button id="popup-open-viewport-margin"
+                        onclick="document.getElementById('popup-viewport-margin').open = true">Open (64px bottom margin)</fig-button>
+            <dialog id="popup-viewport-margin"
+                    is="fig-popup"
+                    anchor="#popup-open-viewport-margin"
+                    position="bottom center"
+                    offset="8"
+                    viewport-margin="8 8 64 8">
+                <vstack style="min-width: 14rem;">
+                    <strong style="padding: 0 var(--spacer-1);">Viewport Margin</strong>
+                    <p style="padding: 0 var(--spacer-1); margin: 0; font-size: var(--font-size-small); color: var(--figma-color-text-secondary);">This popup won't overlap the bottom 64px of the viewport.</p>
+                    <fig-input-text placeholder="Try scrolling down"></fig-input-text>
+                </vstack>
+            </dialog>
+            <pre><code>&lt;dialog is="fig-popup" viewport-margin="8 8 64 8" position="bottom center" ...&gt;
+  ...
+&lt;/dialog&gt;</code></pre>
+
         </section>
         <hr>
 
@@ -3450,14 +3470,16 @@
             </fig-segmented-control>
 
             <h3>Large Disabled (Text)</h3>
-            <fig-segmented-control size="large" disabled>
+            <fig-segmented-control size="large"
+                                   disabled>
                 <fig-segment>List</fig-segment>
                 <fig-segment selected>Grid</fig-segment>
                 <fig-segment>Board</fig-segment>
             </fig-segmented-control>
 
             <h3>Large Disabled (Icons)</h3>
-            <fig-segmented-control size="large" disabled>
+            <fig-segmented-control size="large"
+                                   disabled>
                 <fig-segment selected>
                     <svg width="24"
                          height="24"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.22.2",
+  "version": "2.23.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",

package/dist/fig.js

@@ -1,74 +0,0 @@
-function U(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}if(window.customElements&&!window.customElements.get("fig-button")){class j extends HTMLElement{type;#j;constructor(){super();this.attachShadow({mode:"open"})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
-            <style>
-                button, button:hover, button:active {
-                    padding: 0 var(--spacer-2);
-                    appearance: none;
-                    display: flex;
-                    border: 0;
-                    flex: 1;
-                    text-align: center;
-                    align-items: stretch;
-                    justify-content: center;
-                    font: inherit;
-                    color: inherit;
-                    outline: 0;
-                    place-items: center; 
-                    background: transparent;
-                    margin: calc(var(--spacer-2)*-1);
-                    height: var(--spacer-4);
-                }
-            </style>
-            <button type="${this.type}">
-                <slot></slot>
-            </button>
-            `,this.#j=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#J.bind(this))})}get type(){return this.type}set type(K){this.setAttribute("type",K)}get selected(){return this.#j}set selected(K){this.setAttribute("selected",K)}#J(){if(this.type==="toggle")this.toggleAttribute("selected",!this.hasAttribute("selected"));if(this.type==="submit")this.closest("form").dispatchEvent(new Event("submit"))}static get observedAttributes(){return["disabled","selected"]}attributeChangedCallback(K,J,Q){if(this.button)switch(this.button[K]=Q,K){case"disabled":this.disabled=this.button.disabled=Q==="true"||Q===void 0&&Q!==null;break;case"type":this.type=Q,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#j=Q==="true";break}}}window.customElements.define("fig-button",j)}if(window.customElements&&!window.customElements.get("fig-dropdown")){class j extends HTMLElement{constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"})}#j(){this.select.addEventListener("input",this.#J.bind(this)),this.select.addEventListener("change",this.#K.bind(this))}connectedCallback(){this.type=this.getAttribute("type")||"select",this.appendChild(this.select),this.shadowRoot.appendChild(this.optionsSlot),this.optionsSlot.addEventListener("slotchange",this.slotChange.bind(this)),this.#j()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.type==="dropdown"){const K=document.createElement("option");K.setAttribute("hidden","true"),K.setAttribute("selected","true"),this.select.appendChild(K)}if(this.optionsSlot.assignedNodes().forEach((K)=>{if(K.nodeName==="OPTION"||K.nodeName==="OPTGROUP")this.select.appendChild(K.cloneNode(!0))}),this.#Q(this.value),this.type==="dropdown")this.select.selectedIndex=-1}#J(K){this.value=K.target.value,this.setAttribute("value",this.value)}#K(){if(this.type==="dropdown")this.select.selectedIndex=-1}focus(){this.select.focus()}blur(){this.select.blur()}get value(){return this.select?.value}set value(K){this.setAttribute("value",K)}static get observedAttributes(){return["value","type"]}#Q(K){if(this.select)this.select.querySelectorAll("option").forEach((J,Q)=>{if(J.value===this.getAttribute("value"))this.select.selectedIndex=Q})}attributeChangedCallback(K,J,Q){if(K==="value")this.#Q(Q);if(K==="type")this.type=Q}}customElements.define("fig-dropdown",j)}class P extends HTMLElement{constructor(){super();this.action=this.getAttribute("action")||"hover",this.delay=parseInt(this.getAttribute("delay"))||500,this.isOpen=!1}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){this.destroy()}setup(){this.style.display="contents"}render(){this.destroy(),this.popup=document.createElement("span"),this.popup.setAttribute("class","fig-tooltip"),this.popup.style.position="fixed",this.popup.style.visibility="hidden",this.popup.style.display="inline-flex",this.popup.style.pointerEvents="none",this.popup.innerText=this.getAttribute("text"),document.body.append(this.popup)}destroy(){if(this.popup)this.popup.remove();document.body.addEventListener("click",this.hidePopupOutsideClick)}setupEventListeners(){if(this.action==="hover")this.addEventListener("pointerenter",this.showDelayedPopup.bind(this)),this.addEventListener("pointerleave",this.hidePopup.bind(this));else if(this.action==="click")this.addEventListener("click",this.showDelayedPopup.bind(this)),document.body.addEventListener("click",this.hidePopupOutsideClick.bind(this))}getOffset(){const j={left:8,top:4,right:8,bottom:4},K=this.getAttribute("offset");if(!K)return j;const[J,Q,X,W]=K.split(",").map(Number);return{left:isNaN(J)?j.left:J,top:isNaN(Q)?j.top:Q,right:isNaN(X)?j.right:X,bottom:isNaN(W)?j.bottom:W}}showDelayedPopup(){this.render(),clearTimeout(this.timeout),this.timeout=setTimeout(this.showPopup.bind(this),this.delay)}showPopup(){const j=this.firstElementChild.getBoundingClientRect(),K=this.popup.getBoundingClientRect(),J=this.getOffset();let Q=j.top-K.height-J.top,X=j.left+(j.width-K.width)/2;if(this.popup.setAttribute("position","top"),Q<0)this.popup.setAttribute("position","bottom"),Q=j.bottom+J.bottom;if(X<J.left)X=J.left;else if(X+K.width>window.innerWidth-J.right)X=window.innerWidth-K.width-J.right;this.popup.style.top=`${Q}px`,this.popup.style.left=`${X}px`,this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.display="block",this.popup.style.pointerEvents="all",this.popup.style.zIndex=parseInt(new Date().getTime()/1000),this.isOpen=!0}hidePopup(){clearTimeout(this.timeout),this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy(),this.isOpen=!1}hidePopupOutsideClick(j){if(this.isOpen&&!this.popup.contains(j.target))this.hidePopup()}}customElements.define("fig-tooltip",P);class y extends P{static observedAttributes=["action","size"];constructor(){super();this.action=this.getAttribute("action")||"click",this.delay=parseInt(this.getAttribute("delay"))||0}render(){this.popup=this.popup||this.querySelector("[popover]"),this.popup.setAttribute("class","fig-popover"),this.popup.style.position="fixed",this.popup.style.display="block",this.popup.style.pointerEvents="none",document.body.append(this.popup)}destroy(){}}customElements.define("fig-popover",y);class L extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}),this.dialog=document.createElement("dialog"),this.contentSlot=document.createElement("slot")}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.appendChild(this.dialog),this.shadowRoot.appendChild(this.contentSlot),this.contentSlot.addEventListener("slotchange",this.slotChange.bind(this)),requestAnimationFrame(()=>{this.#j()})}#j(){this.dialog.querySelectorAll("fig-button[close-dialog]").forEach((j)=>{j.removeEventListener("click",this.close),j.addEventListener("click",this.close.bind(this))})}disconnectedCallback(){this.contentSlot.removeEventListener("slotchange",this.slotChange)}slotChange(){while(this.dialog.firstChild)this.dialog.firstChild.remove();this.contentSlot.assignedNodes().forEach((j)=>{if(j!==this.dialog)this.dialog.appendChild(j.cloneNode(!0))}),this.#j()}static get observedAttributes(){return["open","modal"]}attributeChangedCallback(j,K,J){switch(j){case"open":if(this.open=J==="true"&&J!=="false",this?.show)this[this.open?"show":"close"]();break;case"modal":this.modal=J==="true"&&J!=="false";break}}show(){if(this.modal)this.dialog.showModal();else this.dialog.show()}close(){this.dialog.close()}}customElements.define("fig-dialog",L);class k extends HTMLElement{#j;#J;#K;#Q;#W;#X;constructor(){super()}connectedCallback(){if(this.#j=this.querySelector("[popover]"),this.#J=this,this.#Q=Number(this.getAttribute("delay"))||0,this.#X=this.getAttribute("trigger-action")||"click",this.#K=`tooltip-${U()}`,this.#j){if(this.#j.setAttribute("id",this.#K),this.#j.setAttribute("role","tooltip"),this.#j.setAttribute("popover","manual"),this.#j.style["position-anchor"]=`--${this.#K}`,this.#J.setAttribute("popovertarget",this.#K),this.#J.setAttribute("popovertargetaction","toggle"),this.#J.style["anchor-name"]=`--${this.#K}`,this.#X==="hover")this.#J.addEventListener("mouseover",this.handleOpen.bind(this)),this.#J.addEventListener("mouseout",this.handleClose.bind(this));else this.#J.addEventListener("click",this.handleToggle.bind(this));document.body.append(this.#j)}}handleClose(){clearTimeout(this.#W),this.#j.hidePopover()}handleToggle(){if(this.#j.matches(":popover-open"))this.handleClose();else this.handleOpen()}handleOpen(){clearTimeout(this.#W),this.#W=setTimeout(()=>{this.#j.showPopover()},this.#Q)}}window.customElements.define("fig-popover-2",k);class A extends HTMLElement{constructor(){super()}connectedCallback(){this.setAttribute("label",this.innerText),this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){this.setAttribute("selected","true")}}window.customElements.define("fig-tab",A);class O extends HTMLElement{constructor(){super()}connectedCallback(){this.name=this.getAttribute("name")||"tabs",this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(j){const K=j.target;if(K.nodeName.toLowerCase()==="fig-tab"){const J=this.querySelectorAll("fig-tab");for(let Q of J)if(Q===K)this.selectedTab=Q;else Q.removeAttribute("selected")}}}window.customElements.define("fig-tabs",O);class B extends HTMLElement{#j;#J;constructor(){super()}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){this.setAttribute("selected","true")}get value(){return this.#j}set value(j){this.#j=j,this.setAttribute("value",j)}get selected(){return this.#J}set selected(j){this.#J=j,this.setAttribute("selected",j)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(j,K,J){switch(j){case"value":this.#j=J;break;case"selected":this.#J=J;break}}}window.customElements.define("fig-segment",B);class R extends HTMLElement{constructor(){super()}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.handleClick.bind(this))}handleClick(j){const K=j.target;if(K.nodeName.toLowerCase()==="fig-segment"){const J=this.querySelectorAll("fig-segment");for(let Q of J)if(Q===K)this.selectedSegment=Q;else Q.removeAttribute("selected")}}}window.customElements.define("fig-segmented-control",R);class N extends HTMLElement{#j={range:{min:0,max:100,step:1},hue:{min:0,max:255,step:1},delta:{min:-100,max:100,step:1},stepper:{min:0,max:100,step:25},opacity:{min:0,max:100,step:0.1,color:"#FF0000"}};constructor(){super()}#J(){this.value=Number(this.getAttribute("value")||0),this.default=this.getAttribute("default")||null,this.type=this.getAttribute("type")||"range",this.text=this.getAttribute("text")||!1,this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.getAttribute("disabled")?!0:!1;const j=this.#j[this.type];if(this.min=Number(this.getAttribute("min")||j.min),this.max=Number(this.getAttribute("max")||j.max),this.step=Number(this.getAttribute("step")||j.step),this.color=this.getAttribute("color")||j?.color,this.color)this.style.setProperty("--color",this.color);let K="",J=`<div class="fig-slider-input-container">
-                <input 
-                    type="range"
-                    ${this.disabled?"disabled":""}
-                    min="${this.min}"
-                    max="${this.max}"
-                    step="${this.step}"
-                    class="${this.type}"
-                    value="${this.value}">
-                ${this.initialInnerHTML}
-            </div>`;if(this.text)K=`${J}
-                    <fig-input-text
-                        placeholder="##"
-                        type="number"
-                        min="${this.min}"
-                        max="${this.max}"
-                        transform="${this.transform}"
-                        step="${this.step}"
-                        value="${this.value}">
-                        ${this.units?`<span slot="append">${this.units}</span>`:""}
-                    </fig-input-text>`;else K=J;this.innerHTML=K,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.input.removeEventListener("input",this.handleInput),this.input.addEventListener("input",this.handleInput.bind(this)),this.default)this.style.setProperty("--default",this.#K(this.default));if(this.datalist=this.querySelector("datalist"),this.figInputText=this.querySelector("fig-input-text"),this.datalist)this.datalist.setAttribute("id",this.datalist.getAttribute("id")||U()),this.input.setAttribute("list",this.datalist.getAttribute("id"));if(this.figInputText)this.figInputText.removeEventListener("input",this.handleTextInput),this.figInputText.addEventListener("input",this.handleTextInput.bind(this));this.handleInput()})}connectedCallback(){this.initialInnerHTML=this.innerHTML,this.#J()}static get observedAttributes(){return["value","step","min","max","type","disabled","color","units","transform"]}focus(){this.input.focus()}attributeChangedCallback(j,K,J){if(this.input)switch(j){case"color":this.color=J,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=J==="true"||J===void 0&&J!==null,this.figInputText)this.figInputText.disabled=this.disabled,this.figInputText.setAttribute("disabled",this.disabled);break;case"value":if(this.value=J,this.figInputText)this.figInputText.setAttribute("value",J);break;case"transform":if(this.transform=Number(J)||1,this.figInputText)this.figInputText.setAttribute("transform",this.transform);break;case"min":case"max":case"step":case"type":case"text":case"units":this[j]=J,this.#J();break;default:this[j]=this.input[j]=J,this.handleInput();break}}handleTextInput(){if(this.figInputText)this.value=this.input.value=this.figInputText.value,this.#Q()}#K(j){let K=Number(this.input.min),J=Number(this.input.max);return(j-K)/(J-K)}#Q(){let j=this.#K(this.value),K=this.#K(this.default);this.style.setProperty("--slider-complete",j),this.style.setProperty("--default",K),this.style.setProperty("--unchanged",j===K?1:0)}handleInput(){let j=this.input.value;if(this.value=j,this.#Q(),this.figInputText)this.figInputText.setAttribute("value",j)}}window.customElements.define("fig-slider",N);class q extends HTMLElement{constructor(){super()}connectedCallback(){if(this.multiline=this.hasAttribute("multiline")||!1,this.value=this.getAttribute("value")||"",this.type=this.getAttribute("type")||"text",this.type==="number"){if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.transform=Number(this.getAttribute("transform")||1),this.getAttribute("value"))this.value=Number(this.value)}this.placeholder=this.getAttribute("placeholder")||"";let j=`<input 
-      type="${this.type}" 
-      placeholder="${this.placeholder}"
-      value="${this.type==="number"?this.#j(this.value):this.value}" />`;if(this.multiline)j=`<textarea  
-      placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{const K=this.querySelector("[slot=append]"),J=this.querySelector("[slot=prepend]");if(this.innerHTML=j,J)J.addEventListener("click",this.focus.bind(this)),this.prepend(J);if(K)K.addEventListener("click",this.focus.bind(this)),this.append(K);if(this.input=this.querySelector("input,textarea"),this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#j(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#j(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#j(this.step))}this.input.addEventListener("input",this.#J.bind(this))})}focus(){this.input.focus()}#j(j){return j*(this.transform||1)}#J(j){let K=j.target.value;if(this.type==="number")this.value=K/(this.transform||1);else this.value=K}static get observedAttributes(){return["value","placeholder","label","disabled","type","step","min","max","transform"]}attributeChangedCallback(j,K,J){if(this.input)switch(j){case"disabled":this.disabled=this.input.disabled=J;break;case"transform":if(this.type==="number")this.transform=Number(J)||1,this.min=this.#j(this.min),this.max=this.#j(this.max),this.step=this.#j(this.step),this.value=this.#j(this.value);break;default:let Q=J;if(this.type==="number")Q=this.#j(Q);if(this[j]=this.input[j]=Q,this.input)this.input.setAttribute(j,Q);break}}}window.customElements.define("fig-input-text",q);class T extends HTMLElement{constructor(){super()}connectedCallback(){this.src=this.getAttribute("src"),this.name=this.getAttribute("name"),this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials),this.setSrc(this.src),requestAnimationFrame(()=>{this.img=this.querySelector("img")})}setSrc(j){if(this.src=j,j)this.innerHTML=`<img src="${this.src}" ${this.name?`alt="${this.name}"`:""} />`}getInitials(j){return j?j.split(" ").map((K)=>K[0]).join(""):""}static get observedAttributes(){return["src","href","name"]}attributeChangedCallback(j,K,J){if(this[j]=J,j==="name")this.img?.setAttribute("alt",J),this.name=J,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials);else if(j==="src")this.src=J,this.setSrc(this.src)}}window.customElements.define("fig-avatar",T);class S extends HTMLElement{constructor(){super()}connectedCallback(){requestAnimationFrame(()=>{if(this.label=this.querySelector("label"),this.input=Array.from(this.childNodes).find((j)=>j.nodeName.toLowerCase().startsWith("fig-")),this.input&&this.label){this.label.addEventListener("click",this.focus.bind(this));let j=this.input.getAttribute("id")||U();this.input.setAttribute("id",j),this.label.setAttribute("for",j)}})}focus(){this.input.focus()}}window.customElements.define("fig-field",S);class C extends HTMLElement{#j;#J;textInput;#K;constructor(){super()}connectedCallback(){this.#j=this.convertToRGBA(this.getAttribute("value"));const j=(this.#j.a*100).toFixed(0);this.value=this.rgbAlphaToHex({r:this.#j.r,g:this.#j.g,b:this.#j.b},j);let K="";if(this.getAttribute("text")){let J=`<fig-input-text placeholder="Text" value="${this.getAttribute("value")}"></fig-input-text>`;if(this.getAttribute("alpha")==="true")J+=`<fig-tooltip text="Opacity">
-                    <fig-input-text 
-                        placeholder="##" 
-                        type="number"
-                        min="0"
-                        max="100"
-                        value="${j}">
-                        <span slot="append">%</slot>
-                    </fig-input-text>
-                </fig-tooltip>`;K=`<div class="input-combo">
-                <fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>
-                ${J}
-            </div>`}else K=`<fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>`;this.innerHTML=K,this.style.setProperty("--alpha",this.#j.a),requestAnimationFrame(()=>{if(this.#J=this.querySelector("input[type=color]"),this.textInput=this.querySelector("input[type=text]"),this.#K=this.querySelector("input[type=number]"),this.#J.disabled=this.hasAttribute("disabled"),this.#J.addEventListener("input",this.handleInput.bind(this)),this.textInput)this.textInput.value=this.#J.value=this.rgbAlphaToHex(this.#j,1);if(this.#K)this.#K.addEventListener("input",this.handleAlphaInput.bind(this))})}handleAlphaInput(j){j.stopPropagation(),this.#j=this.convertToRGBA(this.#J.value),this.#j.a=Number(this.#K.value)/100,this.value=this.rgbAlphaToHex({r:this.#j.r,g:this.#j.g,b:this.#j.b},this.#j.a),this.style.setProperty("--alpha",this.#j.a);const K=new CustomEvent("input",{bubbles:!0,cancelable:!0});this.dispatchEvent(K)}focus(){this.#J.focus()}handleInput(j){j.stopPropagation();let K=this.#j.a;if(this.#j=this.convertToRGBA(this.#J.value),this.#j.a=K,this.textInput)this.textInput.value=this.#J.value;if(this.style.setProperty("--alpha",this.#j.a),this.value=this.rgbAlphaToHex({r:this.#j.r,g:this.#j.g,b:this.#j.b},K),this.alpha=K,this.#K)this.#K.value=this.#j.a.toFixed(0);const J=new CustomEvent("input",{bubbles:!0,cancelable:!0});this.dispatchEvent(J)}static get observedAttributes(){return["value","style"]}attributeChangedCallback(j,K,J){}rgbAlphaToHex({r:j,g:K,b:J},Q=1){j=Math.max(0,Math.min(255,Math.round(j))),K=Math.max(0,Math.min(255,Math.round(K))),J=Math.max(0,Math.min(255,Math.round(J))),Q=Math.max(0,Math.min(1,Q));const X=j.toString(16).padStart(2,"0"),W=K.toString(16).padStart(2,"0"),_=J.toString(16).padStart(2,"0");if(Q===1)return`#${X}${W}${_}`;const Z=Math.round(Q*255).toString(16).padStart(2,"0");return`#${X}${W}${_}${Z}`}convertToRGBA(j){let K,J,Q,X=1;if(j.startsWith("#")){let W=j.slice(1);if(W.length===8)X=parseInt(W.slice(6),16)/255,W=W.slice(0,6);K=parseInt(W.slice(0,2),16),J=parseInt(W.slice(2,4),16),Q=parseInt(W.slice(4,6),16)}else if(j.startsWith("rgba")||j.startsWith("rgb")){let W=j.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(W)K=parseInt(W[1]),J=parseInt(W[2]),Q=parseInt(W[3]),X=W[4]?parseFloat(W[4]):1}else if(j.startsWith("hsla")||j.startsWith("hsl")){let W=j.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)/);if(W){let _=parseInt(W[1])/360,$=parseInt(W[2])/100,Z=parseInt(W[3])/100;if(X=W[4]?parseFloat(W[4]):1,$===0)K=J=Q=Z;else{let H=(z,D,Y)=>{if(Y<0)Y+=1;if(Y>1)Y-=1;if(Y<0.16666666666666666)return z+(D-z)*6*Y;if(Y<0.5)return D;if(Y<0.6666666666666666)return z+(D-z)*(0.6666666666666666-Y)*6;return z},E=Z<0.5?Z*(1+$):Z+$-Z*$,M=2*Z-E;K=H(M,E,_+0.3333333333333333),J=H(M,E,_),Q=H(M,E,_-0.3333333333333333)}K=Math.round(K*255),J=Math.round(J*255),Q=Math.round(Q*255)}}else return null;return{r:K,g:J,b:Q,a:X}}}window.customElements.define("fig-input-color",C);class G extends HTMLElement{constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.value=this.getAttribute("value")||"",this.input.setAttribute("id",U()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.labelElement=document.createElement("label"),this.labelElement.setAttribute("for",this.input.id)}connectedCallback(){if(this.checked=this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.addEventListener("change",this.handleInput.bind(this)),this.hasAttribute("disabled"))this.input.disabled=!0;if(this.hasAttribute("indeterminate"))this.input.indeterminate=!0,this.input.setAttribute("indeterminate","true");this.append(this.input),this.append(this.labelElement),this.render()}static get observedAttributes(){return["disabled","label","checked","name","value"]}render(){}focus(){this.input.focus()}disconnectedCallback(){this.input.remove()}attributeChangedCallback(j,K,J){switch(j){case"label":this.labelElement.innerText=J;break;case"checked":this.checked=this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false";break;default:this.input[j]=J,this.input.setAttribute(j,J);break}}handleInput(j){this.input.indeterminate=!1,this.input.removeAttribute("indeterminate"),this.value=this.input.value}}window.customElements.define("fig-checkbox",G);class x extends G{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}window.customElements.define("fig-radio",x);class I extends G{render(){this.input.setAttribute("class","switch")}}window.customElements.define("fig-switch",I);class v extends HTMLElement{constructor(){super()}}window.customElements.define("fig-bell",v);class F extends HTMLElement{constructor(){super()}}window.customElements.define("fig-badge",F);class f extends HTMLElement{constructor(){super()}}window.customElements.define("fig-accordion",f);class b extends HTMLElement{constructor(){super()}getOptionsFromAttribute(){return(this.getAttribute("options")||"").split(",")}connectedCallback(){this.options=this.getOptionsFromAttribute(),this.placeholder=this.getAttribute("placeholder")||"",this.value=this.getAttribute("value")||"",this.innerHTML=`<div class="input-combo">
-                        <fig-input-text placeholder="${this.placeholder}">
-                        </fig-input-text> 
-                        <fig-button type="select" variant="input" icon>
-                            <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.9" stroke-linecap='round'/>
-</svg>
-                            <fig-dropdown type="dropdown">
-                              ${this.options.map((j)=>`<option>${j}</option>`).join("")}
-                            </fig-dropdown>
-                        </fig-button>
-                    </div>`,requestAnimationFrame(()=>{this.input=this.querySelector("fig-input-text"),this.select=this.querySelector("fig-dropdown"),this.select.addEventListener("input",this.handleSelectInput.bind(this))})}handleSelectInput(j){this.value=j.target.parentNode.value,this.setAttribute("value",this.value)}handleInput(j){this.value=this.input.value}static get observedAttributes(){return["options","placeholder","value"]}attributeChangedCallback(j,K,J){if(j==="options"){if(this.options=J.split(","),this.dropdown)this.dropdown.innerHTML=this.options.map((Q)=>`<option>${Q}</option>`).join("")}if(j==="placeholder")this.placeholder=J;if(j==="value")this.value=J,this.input.setAttribute("value",J)}}window.customElements.define("fig-combo-input",b);class h extends HTMLElement{constructor(){super()}connectedCallback(){this.type=this.getAttribute("type")||"color",this.src=this.getAttribute("src")||"",this.value=this.getAttribute("value")||"",this.size=this.getAttribute("size")||"small",this.disabled=this.getAttribute("disabled")==="true"?!0:!1,this.innerHTML=`<input type="color" value="${this.value}" />`,this.#j(this.src),requestAnimationFrame(()=>{this.input=this.querySelector("input")})}#j(j){if(j)this.src=j,this.style.setProperty("--src",`url(${j})`);else this.style.removeProperty("--src")}static get observedAttributes(){return["src","value","disabled"]}attributeChangedCallback(j,K,J){switch(j){case"src":this.#j(J);break;case"disabled":this.disabled=J.toLowerCase()==="true";break;default:if(this.input)this.input[j]=J;this.#j(this.src);break}}}window.customElements.define("fig-chit",h);class d extends HTMLElement{constructor(){super()}#j(){return`<fig-chit type="image" size="large" ${this.src?`src="${this.src}"`:""} disabled="true"></fig-chit>${this.upload?`<fig-button variant="primary" type="upload">
-          ${this.label} 
-          <input type="file" accept="image/*" />
-        </fig-button>`:""}`}connectedCallback(){this.src=this.getAttribute("src")||"",this.upload=this.getAttribute("upload")==="true",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#j(),this.#J()}#J(){requestAnimationFrame(()=>{if(this.chit=this.querySelector("fig-chit"),this.upload)this.uploadButton=this.querySelector("fig-button"),this.fileInput=this.uploadButton?.querySelector("input"),this.fileInput.addEventListener("change",this.handleFileInput.bind(this))})}handleFileInput(j){this.src=URL.createObjectURL(j.target.files[0]),this.setAttribute("src",this.src),this.chit.setAttribute("src",this.src)}static get observedAttributes(){return["src","upload"]}attributeChangedCallback(j,K,J){if(j==="src"){if(this.src=J,this.chit)this.chit.setAttribute("src",this.src)}if(j==="upload")this.upload=J.toLowerCase()==="true",this.innerHTML=this.#j(),this.#J();if(j==="size")this.size=J}}window.customElements.define("fig-image",d);