@rogieking/figui3 10.0.0 → 10.0.2

package/.cursor/skills/figui3/components.md

@@ -641,7 +641,10 @@ toastRef.current?.showToast();
 />
 ```
 
-- Attrs: `src`, `label`, `sublabel`, `selected`, `disabled`, `full`, `size`, `aspect-ratio`, `fit`, `label-line-clamp`
+- Attrs: `src`, `label`, `sublabel`, `selected`, `disabled`, `full`, `size`, `direction`, `aspect-ratio`, `fit`, `label-line-clamp`, `label-overflow`
+- `direction="horizontal"` uses a 40px media preview on the left (`56px` with `size="large"`) and stacks label/sublabel content on the right.
+- `label-overflow="fade"` adds `fig-overflow-fade fig-overflow-fade-horizontal` to both labels; the default is `ellipsis`.
+- Thumbnail vars: `--fig-card-thumbnail-width` (`2.5rem`, or `3.5rem` when large), `--fig-card-thumbnail-height` (`auto`).
 
 ### `fig-media-controls`
 

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.2]
+
+### Added
+
+- Added `direction="horizontal"` list layouts to `fig-card` with size-aware thumbnails and configurable thumbnail dimensions.
+- Added `label-overflow="fade"` for horizontal label and sublabel fades.
+
+### Changed
+
+- Horizontal cards use 40px thumbnails by default, 56px thumbnails when large, and extra trailing padding at the default size.
+
+## [10.0.1]
+
+### Changed
+
+- Refined the hue slider handle with an inset thumb-color ring and layered shadow.
+
 ## [10.0.0]
 
 ### Added

package/README.md

@@ -1623,12 +1623,18 @@ A media card with a truncated label and attribute-only selection chrome. With `s
 | `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 |
+| `direction` | string | `"vertical"` | Set to `"horizontal"` for a list layout with 40px media on the left (56px with `size="large"`) and stacked labels on the right |
 | `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 |
+| `label-overflow` | string | `"ellipsis"` | Set to `"fade"` to apply horizontal overflow fades to the label and sublabel |
+
+Horizontal thumbnail sizing uses `--fig-card-thumbnail-width` (`2.5rem` by default, `3.5rem` with `size="large"`) and `--fig-card-thumbnail-height` (`auto` by default). Leaving height at `auto` preserves the media `aspect-ratio`.
 
 ```html
 <fig-card src="photo.jpg" label="Autumn field"></fig-card>
+<fig-card src="photo.jpg" label="Autumn field" sublabel="Landscape photography" direction="horizontal"></fig-card>
+<fig-card src="photo.jpg" label="A long card label" sublabel="A long card sublabel" direction="horizontal" label-overflow="fade"></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="Wide card" aspect-ratio="16/9" full></fig-card>
@@ -1641,6 +1647,8 @@ A media card with a truncated label and attribute-only selection chrome. With `s
 </fig-card>
 ```
 
+`label-overflow="fade"` adds both `fig-overflow-fade` and `fig-overflow-fade-horizontal` to generated or authored `.fig-card-label` and `.fig-card-sublabel` elements. Any other value uses the default ellipsis behavior.
+
 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

@@ -3346,6 +3346,13 @@ fig-slider {
     --slider-checkerboard: var(--checkerboard-slider);
     --slider-track-color: var(--figma-color-bg-tertiary);
 
+    &[type="hue"]{
+      --slider-handle-shadow:
+      inset 0 0 0 3px var(--slider-thumb-color),
+      0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
+      var(--figma-elevation-100);
+    }
+
     background-color: var(--figma-color-bg-secondary);
     border-radius: var(--radius-medium);
     padding-left: var(--spacer-2);
@@ -6288,6 +6295,8 @@ fig-card {
   --fig-card-label-line-clamp: 1;
   --fig-card-media-radius: var(--radius-medium);
   --fig-card-padding: var(--spacer-1);
+  --fig-card-thumbnail-width: 2.5rem;
+  --fig-card-thumbnail-height: auto;
   display: flex;
   flex-direction: column;
   gap: var(--spacer-1);
@@ -6303,6 +6312,7 @@ fig-card {
 
   &[size="large"] {
     --fig-card-padding: var(--spacer-2);
+    --fig-card-thumbnail-width: 3.5rem;
 
     > fig-footer {
       margin-top: var(--spacer-1);
@@ -6314,6 +6324,40 @@ fig-card {
     }
   }
 
+  &[direction="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacer-2);
+
+    > :is(fig-image, fig-media, fig-preview) {
+      flex: 0 0 var(--fig-card-thumbnail-width);
+      width: var(--fig-card-thumbnail-width);
+      max-width: var(--fig-card-thumbnail-width);
+      height: var(--fig-card-thumbnail-height);
+    }
+
+    > :is(fig-image, fig-media) > fig-preview,
+    > fig-preview {
+      height: var(--fig-card-thumbnail-height);
+    }
+
+    > fig-footer {
+      flex: 1 1 0;
+      width: auto;
+      margin-top: 0;
+    }
+
+    .fig-card-label,
+    .fig-card-sublabel {
+      padding-inline: 0;
+    }
+  }
+
+  &[direction="horizontal"]:not([size]),
+  &[direction="horizontal"][size=""] {
+    padding-right: var(--spacer-2);
+  }
+
   > fig-image,
   > fig-media,
   > fig-preview {
@@ -6394,6 +6438,17 @@ fig-card {
     display: none;
   }
 
+  :is(.fig-card-label, .fig-card-sublabel).fig-overflow-fade-horizontal {
+    display: block;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    text-overflow: clip;
+    word-break: normal;
+  }
+
   &:hover:not(
       [selected]:not([selected="false"])
     ):not([disabled]:not([disabled="false"])):not([aria-disabled="true"]) {