@rogieking/figui3 4.5.1 → 4.6.0

package/README.md

@@ -89,7 +89,9 @@ Minimal example:
 | [Tooltip](#tooltip) | `<fig-tooltip>` | Hover/click tooltip |
 | [Header](#header) | `<fig-header>` | Section header |
 | [Layer](#layer) | `<fig-layer>` | Collapsible layer list item |
+| [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 |
 | [Avatar](#avatar) | `<fig-avatar>` | Profile image or initials |
 | [Spinner](#spinner) | `<fig-spinner>` | Loading spinner |
 | [Shimmer](#shimmer) | `<fig-shimmer>` | Shimmer loading placeholder |
@@ -993,28 +995,90 @@ A collapsible layer list item with expand/collapse and visibility toggling. Supp
 
 ---
 
+#### Media
+
+`<fig-media>`
+
+Unified media component that supports image/video modes and shared sizing/upload behavior. Renders a real `<img>` or `<video>` inside the host. By default the host shrinkwraps to the inner media's intrinsic size; set `size` for a token-sized square, or `aspect-ratio` to fill the container width with a fixed ratio.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `type` | string | `"image"` | `"image"` or `"video"` |
+| `src` | string | — | Media URL |
+| `alt` | string | `""` | Alt text forwarded to the generated `<img>` (image mode) |
+| `upload` | boolean | `false` | Show upload overlay (`fig-input-file`) |
+| `label` | string | `"Upload"` | Upload button label |
+| `size` | string | — | `small` \| `medium` \| `large` \| `auto` (token-sized square) |
+| `aspect-ratio` | string | — | CSS aspect-ratio (e.g. `"16 / 9"`); fills container width |
+| `fit` | string | `"contain"` | CSS object-fit (`"cover"`, `"contain"`, etc.) |
+| `checkerboard` | boolean | `false` | Show checkerboard behind transparent media |
+| `controls` | boolean | `false` | Show playback controls for video |
+| `autoplay` | boolean | `false` | Video autoplay |
+| `loop` | boolean | `false` | Video loop |
+| `muted` | boolean | `false` | Video muted |
+| `poster` | string | — | Video poster URL |
+
+```html
+<fig-media type="image" src="photo.jpg"></fig-media>
+<fig-media type="image" src="photo.jpg" aspect-ratio="16 / 9" fit="cover"></fig-media>
+<fig-media type="video" src="clip.mp4" controls muted></fig-media>
+```
+
+---
+
 #### Image
 
 `<fig-image>` — [demo](https://rog.ie/figui3/#image)
 
-An image display component with optional upload, aspect ratio, and object-fit control.
+An image display component with optional upload, aspect ratio, and object-fit control. Renders a real `<img>` inside the host; by default the host shrinkwraps to the image's intrinsic size.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `src` | string | — | Image URL |
+| `alt` | string | `""` | Alt text forwarded to the generated `<img>` |
 | `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.) |
+| `size` | string | — | `small` \| `medium` \| `large` \| `auto` (token-sized square) |
+| `aspect-ratio` | string | — | CSS aspect-ratio (e.g. `"16 / 9"`); fills container width |
+| `fit` | string | `"contain"` | CSS object-fit (`"cover"`, `"contain"`, etc.) |
 | `checkerboard` | boolean | `false` | Show checkerboard behind transparent images |
 
 ```html
+<fig-image src="photo.jpg"></fig-image>
 <fig-image src="photo.jpg" aspect-ratio="16 / 9" fit="cover"></fig-image>
 <fig-image upload label="Upload Image"></fig-image>
 ```
 
 ---
 
+#### Video
+
+`<fig-video>`
+
+Video display/upload component with the same host styling model as `fig-image`. Renders a real `<video>` inside the host; by default the host shrinkwraps to the video's intrinsic size.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `src` | string | — | Video URL |
+| `upload` | boolean | `false` | Show upload overlay (`fig-input-file`) |
+| `label` | string | `"Upload"` | Upload button label |
+| `size` | string | — | `small` \| `medium` \| `large` \| `auto` (token-sized square) |
+| `aspect-ratio` | string | — | CSS aspect-ratio (e.g. `"16 / 9"`); fills container width |
+| `fit` | string | `"contain"` | CSS object-fit (`"cover"`, `"contain"`, etc.) |
+| `controls` | boolean | `false` | Show playback controls |
+| `autoplay` | boolean | `false` | Autoplay video |
+| `loop` | boolean | `false` | Loop video |
+| `muted` | boolean | `false` | Mute video |
+| `poster` | string | — | Poster image URL (forwarded to inner `<video>`) |
+
+```html
+<fig-video src="clip.mp4"></fig-video>
+<fig-video src="clip.mp4" aspect-ratio="16 / 9" controls></fig-video>
+<fig-video upload label="Upload Video" controls muted></fig-video>
+```
+
+---
+
 #### Avatar
 
 `<fig-avatar>` — [demo](https://rog.ie/figui3/#avatar)

package/base.css

@@ -43,6 +43,20 @@ hr {
   }
 }
 
+iframe{
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+  width: max-content;
+  height: max-content;
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%; 
+  flex: 1 1 auto; 
+  display: block; 
+  min-height: 0;
+}
+
 *,
 *:before,
 *:after {

package/components.css

@@ -368,7 +368,7 @@
     inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
 
   --handle-shadow:
-    0px 0px 0px 1px rgba(0, 0, 0, 0.2),
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
     0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
     0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
 }
@@ -1376,17 +1376,16 @@ fig-input-file {
   }
 }
 
-fig-image {
+fig-media,
+fig-image,
+fig-video {
   --image-size: 2rem;
+  --media-size: var(--image-size);
   --fit: contain;
-  --image-width: var(--image-size);
-  --image-height: var(--image-size);
   --aspect-ratio: 1 / 1;
   display: inline-grid;
   place-items: center;
-  width: var(--image-width);
-  height: var(--image-height);
-  aspect-ratio: var(--aspect-ratio);
+  max-width: 100%;
   > * {
     grid-area: 1/1;
   }
@@ -1396,19 +1395,50 @@ fig-image {
     --height: 100% !important;
     --padding: 0px;
     --chit-bg-size: var(--fit);
+    z-index: 0;
     &[disabled] {
       opacity: 1;
     }
   }
+  > .fig-media-element[data-generated] {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    object-fit: var(--fit);
+    border-radius: var(--radius-medium);
+    z-index: 1;
+  }
+  &:has(> .fig-media-element[data-generated][src]:not([src=""])) > fig-chit[data-generated],
+  &:has(> video.fig-media-element[data-generated][poster]:not([poster=""])) > fig-chit[data-generated] {
+    display: none;
+  }
+  &:is(:not([src]), [src=""]):is(:not([poster]), [poster=""])
+    > video.fig-media-element[data-generated] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  &:is(:not([src]), [src=""]) > img.fig-media-element[data-generated] {
+    opacity: 0;
+    pointer-events: none;
+  }
   > fig-input-file[data-generated] {
     opacity: 0;
     pointer-events: none;
+    z-index: 2;
   }
-  &:not([src]):not([src=""]) > fig-input-file[data-generated],
+  &:is(:not([src]), [src=""]) > fig-input-file[data-generated],
   &:hover > fig-input-file[data-generated] {
     opacity: 1;
     pointer-events: all;
   }
+  &[size] {
+    width: var(--media-size);
+    height: var(--media-size);
+    > .fig-media-element[data-generated] {
+      width: 100%;
+      height: 100%;
+    }
+  }
   &[size="medium"] {
     --image-size: 4rem;
   }
@@ -1418,11 +1448,17 @@ fig-image {
   &[size="auto"] {
     --image-size: 6rem;
     &[full]:not([full="false"]) {
-      --image-width: 100%;
+      width: 100%;
     }
   }
   &[aspect-ratio] {
+    width: 100%;
     height: auto;
+    aspect-ratio: var(--aspect-ratio);
+    > .fig-media-element[data-generated] {
+      width: 100%;
+      height: 100%;
+    }
     fig-chit {
       --size: 100% !important;
       height: auto !important;
@@ -2618,7 +2654,6 @@ dialog,
   border-radius: var(--radius-large, 0.8125rem);
   background: var(--figma-color-bg);
   min-width: var(--popover-min-width);
-
   box-shadow: var(--figma-elevation-500-modal-window);
 
   footer,
@@ -2628,6 +2663,7 @@ dialog,
     padding: var(--spacer-2);
     gap: var(--spacer-2);
   }
+  
   p {
     padding: 0 var(--spacer-3);
   }
@@ -2637,6 +2673,11 @@ dialog,
     outline: none !important;
   }
 
+  &[open]{
+    display: flex;
+    flex-direction: column;
+  }
+
   & header {
     height: var(--spacer-6);
     margin: 0;
@@ -2705,12 +2746,6 @@ dialog[is="fig-dialog"] {
     min-width: 12rem;
     min-height: 6rem;
   }
-  & > fig-header[dialog-header]:not([borderless]):not([borderless="false"]) {
-    margin-bottom: var(--spacer-2-5);
-  }
-  & > fig-footer:not([borderless]):not([borderless="false"]) {
-    margin-top: var(--spacer-2-5);
-  }
 }
 
 dialog[is="fig-popup"] {
@@ -2863,6 +2898,8 @@ dialog[is="fig-toast"] {
   }
 }
 
+
+
 /* Tooltip */
 fig-tooltip {
   display: contents;
@@ -3640,6 +3677,7 @@ fig-segmented-control {
     text-overflow: ellipsis;
     white-space: nowrap;
     transition: none;
+    text-transform: capitalize;
 
     &[selected]:not([selected="false"]),
     &[selected="true"] {
@@ -4618,7 +4656,9 @@ fig-chooser {
     > :not(.fig-chooser-nav-start):not(.fig-chooser-nav-end) {
       flex: 1 1 0%;
     }
-    fig-image[full] {
+    fig-media[full],
+    fig-image[full],
+    fig-video[full] {
       min-width: 3rem;
     }
     > * {

package/dist/base.css

@@ -1 +1 @@
-html,:host{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);width:100%;height:100%;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);margin:var(--spacer-2)0;border:none;width:100%;height:1px}hr[vertical]{margin:0 var(--spacer-2);width:1px;height:100%}*,*: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}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}