@rogieking/figui3 2.10.0 → 2.10.2

package/components.css

@@ -193,9 +193,10 @@
 :root {
   /* Typography & Sizing */
   --font-size: 16px;
-  --font-family: "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next,
-    avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
-    arial, sans-serif;
+  --font-family:
+    "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir,
+    segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
+    sans-serif;
   --body-medium-fontSize: 0.6875rem;
   --body-large-fontSize: 0.8125rem;
   --body-letter-spacing: 0.055px;
@@ -304,15 +305,19 @@
   --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
 
   /* Elevations - light theme defaults */
-  --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
-    0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
-  --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-  --figma-elevation-200: 0px 1px 3px 0px rgba(0, 0, 0, 0.102),
-    0px 3px 8px 0px rgba(0, 0, 0, 0.102), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
-  --figma-elevation-400-menu-panel: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
+  --elevation-500-modal-window:
+    0px 0px 0.5px rgba(0, 0, 0, 0.08), 0px 10px 24px rgba(0, 0, 0, 0.18),
+    0px 2px 5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-100:
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+  --figma-elevation-200:
+    0px 1px 3px 0px rgba(0, 0, 0, 0.102), 0px 3px 8px 0px rgba(0, 0, 0, 0.102),
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
+  --figma-elevation-400-menu-panel:
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
     0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
-  --figma-elevation-500-modal-window: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
+  --figma-elevation-500-modal-window:
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
     0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
   --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
 }
@@ -321,44 +326,48 @@
 /* These cannot use light-dark() as they are complex values */
 @media (prefers-color-scheme: dark) {
   :root {
-    --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
+    --handle-shadow:
+      0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
       0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-    --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
+    --figma-elevation-100:
+      0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
       0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
       0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-    --figma-elevation-200: 0px 3px 8px rgba(0, 0, 0, 0.35),
-      0px 1px 3px rgba(0, 0, 0, 0.5),
+    --figma-elevation-200:
+      0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
       inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
       inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-    --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
-        rgba(255, 255, 255, 0.08) inset,
+    --figma-elevation-400-menu-panel:
+      0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
       0px 10px 16px 0px rgba(0, 0, 0, 0.35),
       inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
       0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-    --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
-      0px 3px 5px rgba(0, 0, 0, 0.35),
+    --figma-elevation-500-modal-window:
+      0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
       inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
   }
 }
 
 /* Class-based dark theme override (for manual theme switching) */
 :root.figma-dark {
-  --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
+  --handle-shadow:
+    0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-  --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
+  --figma-elevation-100:
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
     0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
     0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-  --figma-elevation-200: 0px 3px 8px rgba(0, 0, 0, 0.35),
-    0px 1px 3px rgba(0, 0, 0, 0.5),
+  --figma-elevation-200:
+    0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
     inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
     inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-  --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.08)
-      inset,
+  --figma-elevation-400-menu-panel:
+    0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
     0px 10px 16px 0px rgba(0, 0, 0, 0.35),
     inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
     0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-  --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
-    0px 3px 5px rgba(0, 0, 0, 0.35),
+  --figma-elevation-500-modal-window:
+    0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
     inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
 }
 
@@ -469,6 +478,17 @@ input[type="text"][list] {
 
 @supports (appearance: base-select) {
   fig-dropdown[variant="neue"] {
+    &[type="dropdown"] {
+      select:before {
+        content: attr(aria-label);
+      }
+      option::checkmark {
+        display: none;
+      }
+      option {
+        padding-left: var(--spacer-3);
+      }
+    }
     select {
       appearance: base-select;
       --option-height: 1.5rem;
@@ -502,7 +522,7 @@ input[type="text"][list] {
         &:not(:disabled) {
           &:hover,
           &:active,
-          &:focus {
+          &:focus-visible {
             background-color: transparent;
             outline: 0;
             &:before {
@@ -518,8 +538,11 @@ input[type="text"][list] {
         position: relative;
         padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
         font-weight: var(--body-medium-fontWeight);
-        &::-internal-optgroup-label {
-          display: none;
+        &[label] {
+          padding-top: var(--spacer-2);
+          option:first-child {
+            margin-top: var(--spacer-2);
+          }
         }
         legend {
           padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
@@ -530,7 +553,7 @@ input[type="text"][list] {
         }
         &:not(:first-child) {
           margin-top: var(--spacer-2);
-          padding-top: var(--spacer-2);
+          padding-top: var(--spacer-3);
 
           &:before {
             content: "";
@@ -547,7 +570,7 @@ input[type="text"][list] {
       }
       option[hidden="true"]:first-child + optgroup {
         margin-top: 0;
-        padding-top: 0;
+        padding-top: var(--spacer-2);
         &:before {
           display: none;
         }
@@ -558,10 +581,8 @@ input[type="text"][list] {
     }
 
     ::picker(select) {
-      position-area: auto;
-      align-self: auto;
-      max-block-size: 100vh;
       appearance: base-select;
+
       scrollbar-width: thin;
       outline: 0;
       scrollbar-color: var(--figma-color-text-menu-tertiary)
@@ -572,61 +593,6 @@ input[type="text"][list] {
       padding: var(--spacer-2) 0;
       box-shadow: var(--figma-elevation-400-menu-panel);
     }
-    select {
-      &:has(:nth-child(1):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -1 - var(--spacer-2));
-        }
-      }
-
-      &:has(:nth-child(2):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -2 - var(--spacer-2));
-        }
-      }
-
-      &:has(:nth-child(3):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -3 - var(--spacer-2));
-        }
-      }
-
-      &:has(:nth-child(4):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -4 - var(--spacer-2));
-        }
-      }
-      &:has(:nth-child(5):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -5 - var(--spacer-2));
-        }
-      }
-      &:has(:nth-child(6):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -6 - var(--spacer-2));
-        }
-      }
-      &:has(:nth-child(7):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -7 - var(--spacer-2));
-        }
-      }
-      &:has(:nth-child(8):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -8 - var(--spacer-2));
-        }
-      }
-      &:has(:nth-child(9):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -9 - var(--spacer-2));
-        }
-      }
-      &:has(:nth-child(10):checked) {
-        &::picker(select) {
-          top: calc(var(--option-height) * -10 - var(--spacer-2));
-        }
-      }
-    }
   }
 }
 
@@ -1056,7 +1022,6 @@ input[type="color"] {
     grid-area: 1/1;
     color-scheme: inherit;
     outline: 0;
-    
   }
 
   &::-webkit-color-swatch {
@@ -1099,7 +1064,7 @@ fig-chit {
   --chit-background: #d9d9d9;
   --chit-bg-size: cover;
   --chit-bg-position: center;
-  --alpha:1;
+  --alpha: 1;
 
   display: inline-grid;
   width: var(--size);
@@ -1146,7 +1111,8 @@ fig-chit {
     }
 
     &[selected]:not([selected="false"])::before {
-      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected),
+      box-shadow:
+        inset 0 0 0 1px var(--figma-color-border-selected),
         inset 0 0 0 3px var(--figma-color-bg);
     }
 
@@ -1156,7 +1122,6 @@ fig-chit {
       width: var(--size);
       height: var(--size);
       border-radius: var(--radius-medium);
-      
     }
   }
 
@@ -1180,7 +1145,6 @@ fig-chit {
       background-repeat: repeat;
       border-radius: 0.125rem;
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-      
     }
     &[data-type="image"]::after {
       mask-image: linear-gradient(
@@ -1286,7 +1250,7 @@ fig-image {
   align-items: center;
   gap: 1px;
 
-  & > label{
+  & > label {
     align-self: stretch;
     color: inherit;
   }
@@ -1504,8 +1468,10 @@ input[type="radio"] {
     border-radius: 100%;
     background-color: var(--figma-color-icon-onbrand);
     transform: scale(0);
-    box-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
-      0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
+    box-shadow:
+      0px 0 0 0.75px rgba(0, 0, 0, 0.1),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+      0px 3px 8px 0px rgba(0, 0, 0, 0.1),
       0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
   }
 }
@@ -1602,12 +1568,12 @@ fig-slider {
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-size: calc(var(--slider-height) / 4);
-  --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
-      var(--handle-color),
+  --slider-handle-shadow:
+    inset 0 0 0 calc(4px + 0.5rem * var(--unchanged)) var(--handle-color),
     0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
-  --slider-handle-shadow-focus: inset 0 0 0 4px var(--handle-color),
-    inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--handle-shadow),
-    0 0 0 1px var(--figma-color-border-selected);
+  --slider-handle-shadow-focus:
+    inset 0 0 0 4px var(--handle-color), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
+    var(--handle-shadow), 0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: all 0.1s ease-in-out;
   --handle-transition: var(--slider-transition);
 
@@ -1671,11 +1637,10 @@ fig-slider {
         );
         --width: calc(var(--slider-percent) - var(--start-percent));
         --abs-width: max(
-          var(--width) + var(--slider-height) / 2 + (1 - var(--slider-complete)) *
-            var(--slider-height),
-          -1 * var(--width) + var(--slider-height) / 2 + (
-              var(--slider-complete)
-            ) * var(--slider-height)
+          var(--width) + var(--slider-height) / 2 +
+            (1 - var(--slider-complete)) * var(--slider-height),
+          -1 * var(--width) + var(--slider-height) / 2 +
+            (var(--slider-complete)) * var(--slider-height)
         );
         width: var(--abs-width);
         --delta: calc(var(--slider-complete) - var(--default));
@@ -1765,7 +1730,8 @@ fig-slider {
     }
 
     &.opacity::-webkit-slider-runnable-track {
-      background: linear-gradient(to right, transparent, var(--color)),
+      background:
+        linear-gradient(to right, transparent, var(--color)),
         var(--checkerboard);
     }
   }
@@ -1839,7 +1805,8 @@ fig-slider {
     }
 
     &.opacity::-moz-range-track {
-      background: linear-gradient(to right, transparent, var(--color)),
+      background:
+        linear-gradient(to right, transparent, var(--color)),
         var(--checkerboard);
     }
   }
@@ -1888,8 +1855,8 @@ fig-slider {
     --slider-tick-size: calc(var(--slider-height) / 2);
     --handle-transition: none;
     --slider-transition: none;
-    --slider-handle-shadow: inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
-        var(--handle-color),
+    --slider-handle-shadow:
+      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-200);
 
@@ -1917,8 +1884,8 @@ fig-slider {
     --slider-tick-size: calc(var(--slider-height) / 2);
     --handle-transition: none;
     --slider-transition: none;
-    --slider-handle-shadow: inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
-        var(--handle-color),
+    --slider-handle-shadow:
+      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-200);
 
@@ -2022,8 +1989,10 @@ dialog,
     text-overflow: ellipsis;
 
     border-radius: var(--radius-medium, 0.3125rem);
-    box-shadow: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
-      0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
+      0px 5px 12px 0px rgba(0, 0, 0, 0.13),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
 
     @supports (-webkit-line-clamp: 2) {
       white-space: initial;
@@ -2215,6 +2184,7 @@ fig-content,
 fig-slider,
 fig-switch,
 fig-input-color,
+fig-input-fill,
 fig-checkbox,
 fig-radio,
 fig-tab,
@@ -2382,9 +2352,8 @@ fig-input-number {
   }
 }
 
-fig-input-color, 
+fig-input-color,
 fig-input-fill {
-
   & > .input-combo > fig-chit:not(:only-child),
   & > .input-combo > fig-chit:not(:only-child) > input,
   & > .input-combo > fig-fill-picker:not(:only-child),
@@ -2394,7 +2363,7 @@ fig-input-fill {
     border-bottom-right-radius: 0 !important;
   }
 
-  & > .input-combo{
+  & > .input-combo {
     flex: 1;
     min-width: 0;
   }
@@ -2407,7 +2376,6 @@ fig-input-fill {
   &[disabled]:not([disabled="false"]) {
     .input-combo {
       gap: 0;
-
     }
   }
 }
@@ -2600,7 +2568,8 @@ fig-input-joystick {
     }
   }
   .fig-input-joystick-plane.dragging .fig-input-joystick-guides {
-    background: linear-gradient(
+    background:
+      linear-gradient(
         45deg,
         transparent calc(50% - 0.5px),
         var(--figma-color-border) calc(50% - 0.5px),
@@ -2912,13 +2881,17 @@ fig-fill-picker {
   height: 1rem;
   border-radius: 50%;
   background: var(--picker-color);
-  box-shadow: inset 0 0 0 0.125rem var(--handle-color),
-    0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
+  box-shadow:
+    inset 0 0 0 0.125rem var(--handle-color),
+    0px 0 0 0.5px rgba(0, 0, 0, 0.1),
+    var(--figma-elevation-200);
   transform: translate(-50%, -50%);
   z-index: 1;
   &:hover {
-    box-shadow: inset 0 0 0 0.25rem var(--handle-color),
-      0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
+    box-shadow:
+      inset 0 0 0 0.25rem var(--handle-color),
+      0px 0 0 0.5px rgba(0, 0, 0, 0.1),
+      var(--figma-elevation-200);
     transform: translate(-50%, -50%);
   }
 }
@@ -3074,16 +3047,21 @@ fig-fill-picker {
 .fig-fill-picker-checkerboard {
   position: absolute;
   inset: 0;
-  background-image: linear-gradient(
-      45deg,
+  background-image:
+    linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%),
+    linear-gradient(
+      -45deg,
       var(--figma-color-bg-tertiary) 25%,
       transparent 25%
     ),
-    linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%),
     linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);
   background-size: 16px 16px;
-  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0px;
 }
 
 .fig-fill-picker-image-preview {

package/dist/fig.js

@@ -0,0 +1,74 @@
+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);