@rogieking/figui3 3.23.0 → 4.1.0

package/README.md

@@ -1001,10 +1001,9 @@ An image display component with optional upload, aspect ratio, and object-fit co
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `src` | string | — | Image URL |
-| `upload` | boolean | `false` | Show upload button |
-| `download` | boolean | `false` | Show download button |
-| `label` | string | — | Upload button label |
-| `aspect-ratio` | string | — | CSS aspect-ratio (e.g. `"16 / 9"`) |
+| `upload` | boolean | `false` | Show upload overlay (`fig-input-file`) |
+| `label` | string | `"Upload"` | Upload button label |
+| `aspect-ratio` | string | — | CSS aspect-ratio, or `"auto"` for lazy dimension detection |
 | `fit` | string | — | CSS object-fit (`"cover"`, `"contain"`, etc.) |
 | `checkerboard` | boolean | `false` | Show checkerboard behind transparent images |
 

package/components.css

@@ -1364,10 +1364,9 @@ fig-input-file {
     flex-shrink: 0;
   }
 
-  &[dragover] {
-    outline: 2px dashed var(--figma-color-border-brand);
-    outline-offset: -2px;
-    border-radius: var(--radius-small);
+  &[dragover] fig-button {
+    outline: 1px dashed var(--figma-color-border-brand);
+    outline-offset: -1px;
   }
 }
 
@@ -1395,8 +1394,12 @@ fig-image {
       opacity: 1;
     }
   }
-  &:not([src]):not([src=""]) fig-button,
-  &:hover fig-button {
+  > fig-input-file[data-generated] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  &:not([src]):not([src=""]) > fig-input-file[data-generated],
+  &:hover > fig-input-file[data-generated] {
     opacity: 1;
     pointer-events: all;
   }
@@ -1420,25 +1423,6 @@ fig-image {
       aspect-ratio: var(--aspect-ratio) !important;
     }
   }
-  > div {
-    display: flex;
-    gap: var(--spacer-2);
-    opacity: 0;
-    pointer-events: none;
-  }
-  &:not([src]):not([src=""]) > div,
-  &:hover > div {
-    opacity: 1;
-    pointer-events: all;
-  }
-  fig-button[type="download"] {
-    display: none;
-  }
-  &[src]:not([src=""]) {
-    fig-button[type="download"] {
-      display: inline-flex;
-    }
-  }
 }
 
 /* Easing Curve */
@@ -1905,6 +1889,12 @@ fig-origin-grid {
 }
 
 /* Combo input */
+fig-combo-input {
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+}
+
 .input-combo {
   display: inline-flex;
   flex-wrap: nowrap;
@@ -3565,171 +3555,6 @@ fig-field,
   }
 }
 
-fig-field-slider {
-  display: block;
-  position: relative;
-  width: 100%;
-  --field-text-shadow: 0 1px 1.5px
-    light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
-
-  label {
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  &[disabled]:not([disabled="false"]) {
-    pointer-events: none;
-
-    label,
-    input {
-      color: var(--figma-color-text-disabled);
-    }
-    fig-slider {
-      filter: grayscale(100%) opacity(0.5);
-    }
-  }
-  &[type="hue"] {
-    label,
-    input {
-      text-shadow: var(--field-text-shadow);
-      color: white;
-    }
-  }
-
-  fig-field {
-    position: relative;
-    padding-left: var(--spacer-2-5);
-
-    &[direction="horizontal"] > label {
-      min-width: 0;
-      max-width: none;
-      width: 100%;
-      flex: 1 1 auto;
-    }
-
-    fig-slider {
-      position: absolute;
-      inset: 0;
-      --slider-height: 2rem;
-      --slider-field-height: 2rem;
-      --slider-thumb-width: var(--spacer-1);
-      --slider-thumb-color: light-dark(
-        var(--figma-color-text-secondary),
-        var(--figma-color-text)
-      );
-      --slider-thumb-height: calc(
-        var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) *
-          min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
-      );
-      --slider-border-radius: var(--radius-medium);
-      --slider-tick-width: 0.125rem;
-      --slider-tick-height: var(--spacer-2);
-      --slider-tick-radius: var(--radius-medium);
-      --slider-stepper-padding: 0;
-      --slider-handle-shadow: inset 0 0 0 var(--slider-thumb-height)
-        var(--slider-thumb-color) !important;
-      --slider-thumb-opacity: calc(
-        min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
-      );
-      --slider-tick-opacity: 1;
-
-      &:has(input[type="range"]:focus-within) {
-        --slider-thumb-outline: 1.5px solid var(--figma-color-border-selected) !important;
-        --slider-thumb-outline-offset: 2px !important;
-      }
-
-      .fig-slider-input-container {
-        box-shadow: none !important;
-        &:hover,
-        &:focus-within {
-          &::after {
-            content: "";
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            border-radius: var(--slider-border-radius);
-            box-shadow: inset 0 0 0 1px var(--figma-color-border) !important;
-          }
-        }
-        &::before {
-          background: var(--figma-color-bg-tertiary) !important;
-          min-width: 0 !important;
-          box-shadow: none !important;
-        }
-        input[type="range"] {
-          border-radius: 0 !important;
-        }
-      }
-
-      &:not([type="delta"]) .fig-slider-input-container::before {
-        width: var(--slider-percent) !important;
-      }
-
-      &[type="delta"] .fig-slider-input-container::before {
-        --left-start: calc(
-          var(--start-percent) - var(--slider-thumb-width) / 2
-        ) !important;
-        left: min(
-          var(--left-start),
-          calc(
-            var(--slider-percent) - var(--slider-complete) *
-              var(--slider-thumb-width)
-          )
-        ) !important;
-        --width: calc(var(--slider-percent) - var(--start-percent)) !important;
-        --abs-width: max(
-          calc(
-            var(--width) + var(--slider-thumb-width) / 2 +
-              (1 - var(--slider-complete)) * var(--slider-thumb-width)
-          ),
-          calc(
-            -1 * var(--width) + var(--slider-thumb-width) / 2 +
-              var(--slider-complete) * var(--slider-thumb-width)
-          )
-        ) !important;
-        width: var(--abs-width) !important;
-      }
-    }
-    datalist {
-      mask-image: linear-gradient(
-        to right,
-        transparent 0,
-        transparent var(--spacer-4),
-        white,
-        transparent calc(100% - var(--spacer-4)),
-        transparent 100%
-      );
-    }
-    fig-input-number {
-      background-color: transparent;
-      box-shadow: none !important;
-      position: absolute;
-      right: var(--spacer-1);
-      width: fit-content;
-      min-width: fit-content;
-      max-width: max-content;
-      flex: 0 0 auto;
-      border-radius: var(--radius-small);
-
-      &:hover,
-      &:has(input:focus) {
-        box-shadow: none !important;
-      }
-      &:has(input:focus) {
-        box-shadow: inset 0 0 0 1px var(--figma-color-border-selected) !important;
-      }
-      input {
-        field-sizing: content;
-        border-radius: var(--radius-small);
-        width: auto;
-        flex: 0 0 auto;
-        text-align: right;
-        color: var(--field-text-color);
-      }
-    }
-  }
-}
-
 fig-spinner {
   width: 1rem;
   height: 1rem;
@@ -4060,74 +3885,6 @@ fig-joystick {
   }
 }
 
-fig-input-angle {
-  --size: 1.5rem;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacer-2);
-  user-select: none;
-
-  > fig-input-number {
-    flex: 0 0 auto;
-    width: auto;
-  }
-
-  &[full]:not([full="false"]) {
-    display: flex;
-    width: 100%;
-
-    > fig-input-number {
-      flex: 1 1 auto;
-      min-width: 0;
-      width: auto;
-    }
-  }
-
-  /* When inside horizontal fig-field, grow to fill and let inputs expand */
-  fig-field[direction="horizontal"] & {
-    flex: 1;
-    min-width: 0;
-
-    fig-input-number {
-      flex: 0 0 auto;
-      width: auto;
-    }
-  }
-
-  .fig-input-angle-plane {
-    display: inline-grid;
-    place-items: center;
-    width: var(--size);
-    height: var(--size);
-    aspect-ratio: 1/1;
-    flex-shrink: 0;
-    background-color: var(--figma-color-bg-secondary);
-    border-radius: 100%;
-    box-shadow: inset 0 0 0 1px var(--figma-color-border);
-    &:focus,
-    &.dragging {
-      outline: 0;
-      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    }
-  }
-  .fig-input-angle-handle {
-    display: inline-grid;
-    place-items: center;
-    grid-area: 1/1;
-    width: calc(0.5rem + 2px);
-    height: calc(0.5rem + 2px);
-    &::before {
-      content: "";
-      display: block;
-      width: 0.5rem;
-      height: 0.5rem;
-      background: var(--handle-color);
-      box-shadow: var(--handle-shadow);
-      border-radius: 50%;
-    }
-  }
-}
-
 /* Layer */
 fig-layer {
   --indent: var(--spacer-2);
@@ -5187,76 +4944,3 @@ fig-color-tip {
   }
 }
 
-/* Canvas Control */
-fig-canvas-control {
-  display: contents;
-  --fig-canvas-control-line-stroke: light-dark(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0.5)
-  );
-  --fig-canvas-control-line-stroke-hover: var(--figma-color-bg-brand);
-  --fig-canvas-control-line-stroke-active: var(--figma-color-bg-brand);
-  --fig-canvas-control-line-stroke-width: 1.25px;
-
-  & > fig-handle,
-  & > fig-tooltip:has(fig-handle:not([size="small"])) {
-    z-index: 1;
-  }
-
-  .fig-canvas-control-radius {
-    position: absolute;
-    pointer-events: none;
-    overflow: visible;
-
-    circle {
-      fill: none;
-      stroke: var(--fig-canvas-control-line-stroke);
-      stroke-width: var(--fig-canvas-control-line-stroke-width);
-      paint-order: stroke fill;
-      filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
-        drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));
-    }
-
-    .fig-canvas-control-radius-hit {
-      stroke: transparent;
-      stroke-width: 12px;
-      pointer-events: stroke;
-      filter: none;
-
-      &:hover ~ circle {
-        stroke: var(--fig-canvas-control-line-stroke-hover);
-      }
-    }
-  }
-
-  &:has(.fig-canvas-control-radius-hit:hover) .fig-canvas-control-angle-line,
-  &.fig-canvas-control-ring-active .fig-canvas-control-angle-line {
-    stroke: var(--fig-canvas-control-line-stroke-active);
-  }
-
-  &.fig-canvas-control-ring-active
-    .fig-canvas-control-radius
-    circle:not(.fig-canvas-control-radius-hit) {
-    stroke: var(--fig-canvas-control-line-stroke-active);
-  }
-
-  .fig-canvas-control-angle-svg {
-    pointer-events: none;
-  }
-
-  .fig-canvas-control-angle-line {
-    stroke: var(--fig-canvas-control-line-stroke);
-    stroke-width: var(--fig-canvas-control-line-stroke-width);
-    paint-order: stroke fill;
-    filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
-      drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));
-  }
-
-  fig-handle[size="small"] {
-    z-index: 2;
-
-    .fig-handle-hit-area {
-      cursor: grab;
-    }
-  }
-}