@rogieking/figui3 6.31.0 → 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

@@ -355,7 +355,6 @@
   /* Icons - colorless shapes for use with mask-image */
   --icon-16-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
   --icon-24-chevron: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.64645 10.1464C7.84171 9.95118 8.15829 9.95118 8.35355 10.1464L12 13.7929L15.6464 10.1464C15.8417 9.95118 16.1583 9.95118 16.3536 10.1464C16.5488 10.3417 16.5488 10.6583 16.3536 10.8536L12.3536 14.8536C12.1583 15.0488 11.8417 15.0488 11.6464 14.8536L7.64645 10.8536C7.45118 10.6583 7.45118 10.3417 7.64645 10.1464Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
-
   --icon-16-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5839 3.72266C11.7371 3.49298 12.0476 3.43085 12.2773 3.58399C12.5069 3.73716 12.569 4.04762 12.416 4.27735L7.41596 11.7773C7.33289 11.9019 7.19778 11.9833 7.04877 11.998C6.8999 12.0126 6.75223 11.9593 6.64642 11.8535L3.64642 8.85352C3.4512 8.65826 3.45119 8.34174 3.64642 8.14649C3.84169 7.95133 4.15822 7.95128 4.35346 8.14649L6.92182 10.7148L11.5839 3.72266Z' fill='white'/%3E%3C/svg%3E");
   --icon-16-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-24-reset: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.22473 5.08203C8.41872 4.9541 8.68285 4.97586 8.85364 5.14648C9.0244 5.31725 9.046 5.58134 8.91809 5.77539L8.85364 5.85352L7.70715 7H12.0001C15.3136 7.00005 17.9999 9.68652 18.0001 13C18.0001 16.3137 15.3138 19 12.0001 19C8.68641 19 6.00012 16.3137 6.00012 13C6.00036 12.7241 6.22413 12.5 6.50012 12.5C6.77608 12.5 6.99989 12.7241 7.00012 13C7.00012 15.7614 9.2387 18 12.0001 18C14.7615 18 17.0001 15.7614 17.0001 13C16.9999 10.2388 14.7614 8.00005 12.0001 8H7.70715L8.85364 9.14648L8.91809 9.22461C9.04619 9.41859 9.02426 9.68264 8.85364 9.85352C8.68277 10.0244 8.41881 10.0461 8.22473 9.91797L8.14661 9.85352L6.14661 7.85352C5.95152 7.65824 5.9514 7.34169 6.14661 7.14648L8.14661 5.14648L8.22473 5.08203Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
@@ -397,8 +396,6 @@
   --icon-24-globe: url("data:image/svg+xml,%3Csvg%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20fill-rule%3D'evenodd'%20clip-rule%3D'evenodd'%20d%3D'M12.8676%2019.5683C12.5184%2019.9007%2012.2269%2020%2012%2020C11.7731%2020%2011.4816%2019.9007%2011.1324%2019.5683C10.778%2019.2311%2010.4134%2018.6958%2010.0854%2017.9578C9.47681%2016.5885%209.06196%2014.6732%209.00637%2012.5H14.9936C14.938%2014.6732%2014.5232%2016.5885%2013.9146%2017.9578C13.5866%2018.6958%2013.222%2019.2311%2012.8676%2019.5683ZM14.9936%2011.5H9.00637C9.06196%209.32677%209.47681%207.41148%2010.0854%206.04218C10.4134%205.30422%2010.778%204.76892%2011.1324%204.43166C11.4816%204.0993%2011.7731%204%2012%204C12.2269%204%2012.5184%204.0993%2012.8676%204.43166C13.222%204.76892%2013.5866%205.30422%2013.9146%206.04218C14.5232%207.41148%2014.938%209.32677%2014.9936%2011.5ZM15.9939%2012.5C15.919%2015.5792%2015.1561%2018.2462%2014.0452%2019.7362C17.3176%2018.8733%2019.7695%2015.9893%2019.9846%2012.5H15.9939ZM19.9846%2011.5H15.9939C15.919%208.42081%2015.1561%205.75384%2014.0452%204.26382C17.3176%205.12665%2019.7695%208.01074%2019.9846%2011.5ZM8.00607%2011.5C8.08101%208.42081%208.84386%205.75384%209.95476%204.26382C6.68236%205.12665%204.23054%208.01074%204.01537%2011.5H8.00607ZM4.01537%2012.5C4.23054%2015.9893%206.68236%2018.8733%209.95476%2019.7362C8.84387%2018.2462%208.08101%2015.5792%208.00607%2012.5H4.01537ZM21%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012C3%2016.9706%207.02944%2021%2012%2021C16.9706%2021%2021%2016.9706%2021%2012Z'%20fill%3D'black'%20fill-opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E");
   --icon-16-globe: url("data:image/svg+xml,%3Csvg%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M8%203C10.7614%203%2013%205.23858%2013%208C13%2010.7614%2010.7614%2013%208%2013C5.23858%2013%203%2010.7614%203%208C3%205.23858%205.23858%203%208%203ZM7.01172%208.5C7.05823%209.57496%207.25084%2010.5045%207.51465%2011.1641C7.66771%2011.5467%207.82478%2011.7894%207.94824%2011.9199C7.96779%2011.9406%207.98583%2011.9553%208%2011.9678C8.01417%2011.9553%208.03221%2011.9406%208.05176%2011.9199C8.17522%2011.7894%208.33229%2011.5467%208.48535%2011.1641C8.74916%2010.5045%208.94177%209.57496%208.98828%208.5H7.01172ZM4.03223%208.5C4.22306%2010.0299%205.27727%2011.2898%206.69238%2011.7793C6.31652%2010.965%206.06265%209.80685%206.01074%208.5H4.03223ZM9.98926%208.5C9.93735%209.80705%209.68259%2010.965%209.30664%2011.7793C10.7222%2011.29%2011.7769%2010.0302%2011.9678%208.5H9.98926ZM9.30664%204.21973C9.6828%205.0341%209.93733%206.19252%209.98926%207.5H11.9678C11.7769%205.96968%2010.7223%204.70898%209.30664%204.21973ZM7.94824%204.08008C7.82478%204.21063%207.66771%204.45329%207.51465%204.83594C7.25084%205.49547%207.05823%206.42504%207.01172%207.5H8.98828C8.94177%206.42504%208.74916%205.49547%208.48535%204.83594C8.33229%204.45329%208.17522%204.21063%208.05176%204.08008C8.03198%204.05917%208.01427%204.04375%208%204.03125C7.98573%204.04375%207.96802%204.05917%207.94824%204.08008ZM6.69238%204.21973C5.27711%204.7092%204.22308%205.96999%204.03223%207.5H6.01074C6.06266%206.19272%206.31632%205.03408%206.69238%204.21973Z'%20fill%3D'black'%20fill-opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E");
     
-
-
   --tip-pointer: path("M8 6L2 0H14L8 6Z");
 
 
@@ -5031,9 +5028,15 @@ 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);
     }
+
+    .fig-card-label,
+    .fig-card-sublabel {
+      padding-inline: 0;
+    }
   }
 
   &:is(:not([src]), [src=""]) {
@@ -5086,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;
   }
 
@@ -5102,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);
@@ -5120,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;