@rogieking/figui3 4.15.4 → 4.15.9

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

@@ -2762,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);
   }
@@ -3028,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 */
-  }
 }
 
 
@@ -3040,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,
@@ -3171,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 {
@@ -3186,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;
   }
@@ -3202,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,
@@ -3215,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,
@@ -3671,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:
@@ -4340,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;
@@ -4406,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%;
@@ -4461,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;
@@ -4482,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 {
@@ -4597,7 +4644,7 @@ fig-preview {
       -8px 0px;
   }
 
-  .fig-fill-picker-image-preview {
+  div.fig-fill-picker-image-preview {
     position: absolute;
     inset: 0;
     width: 100%;
@@ -4605,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%;
@@ -4614,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;

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}}