@rogieking/figui3 10.0.2 → 10.0.4

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`
 

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.4]
+
+### Changed
+
+- Refined selected `fig-card` media to use a 1px selection outline.
+
+## [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

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>

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 {
@@ -6306,6 +6303,11 @@ 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%;
   }
@@ -6378,6 +6380,9 @@ fig-card {
     max-width: none;
     border-radius: var(--fig-card-media-radius);
     min-height: auto;
+    &::after{
+      visibility: hidden;
+    }
   }
 
   > fig-footer {
@@ -6460,15 +6465,8 @@ 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: 1px solid var(--figma-focus-outline-color);
+    outline-offset: 0;
   }
 
   &[disabled]:not([disabled="false"]),
@@ -6484,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);
@@ -6505,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"]),