@rogieking/figui3 6.19.1 → 6.20.0

package/README.md

@@ -125,6 +125,7 @@ Minimal example:
 | [Preview](#preview) | `<fig-preview>` | Thin visual preview layer |
 | [Media](#media) | `<fig-media>` | Shared media host for image/video |
 | [Image](#image) | `<fig-image>` | Image display/upload |
+| [Card](#card) | `<fig-card>` | Media card with label, link, and selection chrome |
 | [Video](#video) | `<fig-video>` | Video display/upload with playback controls |
 | [Avatar](#avatar) | `<fig-avatar>` | Profile image or initials |
 | [Icon](#icon) | `<fig-icon>` | Masked icon from design tokens |
@@ -1324,6 +1325,39 @@ Use `slot="overlay"` for custom overlay controls. Slotted overlays stay as direc
 
 ---
 
+#### Card
+
+`<fig-card>` — [demo](https://rog.ie/figui3/#card)
+
+A media card with a truncated label, optional link, and attribute-only selection chrome. Composes a generated `fig-image` (or an authored `fig-image` / `fig-media` / `fig-preview` child).
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `src` | string | — | Image URL forwarded to generated `fig-image` |
+| `alt` | string | `""` | Alt text forwarded to generated `fig-image` |
+| `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 |
+| `full` | boolean | `false` | Stretch to the available width (cards are already `width: 100%` by default) |
+| `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="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>
+```
+
+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.
+
+---
+
 #### Video
 
 `<fig-video>`

package/components.css

@@ -5054,6 +5054,137 @@ fig-chooser {
   }
 }
 
+fig-card {
+  --fig-card-label-line-clamp: 1;
+  --fig-card-media-radius: var(--radius-medium);
+  display: block;
+  width: 100%;
+  min-width: 0;
+
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
+
+  .fig-card-link {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+    padding: var(--spacer-1);
+    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-media {
+    position: relative;
+    border-radius: var(--fig-card-media-radius);
+    background: var(--figma-color-bg-secondary);
+    overflow: hidden;
+    min-width: 0;
+  }
+
+  .fig-card-media > fig-image,
+  .fig-card-media > fig-media,
+  .fig-card-media > fig-preview {
+    display: block;
+    width: 100%;
+    max-width: none;
+    gap: 0;
+    border-radius: var(--fig-card-media-radius);
+  }
+
+  .fig-card-media > fig-image > fig-preview,
+  .fig-card-media > fig-media > fig-preview,
+  .fig-card-media > fig-preview {
+    width: 100%;
+    max-width: none;
+    border-radius: var(--fig-card-media-radius);
+    min-height: auto;
+  }
+
+  .fig-card-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-width: 0;
+  }
+
+  .fig-card-text[hidden] {
+    display: none;
+  }
+
+  .fig-card-label {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height);
+    color: var(--figma-color-text);
+    min-width: 0;
+    padding-inline: var(--spacer-1);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--fig-card-label-line-clamp);
+    overflow: hidden;
+    word-break: break-word;
+  }
+
+  .fig-card-label[hidden] {
+    display: none;
+  }
+
+  .fig-card-sublabel {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height);
+    color: var(--figma-color-text-secondary);
+    padding-inline: var(--spacer-1);
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .fig-card-sublabel[hidden] {
+    display: none;
+  }
+
+  &:hover:not([selected]:not([selected="false"])):not(
+      [disabled]:not([disabled="false"])
+    ):not([aria-disabled="true"])
+    .fig-card-link {
+    background: var(--figma-color-bg-secondary);
+  }
+
+  &[selected]:not([selected="false"]) .fig-card-link {
+    background: var(--figma-color-bg-selected);
+  }
+
+  &[selected]:not([selected="false"]) .fig-card-media {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
+  &[selected]:not([selected="false"])
+    .fig-card-media
+    > :is(fig-image, fig-media)
+    > fig-preview::after,
+  &[selected]:not([selected="false"]) .fig-card-media > fig-preview::after {
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+  }
+
+  &[disabled]:not([disabled="false"]),
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+}
+
 fig-choice {
   --fig-choice-selection-ring-width: 1px;
   --fig-choice-padding: 0px;