@rogieking/figui3 10.0.1 → 10.0.3

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

@@ -447,6 +447,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 
 - Attrs (chooser): `value`, `layout` (`vertical` | `horizontal` | `grid`), `columns`, `drag`, `loop`, `auto-scroll`, `scroll-behavior`
 - Choice: always set `value`. Omit chooser `value` to select first; `value=""` means none.
+- A selected choice reflects `selected` to its direct element children.
 - Children stay in light DOM.
 
 ### `fig-separator` / `fig-menu-separator`
@@ -610,7 +611,7 @@ toastRef.current?.showToast();
 />
 ```
 
-- Attrs: `type`, `src`, `caption`, `aspect-ratio`, `fit`, `upload`, `loading-indicator`, `checkerboard`, `controls`, `autoplay`, `loop`, `muted`, `poster`
+- Attrs: `type`, `src`, read-only `loaded` (image mode), `caption`, `aspect-ratio`, `fit`, `upload`, `loading-indicator`, `checkerboard`, `controls`, `autoplay`, `loop`, `muted`, `poster`
 - Events: `loaded` (`detail.src`), `input` / `change`
 
 ### `fig-image`
@@ -619,7 +620,8 @@ toastRef.current?.showToast();
 <fig-image src={src} fit="cover" upload checkerboard="true" onChange={onChange} />
 ```
 
-- Attrs: same media surface attrs. `loaded` → `detail.src`
+- Attrs: same media surface attrs. The read-only `loaded` attribute supports CSS loaded-state selectors.
+- Events: `load`, `error`, and `loaded` (`detail.src`)
 
 ### `fig-video`
 
@@ -641,7 +643,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,34 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.3]
+
+### Added
+
+- Added a read-only `loaded` state to `fig-image` and image-mode `fig-media` for CSS styling.
+- Selected `fig-choice` elements now reflect `selected` to their direct element children.
+
+### Changed
+
+- Arrow keys now move chooser focus without selecting; Enter, Space, and clicks commit selection.
+- Chooser card and color examples now use `fig-card` and `fig-swatch` directly as custom choices.
+- Refined chooser and card focus and selection outlines.
+
+### Fixed
+
+- Replaced fragile grid first-row markers with native row gaps and kept overflow controls out of chooser grid flow.
+
+## [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

package/README.md

@@ -881,7 +881,7 @@ When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | string | — | Choice identifier |
-| `selected` | boolean | `false` | Selected state |
+| `selected` | boolean | `false` | Selected state; reflected to direct element children |
 | `disabled` | boolean | `false` | Disabled state |
 
 **Events (on fig-chooser):** `input`, `change` — detail is the selected value string.
@@ -1535,6 +1535,7 @@ Unified media component that supports image/video modes and shared sizing/upload
 | `type` | string | `"image"` | `"image"` or `"video"` |
 | `src` | string | — | Media URL |
 | `alt` | string | `""` | Alt text forwarded to the generated `<img>` (image mode) |
+| `loaded` | boolean | `false` | Read-only reflected state after an image loads successfully |
 | `upload` | boolean | `false` | Show upload overlay (`fig-input-file`) |
 | `loading-indicator` | boolean | `true` | Set to `"false"` to disable the delayed loading spinner for generated images |
 | `label` | string | `"Upload"` | Upload button label |
@@ -1579,6 +1580,7 @@ An image display component with optional upload, aspect ratio, and object-fit co
 |---|---|---|---|
 | `src` | string | — | Image URL |
 | `alt` | string | `""` | Alt text forwarded to the generated `<img>` |
+| `loaded` | boolean | `false` | Read-only reflected state after the image loads successfully |
 | `upload` | boolean | `false` | Show upload overlay (`fig-input-file`) |
 | `loading-indicator` | boolean | `true` | Set to `"false"` to disable the delayed loading spinner |
 | `label` | string | `"Upload"` | Upload button label |
@@ -1591,6 +1593,7 @@ An image display component with optional upload, aspect ratio, and object-fit co
 Use meaningful `alt` text for informative images. Use `alt=""` for decorative previews, thumbnails with visible labels, or upload placeholders.
 
 The generated image's native `load` and `error` events are re-emitted from `fig-image` as bubbling, composed `CustomEvent`s with `src`, `media`, and `originalEvent` in `event.detail`.
+The `loaded` attribute is removed when `src` changes or loading fails, so it can be used as a CSS state selector such as `fig-image[loaded]`.
 
 ```html
 <fig-image src="photo.jpg" alt="Selected image"></fig-image>
@@ -1623,12 +1626,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 +1650,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

@@ -89,8 +89,10 @@
   --figma-color-border-slot: light-dark(#ff24bd, #f316b0);
 
   /* Focus */
-  --figma-focus-outline: 1px solid var(--figma-color-border-selected);
-  --figma-focus-outline-offset: -1px;
+  --figma-focus-outline-width: 1.5px;
+  --figma-focus-outline-color: var(--figma-color-border-selected);
+  --figma-focus-outline: var(--figma-focus-outline-width) solid var(--figma-focus-outline-color);
+  --figma-focus-outline-offset: var(--figma-focus-outline-width);
   --figma-focus-outline-radius: inherit;
 
   /* Icon Colors */
@@ -6241,7 +6243,7 @@ fig-chooser {
   &[layout="grid"] {
     display: grid;
     column-gap: var(--fig-chooser-gap);
-    row-gap: 0;
+    row-gap: var(--fig-chooser-gap);
     grid-template-columns: repeat(
       var(--fig-chooser-grid-columns, 2),
       minmax(0, 1fr)
@@ -6251,11 +6253,6 @@ fig-chooser {
 
     > :not(.fig-overflow) {
       margin: 0;
-      margin-block-start: var(--fig-chooser-gap);
-    }
-
-    > [data-fig-chooser-first-row] {
-      margin-block-start: 0;
     }
 
     > .fig-overflow {
@@ -6295,6 +6292,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);
@@ -6304,12 +6303,18 @@ fig-card {
   border-radius: 0.5625rem;
   box-sizing: border-box;
 
+  &:focus-visible{
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
   &[full]:not([full="false"]) {
     width: 100%;
   }
 
   &[size="large"] {
     --fig-card-padding: var(--spacer-2);
+    --fig-card-thumbnail-width: 3.5rem;
 
     > fig-footer {
       margin-top: var(--spacer-1);
@@ -6321,6 +6326,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 {
@@ -6341,6 +6380,9 @@ fig-card {
     max-width: none;
     border-radius: var(--fig-card-media-radius);
     min-height: auto;
+    &::after{
+      visibility: hidden;
+    }
   }
 
   > fig-footer {
@@ -6401,6 +6443,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"]) {
@@ -6413,14 +6466,7 @@ fig-card {
 
   &[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"])
-    > :is(fig-image, fig-media)
-    > fig-preview::after,
-  &[selected]:not([selected="false"]) > fig-preview::after {
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+    outline-offset: 0;
   }
 
   &[disabled]:not([disabled="false"]),
@@ -6436,6 +6482,7 @@ fig-choice {
   --fig-choice-border-radius: var(--radius-medium);
   --fig-choice-min-height: 1.5rem;
   --fig-choice-min-width: 1.5rem;
+  --fig-choice-selection-ring-width: 1.5px;
 
   min-height: var(--fig-choice-min-height);
   min-width: var(--fig-choice-min-width);
@@ -6457,32 +6504,24 @@ fig-choice {
     background-color: var(--figma-color-bg-secondary);
   }
 
-  &:focus-visible {
-    outline: var(--figma-focus-outline);
-    outline-offset: var(--figma-focus-outline-offset);
-  }
-
   &[padding]:not([padding="false"]) {
     --fig-choice-padding: var(--spacer-1);
     --fig-choice-border-radius: var(--radius-medium-large);
   }
 
-  &[selected]:not([selected="false"]) {
-    position: relative;
-    &::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      border-radius: calc(
-        var(--fig-choice-border-radius)
-      );
-      pointer-events: none;
-      z-index: 1;
-      outline: var(--fig-choice-selection-ring-width, 2px) solid
+  &:focus-visible,
+  &[selected]:not([selected="false"]){
+    outline: var(--fig-choice-selection-ring-width) solid
         var(--figma-color-border-selected);
-      outline-offset: var(--fig-choice-selection-ring-width, 2px);
+    outline-offset: var(--fig-choice-selection-ring-width);
+  }
+
+  &[selected]:not([selected="false"]) {
+    background-color: var(--figma-color-bg-selected);
+    &>*,
+    &:hover{
+      background-color: transparent;
     }
-    background-color: var(--figma-color-bg-secondary);
   }
 
   &[disabled]:not([disabled="false"]),