@rogieking/figui3 6.9.6 → 6.9.7

package/README.md

@@ -1174,6 +1174,7 @@ Unified media component that supports image/video modes and shared sizing/upload
 | `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 |
+| `caption` | string | — | Caption text rendered below the media preview |
 | `controls` | boolean | `false` | Show playback controls for video |
 | `autoplay` | boolean | `false` | Video autoplay |
 | `loop` | boolean | `false` | Video loop |
@@ -1186,9 +1187,14 @@ Use meaningful `alt` text for informative images. Use `alt=""` only when the ima
 ```html
 <fig-media type="image" src="photo.jpg" alt="Selected image"></fig-media>
 <fig-media type="image" src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover"></fig-media>
-<fig-media type="video" src="clip.mp4" aria-label="Product demo video" controls muted></fig-media>
+<fig-media type="video" src="clip.mp4" aria-label="Product demo video" caption="Looping product demo" controls muted></fig-media>
+<fig-media type="image" src="photo.jpg" alt="Selected image">
+  <caption>Selected image from the current document.</caption>
+</fig-media>
 ```
 
+Use the `caption` attribute for the most reliable plain-text caption. A direct `<caption>` child is also supported when the browser parser preserves it inside the custom element; because native `<caption>` is table-associated HTML, parser behavior can vary by authoring context.
+
 ---
 
 #### Image
@@ -1207,14 +1213,16 @@ An image display component with optional upload, aspect ratio, and object-fit co
 | `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 |
+| `caption` | string | — | Caption text rendered below the image preview |
 
 Use meaningful `alt` text for informative images. Use `alt=""` for decorative previews, thumbnails with visible labels, or upload placeholders.
 
 ```html
 <fig-image src="photo.jpg" alt="Selected image"></fig-image>
-<fig-image src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover"></fig-image>
+<fig-image src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover" caption="Cover image"></fig-image>
 <fig-image upload label="Upload Image" alt=""></fig-image>
 <fig-image src="photo.jpg" alt="Selected image">
+  <caption>Selected image from the current document.</caption>
   <fig-input-file slot="overlay" variant="overlay" label="Change image"></fig-input-file>
 </fig-image>
 ```
@@ -1243,13 +1251,16 @@ Video display/upload component with the same preview styling model as `fig-image
 | `muted` | boolean | `false` | Mute video |
 | `poster` | string | — | Poster image URL (forwarded to inner `<video>`) |
 | `aria-label` | string | — | Accessible label forwarded to the generated `<video>` |
+| `caption` | string | — | Caption text rendered below the video preview |
 
-Prefer `controls` for videos that play motion. Add captions with a slotted `<track>` when the video includes speech or essential audio.
+Prefer `controls` for videos that play motion. Use native `<track>` text tracks when the video includes speech or essential audio.
 
 ```html
-<fig-video src="clip.mp4" aria-label="Product demo video" controls></fig-video>
+<fig-video src="clip.mp4" aria-label="Product demo video" caption="Product demo" controls></fig-video>
 <fig-video src="clip.mp4" aria-label="Product demo video" aspect-ratio="16 / 9" controls></fig-video>
-<fig-video upload label="Upload Video" aria-label="Uploaded video preview" controls muted></fig-video>
+<fig-video upload label="Upload Video" aria-label="Uploaded video preview" controls muted>
+  <caption>Uploaded video preview.</caption>
+</fig-video>
 ```
 
 ---

package/base.css

@@ -25,6 +25,7 @@ h1,
 h2 {
   font-weight: var(--body-large-strong-fontWeight);
   font-size: var(--body-large-fontSize);
+  text-wrap: pretty;
 }
 h3 {
   font-weight: var(--body-medium-strong-fontWeight);
@@ -118,6 +119,7 @@ iframe{
 /* Defaults */
 p {
   margin-block: 1em;
+  text-wrap: pretty;
 }
 p:first-child {
   margin-block-start: 0;
@@ -128,11 +130,13 @@ p:last-child {
 
 label, p, li {
   color: var(--figma-color-text-secondary);
+  text-wrap: pretty;
 }
 
 h2 {
   font-weight: var(--body-medium-strong-fontWeight);
   margin: var(--spacer-2) 0;
+  text-wrap: pretty;
 }
 
 a{

package/components.css

@@ -1796,6 +1796,16 @@ fig-video {
     width: 100%;
     pointer-events: auto;
   }
+
+  > caption {
+    display: block;
+    width: 100%;
+    color: var(--figma-color-text-secondary);
+    font-size: var(--font-size-small);
+    line-height: var(--line-height);
+    text-align: left;
+    white-space: normal;
+  }
 }
 
 fig-media-controls {
@@ -3487,7 +3497,7 @@ fig-footer {
   display: flex;
   flex-shrink: 0;
   width: 100%;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: flex-start;
   justify-content: flex-end;
   gap: var(--spacer-2);
@@ -3509,6 +3519,7 @@ fig-footer {
     min-height: var(--spacer-4);
     display: flex;
     align-items: center;
+    text-wrap: pretty;
   }
 
   & > fig-button {
@@ -3521,25 +3532,17 @@ fig-footer {
     text-align: center;
   }
 
-  /*&:has(> :is(fig-button, fig-tooltip) ~ :is(fig-button, fig-tooltip)) {
-    flex-direction: column;
-    align-items: stretch;
+  &:has(> :is(fig-button, fig-tooltip) ~ :is(fig-button, fig-tooltip)) {
+    flex-wrap: wrap;
 
     & > :is(label, h3) {
-      flex-grow: 0;
+      flex-grow: 1;
+      width: 100%;
       justify-content: flex-start;
       text-align: start;
+      
     }
-
-    & > fig-button,
-    & > .fig-footer-action {
-      width: 100%;
-    }
-
-    & > .fig-footer-action fig-button {
-      width: 100%;
-    }
-  }*/
+  }
 
   &[borderless] {
     box-shadow: none;

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;line-height:1rem}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}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)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2);&:last-child{margin-bottom:0}}fieldset{padding:var(--spacer-1) var(--spacer-3)}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-block:1em}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}label,p,li{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}}
+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;line-height:1rem}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize);text-wrap:pretty}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2);&:last-child{margin-bottom:0}}fieldset{padding:var(--spacer-1) var(--spacer-3)}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{text-wrap:pretty;margin-block:1em}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}label,p,li{color:var(--figma-color-text-secondary);text-wrap:pretty}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0;text-wrap:pretty}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}