@rogieking/figui3 6.31.1 → 6.32.0

package/README.md

@@ -1308,6 +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"` |
 | `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 |
@@ -1404,7 +1405,7 @@ Use `slot="overlay"` for custom overlay controls. Slotted overlays stay as direc
 
 `<fig-card>` — [demo](https://rog.ie/figui3/#card)
 
-A media card with a truncated label, optional link, and attribute-only selection chrome. With `src`, it composes a generated `fig-image`. Without `src`, authored children stay in place and only generated label content is added.
+A media card with a truncated label, optional link, and attribute-only selection chrome. With `src`, it composes a generated `fig-image`. The `label` and `sublabel` attributes render inside a generated `fig-footer`.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -1432,9 +1433,13 @@ A media card with a truncated label, optional link, and attribute-only selection
 <fig-card label="Custom preview">
   <fig-preview>...</fig-preview>
 </fig-card>
+<fig-card>
+  <fig-preview>...</fig-preview>
+  <fig-footer><label>Authored footer</label></fig-footer>
+</fig-card>
 ```
 
-When `src` is omitted, authored direct children such as `fig-image`, `fig-media`, or `fig-preview` remain direct children of the card.
+When `src` is omitted, authored direct children such as `fig-image`, `fig-media`, or `fig-preview` remain direct children of the card. An authored `fig-footer` is preserved; when no `label`, `text`, or `sublabel` attributes are present, the card does not generate another footer.
 
 Place cards in a CSS grid for multi-column layouts — there is no built-in columns attribute. Prefer `full` in fluid layouts for consistency with other FigUI controls.
 

package/components.css

@@ -3175,8 +3175,10 @@ fig-tooltip {
 fig-preview {
   --fig-preview-fit: contain;
   --fig-preview-background: var(--figma-color-bg-secondary);
+  --fig-preview-aspect-ratio: auto;
 
   display: block;
+  aspect-ratio: var(--fig-preview-aspect-ratio);
   place-items: center;
   min-width: 0;
   max-width: 100%;
@@ -5028,7 +5030,8 @@ fig-card {
   &[size="large"] {
     --fig-card-padding: var(--spacer-2);
 
-    .fig-card-text {
+    > fig-footer,
+    .fig-card-link > fig-footer {
       margin-top: var(--spacer-1);
     }
 
@@ -5088,14 +5091,23 @@ fig-card {
     min-height: auto;
   }
 
-  .fig-card-text {
+  > fig-footer,
+  .fig-card-link > fig-footer {
     display: flex;
     flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    justify-content: flex-start;
     gap: 0;
+    width: auto;
+    padding: 0;
+    box-shadow: none;
+    box-sizing: border-box;
     min-width: 0;
   }
 
-  .fig-card-text[hidden] {
+  > fig-footer[hidden],
+  .fig-card-link > fig-footer[hidden] {
     display: none;
   }
 
@@ -5104,7 +5116,10 @@ fig-card {
     line-height: var(--line-height);
     color: var(--figma-color-text);
     min-width: 0;
+    min-height: 0;
     padding-inline: var(--spacer-1);
+    justify-content: flex-start;
+    text-align: start;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--fig-card-label-line-clamp);
@@ -5122,6 +5137,9 @@ fig-card {
     color: var(--figma-color-text-secondary);
     padding-inline: var(--spacer-1);
     min-width: 0;
+    min-height: 0;
+    justify-content: flex-start;
+    text-align: start;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;