@rogieking/figui3 8.9.14 → 8.9.16

package/.cursor/skills/fig-lab/SKILL.md

@@ -49,8 +49,8 @@ Shared:
 | Tag | Playground | Inner control | Notes |
 |---|---|---|---|
 | `propskit-switch` | `#propskit-switch` | `fig-switch` | `checked`, `default` boolean |
-| `propskit-color` | `#propskit-color` | `fig-input-color` | `alpha` default true |
-| `propskit-gradient` | `#propskit-gradient` | `fig-input-gradient` | `edit`, `mode="handle\|tip"` |
+| `propskit-color` | `#propskit-color` | `fig-fill-picker` + `fig-swatch` | Solid swatch, same size as gradient. Opens the fill picker. `alpha` default true |
+| `propskit-gradient` | `#propskit-gradient` | `fig-input-gradient` | Default `edit="picker"`. `mode="handle\|tip"` for inline edit |
 | `propskit-select` | `#propskit-select` | `fig-select` | `options` or slotted `fig-select-options` |
 | `propskit-text` | `#propskit-text` | `fig-input-text` | `type`, `readonly` |
 | `propskit-number` | `#propskit-number` | `fig-input-number` | `min`, `max`, `step`, `precision`, `units`, `steppers` |

package/.cursor/skills/figui3/SKILL.md

@@ -154,7 +154,7 @@ Playground hashes: `/figui3#{id}`. Full attrs: [reference.md](reference.md).
 | `fig-header` / `fig-footer` / `fig-content` | (containers) | Header: `borderless`, `compact`. Footer: `sticky` |
 | `fig-tabs` / `fig-tab` | `#tabs` | Roving tabs. `content="#id"` for panels |
 | `fig-segmented-control` / `fig-segment` | `#segmented-control` | Radio-group pattern |
-| `fig-chooser` / `fig-choice` | (containers) | Listbox selection |
+| `fig-chooser` / `fig-choice` | `#chooser` | Listbox. Omit `value` to select first; `value=""` means none. |
 | `fig-separator` / `fig-menu-separator` | `#separator` | Optional `label`, `sticky`, `borderless` |
 | `fig-menu` / `fig-menu-item` | `#menu` | `fig-menu-trigger`, `trigger="contextmenu"`, `position`, `offset`. Item also works in `fig-popup` (sticky separators, nested row menus). |
 | `fig-icon` | `#icon` | Token mask (`name`, `size="small"`, `color`) |

package/.cursor/skills/propkit/SKILL.md

@@ -68,7 +68,7 @@ On `fig-*` and `<dialog is="fig-...">`, use `class` not `className`.
 | Small discrete set (2–5) | `fig-segmented-control` | — |
 | Larger / rich list | `fig-select` (editor) | `propskit-select` |
 | Native select only | `fig-dropdown` | — |
-| Color | `fig-input-color` `text="true"` | `propskit-color` |
+| Color | `fig-input-color` `text="true"` | `propskit-color` (fill-picker swatch) |
 | Fill | `fig-input-fill` | — |
 | Gradient | `fig-input-gradient` | `propskit-gradient` |
 | Image | `fig-image` `upload` | — |

package/README.md

@@ -392,11 +392,11 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-color>`
 
-Composes a `<fig-field>` and `<fig-input-color>` into a full-surface property control. Color attributes are forwarded to the inner input and text editing remains enabled.
+Composes a `<fig-field>` and a solid `fig-fill-picker` swatch into a full-surface property control. Clicking the swatch opens the color picker. There is no hex/opacity text field.
 
 **Attributes:** `label`, `value`, `default`, `alpha`, `disabled`, `size`
 
-**Events:** `input`, `change` — forwarded from the inner color input.
+**Events:** `input`, `change` — `{ color, alpha, opacity }` from the fill picker.
 
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial color.
 
@@ -410,14 +410,14 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-gradient>`
 
-Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property control. The gradient is inline-editable by default.
+Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property control. Defaults to `edit="picker"` — click the swatch to open the fill picker.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `label` | string | `"Label"` | Field label text; use an empty value to hide it |
 | `value` | JSON string | default gradient | Canonical `{ "type": "gradient", "gradient": { ... } }` data |
 | `default` | JSON string | initial `value` | Right-click and group reset target |
-| `edit` | boolean/string | `true` | `true`, `false`, or `"picker"` |
+| `edit` | boolean/string | `"picker"` | `true` (inline stops), `false`, or `"picker"` |
 | `mode` | string | `"handle"` | `"handle"` or `"tip"` stop presentation |
 | `disabled` | boolean | `false` | Disabled state |
 | `size` | string | default | Set to `"large"` for the expanded layout |
@@ -426,7 +426,7 @@ Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property
 
 **Methods and state:** `defaultValue`, `isDefault`, and `resetToDefault()`. JSON defaults use structural equality, so object key order does not affect dirty state.
 
-The first stop receives focus when the field is focused. Arrow keys move the selected stop, Shift+Arrow moves by 5%, Tab cycles stops, and Delete/Backspace removes a stop while preserving the two-stop minimum.
+Click the swatch to open the fill picker. With `edit="true"`, the first stop receives focus; Arrow keys move the selected stop, Shift+Arrow moves by 5%, Tab cycles stops, and Delete/Backspace removes a stop while preserving the two-stop minimum.
 
 ```html
 <propskit-gradient
@@ -1053,7 +1053,7 @@ When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `value` | string | — | Selected choice value |
+| `value` | string | — | Selected choice value. Omit to select the first choice; `value=""` means none. |
 | `choice-element` | string | `"fig-choice"` | CSS selector for child choices |
 | `layout` | string | `"vertical"` | `"vertical"`, `"horizontal"`, `"grid"` |
 | `columns` | number | `2` | Grid column count when `layout="grid"` |

package/components.css

@@ -5312,7 +5312,9 @@ fig-choice {
       content: "";
       position: absolute;
       inset: 0;
-      border-radius: var(--fig-choice-border-radius);
+      border-radius: calc(
+        var(--fig-choice-border-radius) + var(--fig-choice-selection-ring-width)
+      );
       pointer-events: none;
       z-index: 1;
       box-shadow: inset 0 0 0 calc(var(--fig-choice-selection-ring-width)*2) var(--figma-color-bg);