@rogieking/figui3 4.15.3 → 4.15.8

package/README.md

@@ -89,6 +89,7 @@ Minimal example:
 | [Tooltip](#tooltip) | `<fig-tooltip>` | Hover/click tooltip |
 | [Header](#header) | `<fig-header>` | Section header |
 | [Layer](#layer) | `<fig-layer>` | Collapsible layer list item |
+| [Preview](#preview) | `<fig-preview>` | Thin visual preview layer |
 | [Media](#media) | `<fig-media>` | Shared media host for image/video |
 | [Image](#image) | `<fig-image>` | Image display/upload |
 | [Video](#video) | `<fig-video>` | Video display/upload with playback controls |
@@ -998,6 +999,29 @@ A collapsible layer list item with expand/collapse and visibility toggling. Supp
 
 ---
 
+#### Preview
+
+`<fig-preview>`
+
+A thin styled layer for arbitrary visual content. Use it for generated previews, canvas output, SVG, images, or other custom rendered surfaces when you do not need media upload behavior.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `full` | boolean | `false` | Stretch to the available width |
+| `checkerboard` | boolean | `false` | Show checkerboard behind transparent content |
+
+```html
+<fig-preview full style="height: 96px">
+  <canvas width="320" height="180"></canvas>
+</fig-preview>
+
+<fig-preview checkerboard>
+  <img src="photo.png" alt="Preview">
+</fig-preview>
+```
+
+---
+
 #### Media
 
 `<fig-media>`

package/base.css

@@ -104,6 +104,9 @@ p {
   margin: var(--spacer-2) 0;
   line-height: 1rem;
   color: var(--figma-color-text-secondary);
+  &:last-child{
+    margin-bottom: 0;
+  }
 }
 
 label {
@@ -114,3 +117,11 @@ h2 {
   font-weight: var(--body-medium-strong-fontWeight);
   margin: var(--spacer-2) 0;
 }
+
+a{
+  color: var(--figma-color-text-brand);
+  text-decoration: none;
+  &:hover{
+    text-decoration: underline;
+  }
+}

package/components.css

@@ -282,11 +282,21 @@
       rgba(255, 255, 255, 0.2) 0% 50%
     )
     0 0 / 0.5rem 0.5rem;
-    --checkerboard-chit: repeating-conic-gradient(
+  --checkerboard-chit: repeating-conic-gradient(
       rgba(0, 0, 0, 0.2) 0% 25%,
       rgba(255, 255, 255, 0.2) 0% 50%
     )
-    0 0 / 14px 14px;
+    0 0 / 0.875rem 0.875rem;
+    --checkerboard-slider: repeating-conic-gradient(
+      rgba(0, 0, 0, 0.2) 0% 25%,
+      rgba(255, 255, 255, 0.2) 0% 50%
+    )
+    0 0 / 0.375rem 0.375rem;
+  --checkerboard-handle: repeating-conic-gradient(
+      rgba(0, 0, 0, 0.2) 0% 25%,
+      rgba(255, 255, 255, 0.2) 0% 50%
+    )
+    0 0 / 0.625rem 0.625rem;
   --bg-hue: linear-gradient(
     90deg,
     rgba(255, 0, 0, 1),
@@ -1910,6 +1920,7 @@ fig-origin-grid {
     --width: var(--origin-grid-handle-size);
     --height: var(--origin-grid-handle-size);
     --border-radius: var(--radius-small);
+    
     position: absolute;
     left: 50%;
     top: 50%;
@@ -2404,6 +2415,7 @@ fig-slider {
     0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: none;
   --handle-transition: var(--slider-transition);
+  --slider-checkerboard: var(--checkerboard);
 
   display: flex;
   align-items: center;
@@ -2575,7 +2587,7 @@ fig-slider {
     &.opacity::-webkit-slider-runnable-track {
       background:
         linear-gradient(to right, transparent, var(--color)),
-        var(--checkerboard);
+        var(--slider-checkerboard);
     }
 
     /* Firefox thumb */
@@ -2630,7 +2642,7 @@ fig-slider {
     &.opacity::-moz-range-track {
       background:
         linear-gradient(to right, transparent, var(--color)),
-        var(--checkerboard);
+        var( --slider-checkerboard);
     }
   }
 
@@ -2684,6 +2696,7 @@ fig-slider {
         var(--slider-thumb-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-100);
+    --slider-checkerboard: var(--checkerboard-slider);
 
     background-color: var(--figma-color-bg-secondary);
     border-radius: var(--radius-medium);
@@ -2716,6 +2729,7 @@ fig-slider {
         height: auto;
       }
     }
+    
   }
 }
 
@@ -2748,14 +2762,6 @@ dialog,
     overscroll-behavior: contain;
   }
 
-  footer,
-  fig-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--spacer-2);
-    gap: var(--spacer-2);
-  }
-
   p {
     padding: 0 var(--spacer-3);
   }
@@ -3014,10 +3020,6 @@ dialog[is="fig-toast"] {
     background-color: var(--figma-color-bg-success);
     color-scheme: dark;
   }
-
-  &[theme="auto"] {
-    /* color-scheme is resolved at runtime by FigToast JS */
-  }
 }
 
 
@@ -3026,6 +3028,55 @@ dialog[is="fig-toast"] {
 fig-tooltip {
   display: contents;
 }
+
+fig-preview {
+  --fig-preview-fit: contain;
+
+  display: inline-grid;
+  place-items: center;
+  min-width: 0;
+  max-width: 100%;
+  background-color: var(--figma-color-bg-secondary);
+  border-radius: var(--radius-medium);
+  position: relative;
+
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
+
+  &[checkerboard]:not([checkerboard="false"]) {
+    background: var(--checkerboard);
+  }
+
+  &::after {
+    content: "";
+    grid-area: 1/1;
+    place-self: stretch;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  > * {
+    grid-area: 1/1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  > :is(img, video, canvas, svg) {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: var(--fig-preview-fit);
+    object-position: center;
+    border-radius: 0;
+  }
+  > canvas{
+    border-radius: inherit;
+  }
+}
+
 /* Web Components */
 fig-button,
 fig-content,
@@ -3157,11 +3208,10 @@ fig-group {
 
 fig-footer {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-end;
   gap: var(--spacer-2);
-  height: var(--spacer-6);
-  padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
+  padding: var(--spacer-2-5) var(--spacer-3);
   box-shadow: inset 0 1px 0 0 var(--figma-color-border);
 
   & h3 {
@@ -3172,6 +3222,19 @@ fig-footer {
     gap: var(--spacer-half);
   }
 
+  & > label {
+    flex-grow: 1;
+    align-items: baseline;
+    gap: var(--spacer-half);
+    min-height: var(--spacer-4);
+    display: flex;
+    align-items: center;
+  }
+
+  & > fig-button{
+    flex-shrink: 0;
+  }
+
   &[borderless] {
     box-shadow: none;
   }
@@ -3188,6 +3251,11 @@ fig-footer {
 fig-content {
   padding: var(--spacer-2) 0;
   display: block;
+
+  p{
+    margin: 0 0 var(--spacer-2) 0;
+    padding: 0 var(--spacer-3);
+  }
 }
 
 vstack,
@@ -3201,12 +3269,24 @@ vstack,
 }
 
 hstack,
-.hstack,
-[hstack] {
+.hstack{
   display: flex;
-  gap: var(--spacer-2);
-  align-items: start;
-  flex-wrap: nowrap;
+  gap: var(--hstack-gap, var(--spacer-2));
+  align-items: var(--hstack-align, center);
+  justify-content: var(--hstack-justify, flex-start);
+  flex-wrap: var(--hstack-wrap, nowrap);
+
+  &[align="start"] {
+    --hstack-align: flex-start;
+  }
+
+  &[align="end"] {
+    --hstack-align: flex-end;
+  }
+
+  &[align="stretch"] {
+    --hstack-align: stretch;
+  }
 }
 
 fig-input-text,
@@ -3459,7 +3539,6 @@ fig-input-palette {
     "inline    button";
   gap: var(--spacer-2);
   min-width: 0;
-  border-radius: var(--radius-medium);
 
   > .palette-colors-inline {
     grid-area: inline;
@@ -3569,6 +3648,12 @@ fig-input-palette {
       border-radius: var(--radius-medium) !important;
     }
   }
+  fig-field &{
+    grid-template-columns: 1fr calc(var(--spacer-3) + var(--spacer-1));
+    .palette-colors-expanded {
+      grid-template-columns: [input] 1fr [button] calc(var(--spacer-3) + var(--spacer-1));
+    }
+  }
 }
 
 fig-field {
@@ -3641,6 +3726,10 @@ fig-field {
     &[columns="half"] {
       --fig-field-label-ratio: 2fr;
     }
+    &[columns="2/5"] {
+      --fig-field-label-ratio: 2fr;
+      --fig-field-input-ratio: 3fr;
+    }
     & > label {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -3648,11 +3737,6 @@ fig-field {
       margin-right: var(--fig-field-gap);
       min-width: 0;
     }
-    /* If the field has no label, set the input ratio to 1fr */
-    &:not(:has(> label)) {
-      /*--fig-field-input-ratio: 1fr;
-      --fig-field-label-ratio: 0fr;*/
-    }
     /* labelless fields can have a few inputs */
     &:not(:has(> label)) {
       grid-template-columns:
@@ -4317,33 +4401,6 @@ fig-fill-picker {
   }
 }
 
-fig-preview {
-  display: inline-grid;
-  place-items: center;
-  aspect-ratio: 1;
-  width: calc(100% - var(--spacer-3) * 2);
-  margin: 0 var(--spacer-3);
-  margin-top: var(--spacer-2);
-  margin-bottom: var(--spacer-2);
-  border-radius: var(--radius-medium);
-  position: relative;
-  &::before,
-  &::after,
-  > * {
-    grid-area: 1/1;
-    place-self: center;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-  }
-  &::after {
-    content: "";
-    grid-area: 1/1;
-    place-self: center;
-    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-  }
-}
-
 .fig-fill-picker-dialog {
   contain: layout;
   width: 240px;
@@ -4383,6 +4440,17 @@ fig-preview {
   }
 
   .fig-fill-picker-color-area {
+    aspect-ratio: 1;
+    width: calc(100% - var(--spacer-3) * 2);
+    margin: var(--spacer-2) var(--spacer-3);
+
+    > *:not(fig-handle) {
+      place-self: center;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+
     canvas {
       width: 100%;
       height: 100%;
@@ -4438,6 +4506,14 @@ fig-preview {
   }
 
   /* Gradient Tab */
+  .fig-fill-picker-gradient-preview {
+    aspect-ratio: auto;
+    width: calc(100% - var(--spacer-3) * 2);
+    margin: var(--spacer-2) var(--spacer-3);
+    margin-top: var(--spacer-4);
+    background: transparent;
+  }
+
   .fig-fill-picker-gradient-header {
     padding-right: var(--spacer-2);
     display: flex;
@@ -4459,12 +4535,6 @@ fig-preview {
     }
   }
 
-  .fig-fill-picker-gradient-preview {
-    aspect-ratio: auto;
-    padding: var(--spacer-2-5) 0 0 0;
-
-  }
-
   .fig-fill-picker-gradient-stops {
     .fig-fill-picker-gradient-stops-header {
       > span {
@@ -4574,7 +4644,7 @@ fig-preview {
       -8px 0px;
   }
 
-  .fig-fill-picker-image-preview {
+  div.fig-fill-picker-image-preview {
     position: absolute;
     inset: 0;
     width: 100%;
@@ -4582,7 +4652,13 @@ fig-preview {
     display: none;
   }
 
-  .fig-fill-picker-video-preview {
+  fig-image.fig-fill-picker-image-preview {
+    max-width: none;
+    max-height: none;
+    width: auto;
+  }
+
+  video.fig-fill-picker-video-preview {
     position: absolute;
     inset: 0;
     width: 100%;
@@ -4591,6 +4667,12 @@ fig-preview {
     display: none;
   }
 
+  fig-media.fig-fill-picker-video-preview {
+    max-width: none;
+    max-height: none;
+    width: auto;
+  }
+
   .fig-fill-picker-upload {
     position: relative;
     z-index: 1;
@@ -4934,6 +5016,7 @@ fig-handle {
   --border: none;
   --fig-handle-hit-area-opacity: 0;
   --fig-handle-hit-area-size: 0;
+  --fig-handle-checkerboard: var(--checkerboard);
 
   margin: 0;
   padding: 0;
@@ -4964,7 +5047,9 @@ fig-handle {
     width: calc(var(--width) - var(--ring-width) * 2);
     height: calc(var(--height) - var(--ring-width) * 2);
     background:
-      linear-gradient(var(--fill), var(--fill)), var(--checkerboard-chit);
+      linear-gradient(var(--fill), var(--fill)), var(--fig-handle-checkerboard);
+    background-position: 0 0;
+    background-size: 0.625rem 0.625rem;
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     place-self: center;

package/dist/base.css

@@ -1 +1 @@
-html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}
+html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem;&:last-child{margin-bottom:0}}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}