@rogieking/figui3 6.40.1 → 7.1.0

package/README.md

@@ -1418,7 +1418,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`. The `label` and `sublabel` attributes render inside a generated `fig-footer`.
+A media card with a truncated label 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 |
 |---|---|---|---|
@@ -1427,10 +1427,8 @@ A media card with a truncated label, optional link, and attribute-only selection
 | `label` | string | — | Card title (preferred over `text`) |
 | `text` | string | — | Alias for `label` |
 | `sublabel` | string | — | Secondary one-line text under the label |
-| `href` | string | — | When set, wraps content in a real `<a>` |
-| `target` | string | — | Forwarded to the `<a>` (`_blank` adds `rel="noopener noreferrer"`) |
 | `selected` | boolean | `false` | Selected chrome only (no click-toggle) |
-| `disabled` | boolean | `false` | Dim + non-interactive; no `<a>` when disabled |
+| `disabled` | boolean | `false` | Dim + non-interactive |
 | `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` |
@@ -1441,7 +1439,6 @@ A media card with a truncated label, optional link, and attribute-only selection
 <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>
 <fig-card label="Custom preview">
   <fig-preview>...</fig-preview>

package/components.css

@@ -1239,7 +1239,7 @@ fig-tabs,
   gap: var(--spacer-1);
   min-width: 0;
   overflow: auto hidden;
-  padding: var(--spacer-2) 0;
+  padding: var(--spacer-1) 0;
   padding-inline: var(--fig-tabs-inline-padding);
   margin: 0;
   margin-left: var(--fig-tabs-margin-left);
@@ -1405,7 +1405,7 @@ input[type="color"] {
   }
 }
 
-fig-swatch {
+:is(fig-swatch, fig-chit) {
   --size: 1.5rem;
   --padding: 5px;
   --width: var(--size);
@@ -2320,7 +2320,7 @@ fig-combo-input fig-button[type="select"] {
     color: var(--figma-color-text);
   }
 
-  & > *:not(fig-swatch){
+  & > *:not(fig-swatch):not(fig-chit){
     &:first-child:not(:last-child),
     &:first-child:not(:last-child) > * {
       border-top-right-radius: 0;
@@ -3055,7 +3055,7 @@ dialog,
   background: var(--figma-color-bg);
   min-width: min(var(--popover-min-width), var(--dialog-max-width));
   box-shadow: var(--figma-elevation-500-modal-window);
-  max-height: calc(60vh - var(--spacer-4));
+  max-height: calc(100vh - var(--spacer-4) * 2);
   max-width: min(var(--dialog-max-width), 30rem);
   height: max-content;
   & > fig-content,
@@ -3790,14 +3790,14 @@ fig-input-fill {
     outline-offset: -1px !important;
   }
 
-  & > .input-combo > fig-swatch:not(:only-child),
-  & > .input-combo > fig-swatch:not(:only-child) input,
+  & > .input-combo > :is(fig-swatch, fig-chit):not(:only-child),
+  & > .input-combo > :is(fig-swatch, fig-chit):not(:only-child) input,
   & > .input-combo > fig-fill-picker:not(:only-child),
-  & > .input-combo > fig-fill-picker:not(:only-child) > fig-swatch > input,
+  & > .input-combo > fig-fill-picker:not(:only-child) > :is(fig-swatch, fig-chit) > input,
   & > .input-combo > label,
   & fig-fill-picker:not(:only-child),
   fig-input-text,
-  fig-swatch {
+  :is(fig-swatch, fig-chit) {
     &,
     &:focus,
     &:hover {
@@ -3808,8 +3808,8 @@ fig-input-fill {
       --selected: 0;
     }
   }
-  fig-swatch ~ fig-input-text > input,
-  fig-swatch ~ label,
+  :is(fig-swatch, fig-chit) ~ fig-input-text > input,
+  :is(fig-swatch, fig-chit) ~ label,
   fig-fill-picker ~ fig-input-text > input {
     padding-left: 0 !important;
   }
@@ -3956,8 +3956,8 @@ fig-input-gradient {
       display: contents;
     }
   }
-  & > fig-swatch,
-  & > fig-fill-picker > fig-swatch {
+  & > :is(fig-swatch, fig-chit),
+  & > fig-fill-picker > :is(fig-swatch, fig-chit) {
     --width: 100%;
     width: var(--width);
     --border-radius: var(--fig-input-gradient-swatch-border-radius);
@@ -3970,7 +3970,7 @@ fig-input-gradient {
     .fig-input-gradient-track {
       inset: 0;
     }
-    > fig-swatch{
+    > :is(fig-swatch, fig-chit){
       --size: var(--fig-input-gradient-height);
     }
   }
@@ -4048,7 +4048,7 @@ fig-input-palette {
         &:focus-within {
           outline: 0 !important;
         }
-        fig-swatch {
+        :is(fig-swatch, fig-chit) {
           --border-radius: 0px;
           --width: 100%;
           --padding: 0px;
@@ -4069,7 +4069,7 @@ fig-input-palette {
           }
         }
         &:first-child{
-          & fig-swatch::after{
+          & :is(fig-swatch, fig-chit)::after{
             box-shadow: none;
           }
         }
@@ -4122,7 +4122,7 @@ fig-input-palette {
       grid-column: button;
     }
 
-    fig-swatch {
+    :is(fig-swatch, fig-chit) {
       --border-radius: var(--radius-medium);
       width: auto !important;
       height: var(--size);
@@ -4144,7 +4144,7 @@ fig-field {
   --fig-field-right-padding: var(--spacer-3);
   --fig-field-top-padding: var(--spacer-1);
   --fig-field-bottom-padding: var(--spacer-1);
-  --fig-field-label-max-height: var(--spacer-5);
+  --fig-field-label-max-height: var(--spacer-4);
   --fig-field-label-ratio: 1fr;
   --fig-field-input-ratio: 2fr;
   display: grid;
@@ -5120,6 +5120,9 @@ fig-card {
   gap: var(--spacer-1);
   width: 100%;
   min-width: 0;
+  padding: var(--fig-card-padding);
+  border-radius: 0.5625rem;
+  box-sizing: border-box;
 
   &[full]:not([full="false"]) {
     width: 100%;
@@ -5128,8 +5131,7 @@ fig-card {
   &[size="large"] {
     --fig-card-padding: var(--spacer-2);
 
-    > fig-footer,
-    .fig-card-link > fig-footer {
+    > fig-footer {
       margin-top: var(--spacer-1);
     }
 
@@ -5139,58 +5141,29 @@ fig-card {
     }
   }
 
-  &:is(:not([src]), [src=""]) {
-    padding: var(--fig-card-padding);
-    border-radius: 0.5625rem;
-    box-sizing: border-box;
-  }
-
-  .fig-card-link {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-1);
-    padding: var(--fig-card-padding);
-    border-radius: 0.5625rem;
-    text-decoration: none;
-    color: inherit;
-    outline: none;
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-  }
-
-  .fig-card-link:focus-visible {
-    outline: var(--figma-focus-outline);
-    outline-offset: var(--figma-focus-outline-offset);
-  }
-
-  .fig-card-link > fig-image,
-  .fig-card-link > fig-media,
-  .fig-card-link > fig-preview,
-  &:is(:not([src]), [src=""]) > fig-image,
-  &:is(:not([src]), [src=""]) > fig-media,
-  &:is(:not([src]), [src=""]) > fig-preview {
-    display: block;
+  > fig-image,
+  > fig-media,
+  > fig-preview {
     width: 100%;
     max-width: none;
     gap: 0;
     border-radius: var(--fig-card-media-radius);
   }
 
-  .fig-card-link > fig-image > fig-preview,
-  .fig-card-link > fig-media > fig-preview,
-  .fig-card-link > fig-preview,
-  &:is(:not([src]), [src=""]) > fig-image > fig-preview,
-  &:is(:not([src]), [src=""]) > fig-media > fig-preview,
-  &:is(:not([src]), [src=""]) > fig-preview {
+  > fig-preview {
+    display: grid;
+  }
+
+  > fig-image > fig-preview,
+  > fig-media > fig-preview,
+  > fig-preview {
     width: 100%;
     max-width: none;
     border-radius: var(--fig-card-media-radius);
     min-height: auto;
   }
 
-  > fig-footer,
-  .fig-card-link > fig-footer {
+  > fig-footer {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -5204,8 +5177,7 @@ fig-card {
     min-width: 0;
   }
 
-  > fig-footer[hidden],
-  .fig-card-link > fig-footer[hidden] {
+  > fig-footer[hidden] {
     display: none;
   }
 
@@ -5230,10 +5202,14 @@ fig-card {
   }
 
   .fig-card-sublabel {
+    box-sizing: border-box;
+    display: block;
     font-size: var(--font-size-small);
     line-height: var(--line-height);
     color: var(--figma-color-text-secondary);
     padding-inline: var(--spacer-1);
+    width: 100%;
+    max-width: 100%;
     min-width: 0;
     min-height: 0;
     justify-content: flex-start;
@@ -5247,42 +5223,25 @@ fig-card {
     display: none;
   }
 
-  &:hover:not([selected]:not([selected="false"])):not(
-      [disabled]:not([disabled="false"])
-    ):not([aria-disabled="true"])
-    .fig-card-link,
-  &:is(:not([src]), [src=""]):hover:not(
+  &:hover:not(
       [selected]:not([selected="false"])
     ):not([disabled]:not([disabled="false"])):not([aria-disabled="true"]) {
     background: var(--figma-color-bg-secondary);
   }
 
-  &[selected]:not([selected="false"]) .fig-card-link,
-  &:is(:not([src]), [src=""])[selected]:not([selected="false"]) {
+  &[selected]:not([selected="false"]) {
     background: var(--figma-color-bg-selected);
   }
 
-  &[selected]:not([selected="false"])
-    .fig-card-link
-    > :is(fig-image, fig-media, fig-preview),
-  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
-    > :is(fig-image, fig-media, fig-preview) {
+  &[selected]:not([selected="false"]) > :is(fig-image, fig-media, fig-preview) {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
 
   &[selected]:not([selected="false"])
-    .fig-card-link
-    > :is(fig-image, fig-media)
-    > fig-preview::after,
-  &[selected]:not([selected="false"])
-    .fig-card-link
-    > fig-preview::after,
-  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
     > :is(fig-image, fig-media)
     > fig-preview::after,
-  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
-    > fig-preview::after {
+  &[selected]:not([selected="false"]) > fig-preview::after {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }
 
@@ -5536,7 +5495,7 @@ fig-color-tip {
     cursor: pointer;
   }
 
-  fig-swatch {
+  :is(fig-swatch, fig-chit) {
     input[type="color"] {
       background: transparent;
     }