@rogieking/figui3 8.9.13 → 8.9.15

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/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

package/components.css

@@ -5683,9 +5683,11 @@ fig-menu-item {
   &[direction="vertical"] {
     align-self: stretch;
     width: 1px;
+    max-width: 1px;
     height: auto;
     min-height: var(--spacer-3);
     margin: 0;
+    padding: 0;
   }
 
   &[borderless]:not([borderless="false"]) {