@rogieking/figui3 6.30.0 → 6.31.1

package/README.md

@@ -1418,12 +1418,14 @@ A media card with a truncated label, optional link, and attribute-only selection
 | `selected` | boolean | `false` | Selected chrome only (no click-toggle) |
 | `disabled` | boolean | `false` | Dim + non-interactive; no `<a>` when disabled |
 | `full` | boolean | `false` | Stretch to the available width (cards are already `width: 100%` by default) |
+| `size` | string | default | Set to `"large"` for `--spacer-2` card padding and `--spacer-1` label spacing |
 | `aspect-ratio` | string | `"1/1"` | Forwarded to generated `fig-image` |
 | `fit` | string | `"contain"` | Forwarded to generated `fig-image` |
 | `label-line-clamp` | string | `"1"` | `"1"` or `"2"` line clamp for the label |
 
 ```html
 <fig-card src="photo.jpg" label="Autumn field"></fig-card>
+<fig-card src="photo.jpg" label="Large card" size="large"></fig-card>
 <fig-card src="photo.jpg" label="Shader pill" sublabel="Generative tools/effects" selected></fig-card>
 <fig-card src="photo.jpg" label="Open asset" href="#asset"></fig-card>
 <fig-card src="photo.jpg" label="Wide card" aspect-ratio="16/9" full></fig-card>

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");
@@ -394,7 +393,9 @@
   --icon-24-moon: 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='M15 14.9999C15.3647 14.9999 15.7224 14.9672 16.0703 14.9045C15.1624 16.1743 13.677 16.9997 12 16.9997C9.23858 16.9997 7 14.7611 7 11.9997C7 10.3226 7.82546 8.8371 9.09542 7.92923C9.03267 8.27722 9 8.63509 9 8.99986C9 12.3136 11.6863 14.9999 15 14.9999ZM17.3039 14.8075C17.6193 14.2129 16.8933 13.678 16.2412 13.8446C15.8443 13.946 15.4285 13.9999 15 13.9999C12.2386 13.9999 10 11.7613 10 8.99986C10 8.57132 10.0539 8.15537 10.1553 7.75842C10.3219 7.10631 9.78711 6.38032 9.19252 6.6957C7.29348 7.70298 6 9.70029 6 11.9997C6 15.3134 8.68629 17.9997 12 17.9997C14.2993 17.9997 16.2965 16.7064 17.3039 14.8075ZM16 7.49993C16 7.22379 15.7761 6.99993 15.5 6.99993C15.2239 6.99993 15 7.22379 15 7.49993V7.99993H14.5C14.2239 7.99993 14 8.22379 14 8.49993C14 8.77607 14.2239 8.99993 14.5 8.99993H15V9.49993C15 9.77607 15.2239 9.99993 15.5 9.99993C15.7761 9.99993 16 9.77607 16 9.49993V8.99993H16.5C16.7761 8.99993 17 8.77607 17 8.49993C17 8.22379 16.7761 7.99993 16.5 7.99993H16V7.49993Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-24-adjust: 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.5 18C8.77614 18 9 17.7761 9 17.5V15.9492C10.141 15.7175 11 14.7094 11 13.5C11 12.2905 10.1411 11.2814 9 11.0498V6.5C9 6.22386 8.77614 6 8.5 6C8.22386 6 8 6.22386 8 6.5V11.0498C6.85886 11.2814 6 12.2905 6 13.5C6 14.7094 6.85895 15.7175 8 15.9492V17.5C8 17.7761 8.22386 18 8.5 18ZM15.5 18C15.7761 18 16 17.7761 16 17.5V12.9502C17.1411 12.7186 18 11.7095 18 10.5C18 9.29057 17.141 8.28247 16 8.05078V6.5C16 6.22386 15.7761 6 15.5 6C15.2239 6 15 6.22386 15 6.5V8.05078C13.859 8.28247 13 9.29057 13 10.5C13 11.7095 13.8589 12.7186 15 12.9502V17.5C15 17.7761 15.2239 18 15.5 18ZM15.5 12C14.6716 12 14 11.3284 14 10.5C14 9.67157 14.6716 9 15.5 9C16.3284 9 17 9.67157 17 10.5C17 11.3284 16.3284 12 15.5 12ZM8.5 15C7.67157 15 7 14.3284 7 13.5C7 12.6716 7.67157 12 8.5 12C9.32843 12 10 12.6716 10 13.5C10 14.3284 9.32843 15 8.5 15Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-16-adjust: 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.5 13C5.77614 13 6 12.7761 6 12.5V11.5C6 11.478 5.99591 11.4568 5.99316 11.4355C6.85886 11.2156 7.5 10.4341 7.5 9.5C7.5 8.56581 6.85898 7.7833 5.99316 7.56348C5.99583 7.54257 6 7.52163 6 7.5V3.5C6 3.22386 5.77614 3 5.5 3C5.22386 3 5 3.22386 5 3.5V7.5C5 7.52158 5.00321 7.54261 5.00586 7.56348C4.14051 7.78362 3.5 8.56614 3.5 9.5C3.5 10.4338 4.14063 11.2153 5.00586 11.4355C5.00313 11.4567 5 11.4781 5 11.5V12.5C5 12.7761 5.22386 13 5.5 13ZM10.5 13C10.7761 13 11 12.7761 11 12.5V8.5C11 8.47837 10.9958 8.45743 10.9932 8.43652C11.859 8.2167 12.5 7.43419 12.5 6.5C12.5 5.56589 11.8589 4.78435 10.9932 4.56445C10.9959 4.54324 11 4.52196 11 4.5V3.5C11 3.22386 10.7761 3 10.5 3C10.2239 3 10 3.22386 10 3.5V4.5C10 4.52192 10.0031 4.54328 10.0059 4.56445C9.14063 4.78468 8.5 5.56622 8.5 6.5C8.5 7.43386 9.14051 8.21638 10.0059 8.43652C10.0032 8.45739 10 8.47842 10 8.5V12.5C10 12.7761 10.2239 13 10.5 13ZM10.5 7.5C9.94772 7.5 9.5 7.05228 9.5 6.5C9.5 5.94772 9.94772 5.5 10.5 5.5C11.0523 5.5 11.5 5.94772 11.5 6.5C11.5 7.05228 11.0523 7.5 10.5 7.5ZM5.5 10.5C4.94772 10.5 4.5 10.0523 4.5 9.5C4.5 8.94772 4.94772 8.5 5.5 8.5C6.05228 8.5 6.5 8.94772 6.5 9.5C6.5 10.0523 6.05228 10.5 5.5 10.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
-
+  --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");
 
 
@@ -5013,6 +5014,7 @@ fig-chooser {
 fig-card {
   --fig-card-label-line-clamp: 1;
   --fig-card-media-radius: var(--radius-medium);
+  --fig-card-padding: var(--spacer-1);
   display: flex;
   flex-direction: column;
   gap: var(--spacer-1);
@@ -5023,8 +5025,21 @@ fig-card {
     width: 100%;
   }
 
+  &[size="large"] {
+    --fig-card-padding: var(--spacer-2);
+
+    .fig-card-text {
+      margin-top: var(--spacer-1);
+    }
+
+    .fig-card-label,
+    .fig-card-sublabel {
+      padding-inline: 0;
+    }
+  }
+
   &:is(:not([src]), [src=""]) {
-    padding: var(--spacer-1);
+    padding: var(--fig-card-padding);
     border-radius: 0.5625rem;
     box-sizing: border-box;
   }
@@ -5033,7 +5048,7 @@ fig-card {
     display: flex;
     flex-direction: column;
     gap: var(--spacer-1);
-    padding: var(--spacer-1);
+    padding: var(--fig-card-padding);
     border-radius: 0.5625rem;
     text-decoration: none;
     color: inherit;