@rogieking/figui3 6.32.1 → 6.33.0

package/README.md

@@ -1308,7 +1308,7 @@ A thin styled layer for arbitrary visual content. Use it for generated previews,
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `aspect-ratio` | string | `auto` | CSS aspect ratio such as `"1/1"` or `"16/9"` |
+| `aspect-ratio` | string | `"4/3"` | CSS aspect ratio such as `"1/1"` or `"16/9"` |
 | `fit` | string | `contain` | Object fit for direct media children |
 | `full` | boolean | `false` | Stretch to the available width |
 | `checkerboard` | boolean | `false` | Show checkerboard behind transparent content |
@@ -1339,6 +1339,7 @@ Unified media component that supports image/video modes and shared sizing/upload
 | `src` | string | — | Media URL |
 | `alt` | string | `""` | Alt text forwarded to the generated `<img>` (image mode) |
 | `upload` | boolean | `false` | Show upload overlay (`fig-input-file`) |
+| `loading-indicator` | boolean | `true` | Set to `"false"` to disable the delayed loading spinner for generated images |
 | `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 |
@@ -1365,6 +1366,10 @@ Use meaningful `alt` text for informative images. Use `alt=""` only when the ima
 
 Use the `caption` attribute for a plain-text caption, or a direct `<figcaption>` child for authored caption content.
 
+Native load lifecycle events are re-emitted from the `fig-media` host as bubbling, composed `CustomEvent`s. Image mode emits `load` and `error`. Video mode forwards `loadstart`, `progress`, `suspend`, `abort`, `error`, `emptied`, `stalled`, `loadedmetadata`, `loadeddata`, `canplay`, `canplaythrough`, `playing`, `waiting`, `seeking`, `seeked`, `durationchange`, `timeupdate`, `ratechange`, `resize`, and `volumechange`; existing `play`, `pause`, and `ended` events remain available. Event `detail` includes `src`, `media`, and `originalEvent`, plus video timing and readiness state.
+
+For generated images, a spinner appears when loading exceeds 150ms and is removed on `load` or `error`. The host reflects `aria-busy="true"` while pending. Authored media or preview content does not receive an automatic spinner.
+
 ---
 
 #### Image
@@ -1378,6 +1383,7 @@ An image display component with optional upload, aspect ratio, and object-fit co
 | `src` | string | — | Image URL |
 | `alt` | string | `""` | Alt text forwarded to the generated `<img>` |
 | `upload` | boolean | `false` | Show upload overlay (`fig-input-file`) |
+| `loading-indicator` | boolean | `true` | Set to `"false"` to disable the delayed loading spinner |
 | `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 |
@@ -1387,6 +1393,8 @@ An image display component with optional upload, aspect ratio, and object-fit co
 
 Use meaningful `alt` text for informative images. Use `alt=""` for decorative previews, thumbnails with visible labels, or upload placeholders.
 
+The generated image's native `load` and `error` events are re-emitted from `fig-image` as bubbling, composed `CustomEvent`s with `src`, `media`, and `originalEvent` in `event.detail`.
+
 ```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" caption="Cover image"></fig-image>

package/components.css

@@ -133,7 +133,7 @@
   --figma-color-icon-onwarning-secondary: #00000080;
   --figma-color-icon-onwarning-tertiary: #0000004d;
   --figma-color-icon-pressed: light-dark(#007be5, #0a6dc2);
-  --figma-color-icon-secondary: light-dark(#00000099, #ffffffcc);
+  --figma-color-icon-secondary: light-dark(#00000080, #ffffffb3);
   --figma-color-icon-secondary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-icon-selected: light-dark(#007be5, #7cc4f8);
   --figma-color-icon-selected-secondary: light-dark(#007be5, #7cc4f8);
@@ -1226,6 +1226,7 @@ fig-avatar,
   contain: layout paint;
   --size: 1.5rem;
   width: var(--size);
+  flex-shrink: 0;
   display: inline-grid;
   place-items: center;
   height: var(--size);
@@ -1608,6 +1609,13 @@ fig-video {
     z-index: 0;
   }
 
+  > fig-spinner[slot="overlay"][data-loading-indicator][data-generated] {
+    place-self: center;
+    z-index: 1;
+    opacity: 1;
+    pointer-events: none;
+  }
+
   &:is(:not([src]), [src=""]):is(:not([poster]), [poster=""])
     > fig-preview > video.fig-media-element[data-generated] {
     opacity: 0;
@@ -1627,7 +1635,7 @@ fig-video {
     z-index: 2;
     max-width: calc(100% - var(--spacer-4));
   }
-  &:not(:has(> fig-preview > img.fig-media-element[data-generated][src]:not([src=""]))) > fig-preview > fig-input-file:is([data-generated], [variant="overlay"]),
+  &:not(:has(> fig-preview > :is(img, video).fig-media-element[data-generated][src]:not([src=""]))) > fig-preview > fig-input-file:is([data-generated], [variant="overlay"]),
   > fig-preview:hover > fig-input-file:is([data-generated], [variant="overlay"]),
   > fig-preview:focus-within > fig-input-file:is([data-generated], [variant="overlay"]) {
     opacity: 1;
@@ -1642,7 +1650,7 @@ fig-video {
     max-width: calc(100% - var(--spacer-4));
   }
 
-  &:not(:has(> fig-preview > img.fig-media-element[data-generated][src]:not([src=""]))) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
+  &:not(:has(> fig-preview > :is(img, video).fig-media-element[data-generated][src]:not([src=""]))) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
   &:has(> fig-preview:hover) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
   &:has(> fig-preview:focus-within) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
   &:has(> [slot="overlay"]:is(:focus, :focus-within, :active)) > [slot="overlay"],
@@ -3176,7 +3184,7 @@ fig-tooltip {
 fig-preview {
   --fig-preview-fit: contain;
   --fig-preview-background: var(--figma-color-bg-secondary);
-  --fig-preview-aspect-ratio: auto;
+  --fig-preview-aspect-ratio: 4/3;
 
   display: block;
   aspect-ratio: var(--fig-preview-aspect-ratio);