@rogieking/figui3 6.31.1 → 6.31.2

package/README.md

@@ -1404,7 +1404,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 +1432,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

@@ -5028,7 +5028,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 +5089,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 +5114,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 +5135,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;